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>

src/pages/index.tsx

@@ -16,7 +16,7 @@ export default function Page() {
     if (currentUser) {
       timer.current = setTimeout(() => {
         setLoading(false);
-        router.push('/newsfeed/circle');
+        router.push('/newsfeed/following');
       }, 1000);
     } else {
       timer.current = setTimeout(() => {

src/pages/newsfeed/following.tsx

@@ -2,16 +2,16 @@ import BaseLayout from '@layouts/base';
 import WithSidebarLayout from '@layouts/withSidebar';
 
 import { DatabaseContext } from '@components/contexts/database';
-import { NoteConnector } from '@components/note/connector';
 import NoteForm from '@components/note/form';
 import { Placeholder } from '@components/note/placeholder';
 import { Repost } from '@components/note/repost';
 import { Single } from '@components/note/single';
 
+import { atomHasNewerNote } from '@stores/note';
+
 import { dateToUnix } from '@utils/getDate';
 
-import { ArrowUpIcon } from '@radix-ui/react-icons';
-import { writeStorage } from '@rehooks/local-storage';
+import { useAtomValue } from 'jotai';
 import { useCallback, useState } from 'react';
 import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
@@ -20,8 +20,8 @@ export default function Page() {
   const { db }: any = useContext(DatabaseContext);
 
   const [data, setData] = useState([]);
-  const [parentReload, setParentReload] = useState(false);
-  const [hasNewNote, setHasNewNote] = useState(false);
+  const [reload, setReload] = useState(false);
+  const hasNewerNote = useAtomValue(atomHasNewerNote);
 
   const now = useRef(new Date());
   const limit = useRef(30);
@@ -49,7 +49,6 @@ export default function Page() {
         LIMIT ${limit.current}`
     );
     setData((data) => [...result, ...data]);
-    setHasNewNote(false);
   }, [db]);
 
   const ItemContent = useCallback(
@@ -66,22 +65,6 @@ export default function Page() {
     [data]
   );
 
-  useEffect(() => {
-    const getData = async () => {
-      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, parentReload]);
-
   const computeItemKey = useCallback(
     (index: string | number) => {
       return data[index].id;
@@ -89,16 +72,40 @@ export default function Page() {
     [data]
   );
 
+  useEffect(() => {
+    const getData = async () => {
+      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.length > 0) {
+        setData(result);
+      } else {
+        setReload(true);
+      }
+    };
+
+    if (reload === false) {
+      getData().catch(console.error);
+    } else {
+      const timer = setTimeout(() => {
+        getData().catch(console.error);
+      }, 8000);
+
+      return () => clearTimeout(timer);
+    }
+  }, [db, reload]);
+
   return (
     <div className="relative h-full w-full">
-      {hasNewNote && (
+      {hasNewerNote && (
         <div className="absolute top-16 left-1/2 z-50 -translate-x-1/2 transform">
           <button
             onClick={() => loadNewest()}
-            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-[radial-gradient(ellipse_at_bottom_right,_var(--tw-gradient-stops))] from-gray-300 via-fuchsia-600 to-orange-600 pl-3 pr-3.5 text-sm shadow-lg active:translate-y-1"
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 px-3 text-sm shadow-lg active:translate-y-1"
           >
-            <ArrowUpIcon className="h-4 w-4" />
-            <span className="drop-shadow-md">Load newest</span>
+            <span className="text-white drop-shadow">Load newest</span>
           </button>
         </div>
       )}
@@ -118,7 +125,7 @@ export default function Page() {
         endReached={loadMore}
         overscan={800}
         increaseViewportBy={1000}
-        className="relative h-full w-full"
+        className="scrollbar-hide relative h-full w-full"
         style={{
           contain: 'strict',
         }}

src/stores/note.tsx

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const atomHasNewerNote = atom(false);