From 66a32ae3cb34524002b3b73335e2e050227f3d3e Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Sat, 16 Jul 2022 15:58:20 +0700
Subject: [PATCH] preloading node comments

---
 .env.local                            |  8 ++++----
 src/hooks/comments/useGetComments.ts  |  9 +++++----
 src/hooks/comments/useNodeComments.ts |  7 +++++--
 src/pages/node/[id].tsx               | 14 +++++++++++---
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/.env.local b/.env.local
index 91636404..9c946691 100644
--- a/.env.local
+++ b/.env.local
@@ -1,6 +1,6 @@
-NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
-NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
+#NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/
+#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/
 #NEXT_PUBLIC_API_HOST=http://localhost:8888/
 #NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/
-#NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
-#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/
+NEXT_PUBLIC_API_HOST=https://pig.vault48.org/
+NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/
diff --git a/src/hooks/comments/useGetComments.ts b/src/hooks/comments/useGetComments.ts
index 1456644b..3c58a0c2 100644
--- a/src/hooks/comments/useGetComments.ts
+++ b/src/hooks/comments/useGetComments.ts
@@ -27,19 +27,20 @@ const extractKey = (key: string) => {
   return parseInt(match[1], 10) || 0;
 };
 
-export const useGetComments = (nodeId: number) => {
-  // TODO: const postedCommentsLength = Math.min(0, data[data.length - 1] - COMMENTS_DISPLAY);
-
+export const useGetComments = (nodeId: number, fallbackData?: IComment[]) => {
   const { data, isValidating, setSize, size, mutate } = useSWRInfinite(
     getKey(nodeId),
     async (key: string) => {
       const result = await apiGetNodeComments({
         id: nodeId,
         take: COMMENTS_DISPLAY,
-        skip: extractKey(key) * COMMENTS_DISPLAY, // TODO: - postedCommentsLength,
+        skip: extractKey(key) * COMMENTS_DISPLAY,
       });
 
       return result.comments;
+    },
+    {
+      fallbackData: fallbackData && [fallbackData],
     }
   );
 
diff --git a/src/hooks/comments/useNodeComments.ts b/src/hooks/comments/useNodeComments.ts
index cc9ec8e3..168311cb 100644
--- a/src/hooks/comments/useNodeComments.ts
+++ b/src/hooks/comments/useNodeComments.ts
@@ -5,8 +5,11 @@ import { useGetComments } from '~/hooks/comments/useGetComments';
 import { IComment } from '~/types';
 import { showErrorToast } from '~/utils/errors/showToast';
 
-export const useNodeComments = (nodeId: number) => {
-  const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(nodeId);
+export const useNodeComments = (nodeId: number, fallbackData?: IComment[]) => {
+  const { comments, isLoading, onLoadMoreComments, hasMore, data, mutate } = useGetComments(
+    nodeId,
+    fallbackData
+  );
 
   const onDelete = useCallback(
     async (id: IComment['id'], isLocked: boolean) => {
diff --git a/src/pages/node/[id].tsx b/src/pages/node/[id].tsx
index 6c3e2675..3ddfab4b 100644
--- a/src/pages/node/[id].tsx
+++ b/src/pages/node/[id].tsx
@@ -4,8 +4,9 @@ import { observer } from 'mobx-react-lite';
 import { GetStaticPropsResult, InferGetStaticPropsType } from 'next';
 import { RouteComponentProps } from 'react-router';
 
-import { apiGetNode, getNodeDiff } from '~/api/node';
+import { apiGetNode, apiGetNodeComments, getNodeDiff } from '~/api/node';
 import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata';
+import { COMMENTS_DISPLAY } from '~/constants/node';
 import { useNodeComments } from '~/hooks/comments/useNodeComments';
 import { useScrollToTop } from '~/hooks/dom/useScrollToTop';
 import { useImageModal } from '~/hooks/navigation/useImageModal';
@@ -14,6 +15,7 @@ import { useNodePageParams } from '~/hooks/node/useNodePageParams';
 import { useNodePermissions } from '~/hooks/node/useNodePermissions';
 import { useNodeTags } from '~/hooks/node/useNodeTags';
 import { NodeLayout } from '~/layouts/NodeLayout';
+import { IComment } from '~/types';
 import { ApiGetNodeResponse } from '~/types/node';
 import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
 import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
@@ -45,7 +47,7 @@ export const getStaticPaths = async () => {
 
 export const getStaticProps = async (
   context
-): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse }>> => {
+): Promise<GetStaticPropsResult<{ fallbackData: ApiGetNodeResponse; comments?: IComment[] }>> => {
   try {
     if (!context.params?.id) {
       return { notFound: true };
@@ -59,12 +61,18 @@ export const getStaticProps = async (
 
     const fallbackData = await apiGetNode({ id });
 
+    const comments = await apiGetNodeComments({
+      id,
+      take: COMMENTS_DISPLAY,
+    });
+
     return {
       props: {
         fallbackData: {
           ...fallbackData,
           last_seen: fallbackData.last_seen ?? null,
         },
+        comments: comments.comments,
       },
       revalidate: 7 * 86400, // every week
     };
@@ -91,7 +99,7 @@ const NodePage: FC<Props> = observer(props => {
     comments,
     hasMore,
     isLoading: isLoadingComments,
-  } = useNodeComments(parseInt(id, 10));
+  } = useNodeComments(parseInt(id, 10), props.comments);
 
   const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
     parseInt(id, 10)