updated following page and note connector

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',
         }}