updated following page and note connector

src/components/appHeader/index.tsx

@@ -1,3 +1,5 @@
+import { NoteConnector } from '@components/note/connector';
+
 import { ArrowLeftIcon, ArrowRightIcon } from '@radix-ui/react-icons';
 import { useRouter } from 'next/router';
 
@@ -15,7 +17,7 @@ export default function AppHeader() {
   return (
     <div data-tauri-drag-region className="flex h-full w-full items-center">
       <div className="relative w-[68px] shrink-0">{/* macos traffic lights */}</div>
-      <div className="px-2">
+      <div className="flex w-full flex-1 items-center justify-between px-2">
         <div className="flex h-full gap-2">
           <button onClick={() => goBack()} className="group rounded-md p-1 hover:bg-zinc-900">
             <ArrowLeftIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
@@ -24,6 +26,9 @@ export default function AppHeader() {
             <ArrowRightIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-300" />
           </button>
         </div>
+        <div>
+          <NoteConnector />
+        </div>
       </div>
     </div>
   );

src/components/note/atoms/user.tsx

@@ -1,83 +0,0 @@
-import { DatabaseContext } from '@components/contexts/database';
-import { ImageWithFallback } from '@components/imageWithFallback';
-
-import { truncate } from '@utils/truncate';
-
-import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import Avatar from 'boring-avatars';
-import { memo, useCallback, useContext, useEffect, useState } from 'react';
-import Moment from 'react-moment';
-
-export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
-  const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, name: null, username: null });
-
-  const insertCacheProfile = useCallback(
-    async (event) => {
-      const metadata: any = JSON.parse(event.content);
-
-      await db.execute(
-        `INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`
-      );
-      setProfile(metadata);
-    },
-    [db, pubkey]
-  );
-
-  const getCacheProfile = useCallback(async () => {
-    const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE id = "${pubkey}"`);
-    return result;
-  }, [db, pubkey]);
-
-  useEffect(() => {
-    getCacheProfile()
-      .then((res) => {
-        if (res[0] !== undefined) {
-          setProfile(JSON.parse(res[0].metadata));
-        } else {
-          fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
-            res.json().then((res) => {
-              // update state
-              setProfile(JSON.parse(res.content));
-              // save profile to database
-              insertCacheProfile(res);
-            })
-          );
-        }
-      })
-      .catch(console.error);
-  }, [getCacheProfile, insertCacheProfile, pubkey]);
-
-  return (
-    <div className="relative flex items-start gap-4">
-      <div className="relative h-11 w-11 shrink overflow-hidden rounded-full border border-white/10">
-        {profile.picture ? (
-          <ImageWithFallback src={profile.picture} alt={pubkey} fill={true} className="rounded-full object-cover" />
-        ) : (
-          <Avatar
-            size={44}
-            name={pubkey}
-            variant="beam"
-            colors={['#FEE2E2', '#FEF3C7', '#F59E0B', '#EC4899', '#D946EF', '#8B5CF6']}
-          />
-        )}
-      </div>
-      <div className="flex w-full flex-1 items-start justify-between">
-        <div className="flex w-full justify-between">
-          <div className="flex items-baseline gap-2 text-sm">
-            <span className="font-bold leading-tight">
-              {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
-            </span>
-            <span className="leading-tight text-zinc-500">·</span>
-            <Moment fromNow unix className="text-zinc-500">
-              {time}
-            </Moment>
-          </div>
-          <div>
-            <DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-});

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>
+    </>
   );
 });

src/components/note/content/index.tsx

@@ -14,7 +14,7 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
 export const Content = memo(function Content({ data }: { data: any }) {
   const [preview, setPreview] = useState({});
 
-  const content = useRef(data.content);
+  const content = useRef(JSON.parse(data.content));
   const urls = useMemo(
     () =>
       content.current.match(

src/components/note/placeholder.tsx

@@ -2,7 +2,7 @@ import { memo } from 'react';
 
 export const Placeholder = memo(function Placeholder() {
   return (
-    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
+    <div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-3">
       <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">

src/components/user/mini.tsx

@@ -8,7 +8,7 @@ import { memo, useCallback, useContext, useEffect, useState } from 'react';
 
 export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
   const { db }: any = useContext(DatabaseContext);
-  const [profile, setProfile] = useState({ picture: null, display_name: null });
+  const [profile, setProfile] = useState({ picture: null, name: null });
 
   const insertCacheProfile = useCallback(
     async (event) => {
@@ -67,7 +67,7 @@ export const UserMini = memo(function UserMini({ pubkey }: { pubkey: string }) {
       </div>
       <div className="inline-flex w-full flex-1 flex-col overflow-hidden">
         <p className="truncate leading-tight text-zinc-300">
-          {profile.display_name ? profile.display_name : truncate(pubkey, 16, ' .... ')}
+          {profile.name ? profile.name : truncate(pubkey, 16, ' .... ')}
         </p>
       </div>
     </div>