mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 19:46:34 +00:00
added network status & updated root note component
This commit is contained in:
parent
8b2c6e67f5
commit
eabb16dde1
@ -48,7 +48,7 @@ export default function AccountColumn() {
|
|||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-col gap-0.5 text-center">
|
<div className="flex flex-col gap-0.5 text-center">
|
||||||
<span className="bg-gradient-to-r from-fuchsia-300 via-orange-100 to-amber-300 bg-clip-text text-sm font-black uppercase leading-tight text-transparent">
|
<span className="animate-moveBg from-fuchsia-300 via-orange-100 to-amber-300 text-sm font-black uppercase leading-tight text-zinc-600 hover:bg-gradient-to-r hover:bg-clip-text hover:text-transparent">
|
||||||
Lume
|
Lume
|
||||||
</span>
|
</span>
|
||||||
<span className="text-xs font-medium text-zinc-700">v{version}</span>
|
<span className="text-xs font-medium text-zinc-700">v{version}</span>
|
||||||
|
@ -7,7 +7,7 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
|
|||||||
|
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
import { useLocalStorage } from '@rehooks/local-storage';
|
||||||
import { useSetAtom } from 'jotai';
|
import { useSetAtom } from 'jotai';
|
||||||
import { memo, useCallback, useContext, useMemo, useRef } from 'react';
|
import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
||||||
|
|
||||||
export const NoteConnector = memo(function NoteConnector() {
|
export const NoteConnector = memo(function NoteConnector() {
|
||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
@ -17,6 +17,7 @@ export const NoteConnector = memo(function NoteConnector() {
|
|||||||
const [relays]: any = useLocalStorage('relays');
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
|
||||||
const setHasNewerNote = useSetAtom(atomHasNewerNote);
|
const setHasNewerNote = useSetAtom(atomHasNewerNote);
|
||||||
|
const [isOnline, setIsOnline] = useState(navigator.onLine);
|
||||||
const now = useRef(new Date());
|
const now = useRef(new Date());
|
||||||
|
|
||||||
const insertDB = useCallback(
|
const insertDB = useCallback(
|
||||||
@ -51,14 +52,34 @@ export const NoteConnector = memo(function NoteConnector() {
|
|||||||
);
|
);
|
||||||
}, [relayPool, follows, relays, insertDB, setHasNewerNote]);
|
}, [relayPool, follows, relays, insertDB, setHasNewerNote]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleStatusChange = () => {
|
||||||
|
setIsOnline(navigator.onLine);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('online', handleStatusChange);
|
||||||
|
window.addEventListener('offline', handleStatusChange);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('online', handleStatusChange);
|
||||||
|
window.removeEventListener('offline', handleStatusChange);
|
||||||
|
};
|
||||||
|
}, [isOnline]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
|
<div className="inline-flex items-center gap-1 rounded-md py-1 px-1.5 hover:bg-zinc-900">
|
||||||
<span className="relative flex h-1.5 w-1.5">
|
<span className="relative flex h-1.5 w-1.5">
|
||||||
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-400 opacity-75"></span>
|
<span
|
||||||
<span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${
|
||||||
|
isOnline ? 'bg-green-400' : 'bg-red-400'
|
||||||
|
}`}
|
||||||
|
></span>
|
||||||
|
<span
|
||||||
|
className={`relative inline-flex h-1.5 w-1.5 rounded-full ${isOnline ? 'bg-green-400' : 'bg-amber-400'}`}
|
||||||
|
></span>
|
||||||
</span>
|
</span>
|
||||||
<p className="text-xs font-medium text-zinc-500">Relays</p>
|
<p className="text-xs font-medium text-zinc-500">{isOnline ? 'Online' : 'Offline'}</p>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -37,8 +37,11 @@ export default function NoteMetadata({ eventID, eventPubkey }: { eventID: string
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
undefined,
|
undefined,
|
||||||
(events: any, relayURL: any) => {
|
(events, relayURL) => {
|
||||||
console.log(events, relayURL);
|
console.log(events, relayURL);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unsubscribeOnEose: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
import { DatabaseContext } from '@components/contexts/database';
|
||||||
import { RelayContext } from '@components/contexts/relay';
|
import { RelayContext } from '@components/contexts/relay';
|
||||||
import { Content } from '@components/note/content';
|
import { Content } from '@components/note/content';
|
||||||
|
|
||||||
@ -5,11 +6,28 @@ import useLocalStorage from '@rehooks/local-storage';
|
|||||||
import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
import { memo, useCallback, useContext, useEffect, useState } from 'react';
|
||||||
|
|
||||||
export const RootNote = memo(function RootNote({ id }: { id: string }) {
|
export const RootNote = memo(function RootNote({ id }: { id: string }) {
|
||||||
|
const { db }: any = useContext(DatabaseContext);
|
||||||
const relayPool: any = useContext(RelayContext);
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
|
||||||
const [relays]: any = useLocalStorage('relays');
|
const [relays]: any = useLocalStorage('relays');
|
||||||
const [event, setEvent] = useState(null);
|
const [event, setEvent] = useState(null);
|
||||||
|
|
||||||
|
const insertDB = useCallback(
|
||||||
|
async (event: any) => {
|
||||||
|
// insert to local database
|
||||||
|
await db.execute(
|
||||||
|
'INSERT OR IGNORE INTO cache_notes (id, pubkey, created_at, kind, content, tags) VALUES (?, ?, ?, ?, ?, ?);',
|
||||||
|
[event.id, event.pubkey, event.created_at, event.kind, event.content, JSON.stringify(event.tags)]
|
||||||
|
);
|
||||||
|
},
|
||||||
|
[db]
|
||||||
|
);
|
||||||
|
|
||||||
|
const getData = useCallback(async () => {
|
||||||
|
const result = await db.select(`SELECT * FROM cache_notes WHERE id = "${id}"`);
|
||||||
|
return result[0];
|
||||||
|
}, []);
|
||||||
|
|
||||||
const fetchEvent = useCallback(() => {
|
const fetchEvent = useCallback(() => {
|
||||||
relayPool.subscribe(
|
relayPool.subscribe(
|
||||||
[
|
[
|
||||||
@ -20,14 +38,32 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
|
|||||||
],
|
],
|
||||||
relays,
|
relays,
|
||||||
(event: any) => {
|
(event: any) => {
|
||||||
|
// update state
|
||||||
setEvent(event);
|
setEvent(event);
|
||||||
|
// insert to database
|
||||||
|
insertDB(event);
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
(events, relayURL) => {
|
||||||
|
console.log(events, relayURL);
|
||||||
|
},
|
||||||
|
{
|
||||||
|
unsubscribeOnEose: true,
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}, [id, relayPool, relays]);
|
}, [id, insertDB, relayPool, relays]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
getData()
|
||||||
|
.then((res) => {
|
||||||
|
if (res) {
|
||||||
|
setEvent(res);
|
||||||
|
} else {
|
||||||
fetchEvent();
|
fetchEvent();
|
||||||
}, [fetchEvent]);
|
}
|
||||||
|
})
|
||||||
|
.catch(console.error);
|
||||||
|
}, [fetchEvent, getData]);
|
||||||
|
|
||||||
if (event) {
|
if (event) {
|
||||||
return (
|
return (
|
||||||
@ -37,6 +73,31 @@ export const RootNote = memo(function RootNote({ id }: { id: string }) {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return <>Loading...</>;
|
return (
|
||||||
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col">
|
||||||
|
<div className="flex items-start gap-4">
|
||||||
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
||||||
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
|
<div className="flex w-full items-center justify-between">
|
||||||
|
<div className="flex items-center gap-2 text-sm">
|
||||||
|
<div className="h-4 w-16 rounded bg-zinc-700" />
|
||||||
|
<span className="text-zinc-500">·</span>
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
<div className="h-3 w-3 rounded-full bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="-mt-4 pl-[60px]">
|
||||||
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="h-16 w-full rounded bg-zinc-700" />
|
||||||
|
<div className="flex items-center gap-8">
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
Loading…
Reference in New Issue
Block a user