fixed ssr errors

src/pages/newsfeed/following/index.page.client.tsx

@@ -0,0 +1,116 @@
+import FormBase from '@components/form/base';
+import NewsfeedLayout from '@components/layouts/newsfeed';
+import { NoteBase } from '@components/note/base';
+import { Placeholder } from '@components/note/placeholder';
+import { NoteQuoteRepost } from '@components/note/quoteRepost';
+
+import { filteredNotesAtom, hasNewerNoteAtom, notesAtom } from '@stores/note';
+
+import { dateToUnix } from '@utils/getDate';
+import { getLatestNotes, getNotes } from '@utils/storage';
+
+import { ArrowUp } from 'iconoir-react';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
+import { useCallback, useEffect, useRef } from 'react';
+import { Virtuoso } from 'react-virtuoso';
+
+export function Page() {
+  const [hasNewerNote, setHasNewerNote] = useAtom(hasNewerNoteAtom);
+  const setData = useSetAtom(notesAtom);
+  const data = useAtomValue(filteredNotesAtom);
+
+  const virtuosoRef = useRef(null);
+  const now = useRef(new Date());
+  const limit = useRef(20);
+  const offset = useRef(0);
+
+  const itemContent: any = useCallback(
+    (index: string | number) => {
+      switch (data[index].kind) {
+        case 1:
+          return <NoteBase event={data[index]} />;
+        case 6:
+          return <NoteQuoteRepost event={data[index]} />;
+        default:
+          break;
+      }
+    },
+    [data]
+  );
+
+  const computeItemKey = useCallback(
+    (index: string | number) => {
+      return data[index].event_id;
+    },
+    [data]
+  );
+
+  const initialData = useCallback(async () => {
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadMore = useCallback(async () => {
+    offset.current += limit.current;
+    // query next page
+    const result: any = await getNotes(dateToUnix(now.current), limit.current, offset.current);
+    setData((data) => [...data, ...result]);
+  }, [setData]);
+
+  const loadLatest = useCallback(async () => {
+    // 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: -1 });
+  }, [setData, setHasNewerNote]);
+
+  useEffect(() => {
+    let initPage = false;
+
+    if (!initPage) {
+      initialData().catch(console.error);
+    }
+
+    return () => {
+      initPage = true;
+    };
+  }, [initialData]);
+
+  return (
+    <NewsfeedLayout>
+      <div className="relative h-full w-full">
+        {hasNewerNote && (
+          <div className="absolute left-1/2 top-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"
+            >
+              <ArrowUp width={14} height={14} />
+              Load latest
+            </button>
+          </div>
+        )}
+        <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>
+    </NewsfeedLayout>
+  );
+}
+
+const COMPONENTS = {
+  Header: () => <FormBase />,
+  EmptyPlaceholder: () => <Placeholder />,
+  ScrollSeekPlaceholder: () => <Placeholder />,
+};