updated note connector

src/components/navigatorBar/index.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import ActiveLink from '@components/activeLink';
-import { NoteConnector } from '@components/connectors/note';
 import CreatePost from '@components/navigatorBar/createPost';
 import { ProfileMenu } from '@components/navigatorBar/profileMenu';
 
@@ -15,9 +14,6 @@ export default function NavigatorBar() {
     <div className="flex h-full flex-col flex-wrap justify-between overflow-hidden px-2 pt-3 pb-4">
       {/* main */}
       <div className="flex flex-col gap-4">
-        <div>
-          <NoteConnector />
-        </div>
         {/* Create post */}
         <div className="flex flex-col rounded-lg bg-zinc-900 ring-1 ring-white/10">
           <div className="flex flex-col p-2">

src/components/note/connector.tsx

@@ -47,8 +47,19 @@ export const NoteConnector = memo(function NoteConnector() {
   );
 
   return (
-    <div>
+    <div className="flex h-12 items-center justify-between border-b border-zinc-800 px-6 shadow-input">
-      <p>Note</p>
+      <div>
+        <h3 className="text-sm font-semibold text-zinc-500"># following</h3>
+      </div>
+      <div>
+        <div className="inline-flex items-center gap-2">
+          <span className="relative flex h-3 w-3">
+            <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-3 w-3 rounded-full bg-green-500"></span>
+          </span>
+          <p className="text-sm font-medium text-zinc-500">Online</p>
+        </div>
+      </div>
     </div>
   );
 });

src/pages/feed/following.tsx

@@ -3,18 +3,18 @@ import BaseLayout from '@layouts/baseLayout';
 import NewsFeedLayout from '@layouts/newsfeedLayout';
 
 import { DatabaseContext } from '@components/contexts/database';
+import { NoteConnector } from '@components/note/connector';
 import { Placeholder } from '@components/note/placeholder';
 import { Repost } from '@components/note/repost';
 import { Single } from '@components/note/single';
 
-import { useLocalStorage, writeStorage } from '@rehooks/local-storage';
+import { useCallback, useState } from 'react';
-import { useCallback } 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]: any = useLocalStorage('notes');
+  const [data, setData] = useState([]);
 
   const limit = useRef(30);
   const offset = useRef(0);
@@ -22,7 +22,7 @@ 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}`);
-      writeStorage('notes', result);
+      setData(result);
     };
 
     getData().catch(console.error);
@@ -32,7 +32,7 @@ export default function Page() {
     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}`);
-    writeStorage('notes', (data) => [...data, ...result]);
+    setData((data) => [...data, ...result]);
   }, [db]);
 
   const ItemContent = useCallback(
@@ -57,26 +57,29 @@ export default function Page() {
   );
 
   return (
-    <Virtuoso
+    <div className="h-full w-full">
-      data={data}
+      <NoteConnector />
-      itemContent={ItemContent}
+      <Virtuoso
-      components={{
+        data={data}
-        EmptyPlaceholder: () => <Placeholder />,
+        itemContent={ItemContent}
-        ScrollSeekPlaceholder: () => <Placeholder />,
+        components={{
-      }}
+          EmptyPlaceholder: () => <Placeholder />,
-      computeItemKey={computeItemKey}
+          ScrollSeekPlaceholder: () => <Placeholder />,
-      scrollSeekConfiguration={{
+        }}
-        enter: (velocity) => Math.abs(velocity) > 800,
+        computeItemKey={computeItemKey}
-        exit: (velocity) => Math.abs(velocity) < 500,
+        scrollSeekConfiguration={{
-      }}
+          enter: (velocity) => Math.abs(velocity) > 800,
-      endReached={loadMore}
+          exit: (velocity) => Math.abs(velocity) < 500,
-      overscan={800}
+        }}
-      increaseViewportBy={1000}
+        endReached={loadMore}
-      className="scrollbar-hide relative h-full w-full rounded-lg"
+        overscan={800}
-      style={{
+        increaseViewportBy={1000}
-        contain: 'strict',
+        className="scrollbar-hide relative h-full w-full"
-      }}
+        style={{
-    />
+          contain: 'strict',
+        }}
+      />
+    </div>
   );
 }