refactor newsfeed to use react-virtuoso

src/components/note/base.tsx

@@ -80,7 +80,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
   return (
     <div
       onClick={(e) => openThread(e)}
-      className="relative z-10 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
+      className="relative z-10 m-0 flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-5 px-3 hover:bg-black/20"
     >
       <>{getParent}</>
       <div className="relative z-10 flex flex-col">

src/pages/newsfeed/following.tsx

@@ -5,48 +5,109 @@ import FormBase from '@components/form/base';
 import { NoteBase } from '@components/note/base';
 import { Placeholder } from '@components/note/placeholder';
 
-import { notesAtom } from '@stores/note';
+import { hasNewerNoteAtom } from '@stores/note';
 
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { dateToUnix } from '@utils/getDate';
+import { getLatestNotes, getNotes } from '@utils/storage';
+
+import { ArrowUpIcon } from '@radix-ui/react-icons';
 import { useAtom } from 'jotai';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, Suspense, useRef } from 'react';
+import {
+  JSXElementConstructor,
+  ReactElement,
+  ReactFragment,
+  ReactPortal,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { Virtuoso } from 'react-virtuoso';
 
 export default function Page() {
-  const [data]: any = useAtom(notesAtom);
-  const parentRef = useRef(null);
+  const [data, setData] = useState([]);
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
 
-  const virtualizer = useVirtualizer({
-    count: data.length,
-    estimateSize: () => 500,
-    getScrollElement: () => parentRef.current,
-    getItemKey: (index) => data[index].id,
-  });
-  const items = virtualizer.getVirtualItems();
+  const virtuosoRef = useRef(null);
+  const now = useRef(new Date());
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      return <NoteBase event={data[index]} />;
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].id;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, []);
+
+  const loadMore = useCallback(async () => {
+    offset.current += limit.current;
+    // next query
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, []);
+
+  const loadLatest = useCallback(async () => {
+    offset.current += limit.current;
+    // next query
+    const result: any = await getLatestNotes(dateToUnix(now.current));
+    // update data
+    setData((data) => [...result, ...data]);
+    // hide newer trigger
+    setHasNewerNote(false);
+    // scroll to top
+    virtuosoRef.current.scrollToIndex({ index: 0 });
+  }, [setHasNewerNote]);
+
+  useEffect(() => {
+    initialData().catch(console.error);
+  }, [initialData]);
 
   return (
-    <div ref={parentRef} className="scrollbar-hide h-full w-full overflow-y-auto" style={{ contain: 'strict' }}>
-      <div className="relative">
-        <FormBase />
-      </div>
-      <Suspense fallback={<Placeholder />}>
-        <div>
-          {items.length > 0 && (
-            <div className="relative w-full" style={{ height: virtualizer.getTotalSize() }}>
-              <div className="absolute top-0 left-0 w-full" style={{ transform: `translateY(${items[0].start}px)` }}>
-                {items.map((virtualRow) => (
-                  <div key={virtualRow.key} data-index={virtualRow.index} ref={virtualizer.measureElement}>
-                    <NoteBase event={data[virtualRow.index]} />
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
+    <div className="relative h-full w-full">
+      {hasNewerNote && (
+        <div className="absolute top-2 left-1/2 z-50 -translate-x-1/2 transform">
+          <button
+            onClick={() => loadLatest()}
+            className="inline-flex h-8 transform items-center justify-center gap-1 rounded-full bg-fuchsia-500 pl-3 pr-3.5 text-sm shadow-md shadow-fuchsia-800/20 active:translate-y-1"
+          >
+            <ArrowUpIcon className="h-3.5 w-3.5" />
+            Load latest
+          </button>
         </div>
-      </Suspense>
+      )}
+      <Virtuoso
+        ref={virtuosoRef}
+        data={data}
+        itemContent={itemContent}
+        computeItemKey={computeItemKey}
+        components={COMPONENTS}
+        overscan={200}
+        endReached={loadMore}
+        className="scrollbar-hide h-full w-full overflow-y-auto"
+      />
     </div>
   );
 }
 
+const COMPONENTS = {
+  Header: () => <FormBase />,
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};
+
 Page.getLayout = function getLayout(
   page:
     | string

src/stores/note.tsx

@@ -1,24 +1,7 @@
-import { isSSR } from '@utils/ssr';
-import { getAllNotes } from '@utils/storage';
-
 import { atom } from 'jotai';
-import { atomsWithQuery } from 'jotai-tanstack-query';
 import { atomWithReset } from 'jotai/utils';
 
 // note content
 export const noteContentAtom = atomWithReset('');
 // notify user that connector has receive newer note
 export const hasNewerNoteAtom = atom(false);
-// query notes from database
-export const [notesAtom] = atomsWithQuery(() => ({
-  queryKey: ['notes'],
-  queryFn: async ({ queryKey: [] }) => {
-    const res = isSSR ? [] : await getAllNotes();
-    return res;
-  },
-  refetchInterval: 1000000,
-  refetchOnReconnect: true,
-  refetchOnWindowFocus: true,
-  refetchOnMount: true,
-  keepPreviousData: false,
-}));

src/utils/storage.tsx

@@ -89,9 +89,19 @@ export async function getCacheProfile(id) {
 }
 
 // get all notes
-export async function getAllNotes() {
+export async function getNotes(time, limit, offset) {
   const db = await connect();
-  return await db.select(`SELECT * FROM cache_notes GROUP BY parent_id ORDER BY created_at DESC LIMIT 500`);
+  return await db.select(
+    `SELECT * FROM cache_notes WHERE created_at <= "${time}" GROUP BY parent_id ORDER BY created_at DESC LIMIT "${limit}" OFFSET "${offset}"`
+  );
+}
+
+// get all latest notes
+export async function getLatestNotes(time) {
+  const db = await connect();
+  return await db.select(
+    `SELECT * FROM cache_notes WHERE created_at > "${time}" GROUP BY parent_id ORDER BY created_at DESC`
+  );
 }
 
 // get note by id