mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
optimized note connector
This commit is contained in:
parent
b4424e7c35
commit
5d3c1aec2e
@ -6,14 +6,20 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
|
|||||||
|
|
||||||
import { ReloadIcon } from '@radix-ui/react-icons';
|
import { ReloadIcon } from '@radix-ui/react-icons';
|
||||||
import { useLocalStorage } from '@rehooks/local-storage';
|
import { useLocalStorage } from '@rehooks/local-storage';
|
||||||
import { memo, useCallback, useContext, useRef } from 'react';
|
import { memo, useCallback, useContext, useEffect } from 'react';
|
||||||
|
|
||||||
export const NoteConnector = memo(function NoteConnector({ setReload }: { setReload: any }) {
|
export const NoteConnector = memo(function NoteConnector({
|
||||||
|
setParentReload,
|
||||||
|
setHasNewNote,
|
||||||
|
currentDate,
|
||||||
|
}: {
|
||||||
|
setParentReload: any;
|
||||||
|
setHasNewNote: any;
|
||||||
|
currentDate: any;
|
||||||
|
}) {
|
||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
const relayPool: any = useContext(RelayContext);
|
const relayPool: any = useContext(RelayContext);
|
||||||
|
|
||||||
const now = useRef(new Date());
|
|
||||||
|
|
||||||
const [follows]: any = useLocalStorage('follows');
|
const [follows]: any = useLocalStorage('follows');
|
||||||
const [relays]: any = useLocalStorage('relays');
|
const [relays]: any = useLocalStorage('relays');
|
||||||
|
|
||||||
@ -29,34 +35,46 @@ export const NoteConnector = memo(function NoteConnector({ setReload }: { setRel
|
|||||||
[db]
|
[db]
|
||||||
);
|
);
|
||||||
|
|
||||||
relayPool.subscribe(
|
const fetchEvent = useCallback(() => {
|
||||||
[
|
relayPool.subscribe(
|
||||||
{
|
[
|
||||||
kinds: [1],
|
{
|
||||||
authors: follows,
|
kinds: [1],
|
||||||
since: dateToUnix(hoursAgo(12, now.current)),
|
authors: follows,
|
||||||
|
since: dateToUnix(hoursAgo(12, currentDate)),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
relays,
|
||||||
|
(event: any) => {
|
||||||
|
// insert event to local database
|
||||||
|
insertDB(event).catch(console.error);
|
||||||
|
// show trigger update newer event
|
||||||
|
if (event.created_at > dateToUnix(currentDate)) {
|
||||||
|
setHasNewNote(true);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
],
|
undefined,
|
||||||
relays,
|
(events: any, relayURL: any) => {
|
||||||
(event: any) => {
|
console.log(events, relayURL);
|
||||||
insertDB(event).catch(console.error);
|
}
|
||||||
},
|
);
|
||||||
undefined,
|
}, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
|
||||||
(events: any, relayURL: any) => {
|
|
||||||
console.log(events, relayURL);
|
useEffect(() => {
|
||||||
}
|
fetchEvent();
|
||||||
);
|
}, [fetchEvent]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
|
<div className="relative flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-semibold text-zinc-500"># following</h3>
|
<h3 className="text-sm font-semibold text-zinc-500"># following</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button onClick={() => setReload(true)} className="rounded-full p-1 hover:bg-zinc-800">
|
<button onClick={() => setParentReload(true)} className="rounded-full p-1 hover:bg-zinc-800">
|
||||||
<ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
|
<ReloadIcon className="h-3.5 w-3.5 text-zinc-500" />
|
||||||
</button>
|
</button>
|
||||||
<div className="inline-flex items-center gap-1 rounded-full border border-zinc-700 bg-zinc-800 px-2.5 py-1">
|
<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="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="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 className="relative inline-flex h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
||||||
|
@ -8,22 +8,34 @@ import { Placeholder } from '@components/note/placeholder';
|
|||||||
import { Repost } from '@components/note/repost';
|
import { Repost } from '@components/note/repost';
|
||||||
import { Single } from '@components/note/single';
|
import { Single } from '@components/note/single';
|
||||||
|
|
||||||
|
import { dateToUnix } from '@utils/getDate';
|
||||||
|
|
||||||
|
import { writeStorage } from '@rehooks/local-storage';
|
||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
|
||||||
import { Virtuoso } from 'react-virtuoso';
|
import { Virtuoso } from 'react-virtuoso';
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
const { db }: any = useContext(DatabaseContext);
|
const { db }: any = useContext(DatabaseContext);
|
||||||
const [data, setData] = useState([]);
|
|
||||||
const [reload, setReload] = useState(false);
|
|
||||||
|
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
const [parentReload, setParentReload] = useState(false);
|
||||||
|
const [hasNewNote, setHasNewNote] = useState(false);
|
||||||
|
|
||||||
|
const now = useRef(new Date());
|
||||||
const limit = useRef(30);
|
const limit = useRef(30);
|
||||||
const offset = useRef(0);
|
const offset = useRef(0);
|
||||||
|
|
||||||
const loadMore = useCallback(async () => {
|
const loadMore = useCallback(async () => {
|
||||||
offset.current += limit.current;
|
offset.current += limit.current;
|
||||||
// next query
|
// next query
|
||||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current} OFFSET ${offset.current}`);
|
const result = await db.select(
|
||||||
|
`SELECT * FROM
|
||||||
|
cache_notes
|
||||||
|
WHERE created_at <= ${dateToUnix(now.current)}
|
||||||
|
ORDER BY created_at DESC
|
||||||
|
LIMIT ${limit.current} OFFSET ${offset.current}`
|
||||||
|
);
|
||||||
setData((data) => [...data, ...result]);
|
setData((data) => [...data, ...result]);
|
||||||
}, [db]);
|
}, [db]);
|
||||||
|
|
||||||
@ -43,12 +55,17 @@ export default function Page() {
|
|||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const getData = async () => {
|
const getData = async () => {
|
||||||
const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
|
const result = await db.select(
|
||||||
setData(result);
|
`SELECT * FROM cache_notes WHERE created_at <= ${dateToUnix(now.current)} ORDER BY created_at DESC LIMIT ${limit.current}`
|
||||||
|
);
|
||||||
|
if (result) {
|
||||||
|
setData(result);
|
||||||
|
writeStorage('settings', new Date());
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
getData().catch(console.error);
|
getData().catch(console.error);
|
||||||
}, [db, reload]);
|
}, [db, parentReload]);
|
||||||
|
|
||||||
const computeItemKey = useCallback(
|
const computeItemKey = useCallback(
|
||||||
(index: string | number) => {
|
(index: string | number) => {
|
||||||
@ -58,8 +75,13 @@ export default function Page() {
|
|||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="h-full w-full">
|
<div className="relative h-full w-full">
|
||||||
<NoteConnector setReload={setReload} />
|
<NoteConnector setParentReload={setParentReload} setHasNewNote={setHasNewNote} currentDate={now.current} />
|
||||||
|
{hasNewNote && (
|
||||||
|
<div className="fixed top-10 left-1/2 z-50 -translate-x-1/2 transform">
|
||||||
|
<button>Load newest</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<Virtuoso
|
<Virtuoso
|
||||||
data={data}
|
data={data}
|
||||||
itemContent={ItemContent}
|
itemContent={ItemContent}
|
||||||
|
Loading…
Reference in New Issue
Block a user