updated following page and note connector

src/components/note/connector.tsx

@@ -1,40 +1,28 @@
 import { DatabaseContext } from '@components/contexts/database';
 import { RelayContext } from '@components/contexts/relay';
 
+import { atomHasNewerNote } from '@stores/note';
+
 import { dateToUnix, hoursAgo } from '@utils/getDate';
 
-import { ReloadIcon } from '@radix-ui/react-icons';
+import { SliderIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
-import { memo, useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { memo, useCallback, useContext, useEffect, useRef } from 'react';
 
-export const NoteConnector = memo(function NoteConnector({
-  setParentReload,
-  setHasNewNote,
-  currentDate,
-}: {
-  setParentReload: any;
-  setHasNewNote: any;
-  currentDate: any;
-}) {
+export const NoteConnector = memo(function NoteConnector() {
   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 setHasNewerNote = useSetAtom(atomHasNewerNote);
+  const now = useRef(new Date());
 
   const insertDB = useCallback(
     async (event: any) => {
+      // insert to local database
       await db.execute(
         `INSERT OR IGNORE INTO
           cache_notes
@@ -45,7 +33,7 @@ export const NoteConnector = memo(function NoteConnector({
               "${event.created_at}",
               "${event.kind}",
               '${JSON.stringify(event.tags)}',
-              "${event.content}"
+              '${JSON.stringify(event.content)}'
             );`
       );
     },
@@ -58,54 +46,34 @@ export const NoteConnector = memo(function NoteConnector({
         {
           kinds: [1],
           authors: follows,
-          since: dateToUnix(hoursAgo(12, currentDate)),
+          since: dateToUnix(hoursAgo(12, now.current)),
         },
       ],
       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);
+        // ask user load newer note
+        if (event.created_at > dateToUnix(now.current)) {
+          setHasNewerNote(true);
+        }
       }
     );
-  }, [relayPool, follows, currentDate, relays, insertDB, setHasNewNote]);
+  }, [relayPool, follows, relays, insertDB, setHasNewerNote]);
 
   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 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="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">Relays</p>
       </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>
+    </>
   );
 });