112 lines
3.3 KiB
TypeScript
112 lines
3.3 KiB
TypeScript
import { DatabaseContext } from '@components/contexts/database';
|
|
import { RelayContext } from '@components/contexts/relay';
|
|
|
|
import { dateToUnix, hoursAgo } from '@utils/getDate';
|
|
|
|
import { ReloadIcon } from '@radix-ui/react-icons';
|
|
import { useLocalStorage } from '@rehooks/local-storage';
|
|
import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
|
|
export const NoteConnector = memo(function NoteConnector({
|
|
setParentReload,
|
|
setHasNewNote,
|
|
currentDate,
|
|
}: {
|
|
setParentReload: any;
|
|
setHasNewNote: any;
|
|
currentDate: any;
|
|
}) {
|
|
const { db }: any = useContext(DatabaseContext);
|
|
const relayPool: any = useContext(RelayContext);
|
|
|
|
const [follows]: any = useLocalStorage('follows');
|
|
const [relays]: any = useLocalStorage('relays');
|
|
|
|
const [reload, setReload] = useState(false);
|
|
const timeout = useRef(null);
|
|
|
|
const reloadNewsfeed = () => {
|
|
setParentReload(true);
|
|
setReload(true);
|
|
timeout.current = setTimeout(() => {
|
|
setReload(false);
|
|
}, 2000);
|
|
};
|
|
|
|
const insertDB = useCallback(
|
|
async (event: any) => {
|
|
await db.execute(
|
|
`INSERT OR IGNORE INTO
|
|
cache_notes
|
|
(id, pubkey, created_at, kind, tags, content) VALUES
|
|
(
|
|
"${event.id}",
|
|
"${event.pubkey}",
|
|
"${event.created_at}",
|
|
"${event.kind}",
|
|
'${JSON.stringify(event.tags)}',
|
|
"${event.content}"
|
|
);`
|
|
);
|
|
},
|
|
[db]
|
|
);
|
|
|
|
const fetchEvent = useCallback(() => {
|
|
relayPool.subscribe(
|
|
[
|
|
{
|
|
kinds: [1],
|
|
authors: follows,
|
|
since: dateToUnix(hoursAgo(12, currentDate)),
|
|
},
|
|
],
|
|
relays,
|
|
(event: any) => {
|
|
// show trigger update newer event
|
|
if (event.created_at > dateToUnix(currentDate)) {
|
|
setHasNewNote(true);
|
|
}
|
|
// insert event to local database
|
|
insertDB(event).catch(console.error);
|
|
},
|
|
undefined,
|
|
(events: any, relayURL: any) => {
|
|
console.log(events, relayURL);
|
|
}
|
|
);
|
|
}, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
|
|
|
|
useEffect(() => {
|
|
fetchEvent();
|
|
|
|
return () => {
|
|
clearTimeout(timeout.current);
|
|
};
|
|
}, [fetchEvent]);
|
|
|
|
return (
|
|
<div className="relative flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-zinc-500"># following</h3>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={() => reloadNewsfeed()}
|
|
className={`${reload ? 'animate-spin' : ''} rounded-full p-1 hover:bg-zinc-800`}
|
|
>
|
|
<ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
|
|
</button>
|
|
<div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">
|
|
{/* #TODO: get user network status */}
|
|
<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 className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
|
</span>
|
|
<p className="text-xs font-medium text-zinc-500">Online</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|