From 0dcba44c4d7e88324b738a521b819786678b4b20 Mon Sep 17 00:00:00 2001
From: Ren Amamiya <123083837+reyamir@users.noreply.github.com>
Date: Wed, 1 Mar 2023 21:51:47 +0700
Subject: [PATCH] updated note connector

---
 src/components/navigatorBar/index.tsx         |  4 --
 .../note.tsx => note/connector.tsx}           | 15 +++++-
 src/pages/feed/following.tsx                  | 53 ++++++++++---------
 3 files changed, 41 insertions(+), 31 deletions(-)
 rename src/components/{connectors/note.tsx => note/connector.tsx} (68%)

diff --git a/src/components/navigatorBar/index.tsx b/src/components/navigatorBar/index.tsx
index 6d9d3d85..8cd04bf7 100644
--- a/src/components/navigatorBar/index.tsx
+++ b/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">
diff --git a/src/components/connectors/note.tsx b/src/components/note/connector.tsx
similarity index 68%
rename from src/components/connectors/note.tsx
rename to src/components/note/connector.tsx
index ebe099a4..df09466f 100644
--- a/src/components/connectors/note.tsx
+++ b/src/components/note/connector.tsx
@@ -47,8 +47,19 @@ export const NoteConnector = memo(function NoteConnector() {
   );
 
   return (
-    <div>
-      <p>Note</p>
+    <div className="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>
+        <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>
   );
 });
diff --git a/src/pages/feed/following.tsx b/src/pages/feed/following.tsx
index a1dd9072..177b4a4e 100644
--- a/src/pages/feed/following.tsx
+++ b/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 } from 'react';
+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]: 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
-      data={data}
-      itemContent={ItemContent}
-      components={{
-        EmptyPlaceholder: () => <Placeholder />,
-        ScrollSeekPlaceholder: () => <Placeholder />,
-      }}
-      computeItemKey={computeItemKey}
-      scrollSeekConfiguration={{
-        enter: (velocity) => Math.abs(velocity) > 800,
-        exit: (velocity) => Math.abs(velocity) < 500,
-      }}
-      endReached={loadMore}
-      overscan={800}
-      increaseViewportBy={1000}
-      className="scrollbar-hide relative h-full w-full rounded-lg"
-      style={{
-        contain: 'strict',
-      }}
-    />
+    <div className="h-full w-full">
+      <NoteConnector />
+      <Virtuoso
+        data={data}
+        itemContent={ItemContent}
+        components={{
+          EmptyPlaceholder: () => <Placeholder />,
+          ScrollSeekPlaceholder: () => <Placeholder />,
+        }}
+        computeItemKey={computeItemKey}
+        scrollSeekConfiguration={{
+          enter: (velocity) => Math.abs(velocity) > 800,
+          exit: (velocity) => Math.abs(velocity) < 500,
+        }}
+        endReached={loadMore}
+        overscan={800}
+        increaseViewportBy={1000}
+        className="scrollbar-hide relative h-full w-full"
+        style={{
+          contain: 'strict',
+        }}
+      />
+    </div>
   );
 }