optimized note connector

src/components/note/connector.tsx

@@ -6,14 +6,20 @@ import { dateToUnix, hoursAgo } from '@utils/getDate';
 
 import { ReloadIcon } from '@radix-ui/react-icons';
 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 relayPool: any = useContext(RelayContext);
 
-  const now = useRef(new Date());
-
   const [follows]: any = useLocalStorage('follows');
   const [relays]: any = useLocalStorage('relays');
 
@@ -29,34 +35,46 @@ export const NoteConnector = memo(function NoteConnector({ setReload }: { setRel
     [db]
   );
 
-  relayPool.subscribe(
-    [
-      {
-        kinds: [1],
-        authors: follows,
-        since: dateToUnix(hoursAgo(12, now.current)),
+  const fetchEvent = useCallback(() => {
+    relayPool.subscribe(
+      [
+        {
+          kinds: [1],
+          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);
+        }
       },
-    ],
-    relays,
-    (event: any) => {
-      insertDB(event).catch(console.error);
-    },
-    undefined,
-    (events: any, relayURL: any) => {
-      console.log(events, relayURL);
-    }
-  );
+      undefined,
+      (events: any, relayURL: any) => {
+        console.log(events, relayURL);
+      }
+    );
+  }, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
+
+  useEffect(() => {
+    fetchEvent();
+  }, [fetchEvent]);
 
   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>
         <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
       </div>
       <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" />
         </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>

src/pages/feed/following.tsx

@@ -8,22 +8,34 @@ import { Placeholder } from '@components/note/placeholder';
 import { Repost } from '@components/note/repost';
 import { Single } from '@components/note/single';
 
+import { dateToUnix } from '@utils/getDate';
+
+import { writeStorage } from '@rehooks/local-storage';
 import { useCallback, useState } from 'react';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
 export default function Page() {
   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 offset = useRef(0);
 
   const loadMore = useCallback(async () => {
     offset.current += limit.current;
     // 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]);
   }, [db]);
 
@@ -43,12 +55,17 @@ export default function Page() {
 
   useEffect(() => {
     const getData = async () => {
-      const result = await db.select(`SELECT * FROM cache_notes ORDER BY created_at DESC LIMIT ${limit.current}`);
-      setData(result);
+      const result = await db.select(
+        `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);
-  }, [db, reload]);
+  }, [db, parentReload]);
 
   const computeItemKey = useCallback(
     (index: string | number) => {
@@ -58,8 +75,13 @@ export default function Page() {
   );
 
   return (
-    <div className="h-full w-full">
-      <NoteConnector setReload={setReload} />
+    <div className="relative h-full w-full">
+      <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
         data={data}
         itemContent={ItemContent}