From 209df5b8ba54433b19915568b4fdb2e07b701de9 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Sun, 12 May 2024 23:51:33 +0530
Subject: [PATCH] chore: replace useEffect fetch logic with useSWR

---
 web/components/pages/editor/editor-body.tsx | 63 +++++----------------
 web/services/page.service.ts                |  1 +
 yarn.lock                                   |  2 +-
 3 files changed, 16 insertions(+), 50 deletions(-)

diff --git a/web/components/pages/editor/editor-body.tsx b/web/components/pages/editor/editor-body.tsx
index 1c775c388..31a8308d8 100644
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
 import { observer } from "mobx-react";
 import { useRouter } from "next/router";
 import { Control, Controller } from "react-hook-form";
+import useSWR from "swr";
 // document editor
 import {
   DocumentEditorWithRef,
@@ -55,8 +56,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     sidePeekVisible,
     updateMarkings,
   } = props;
-  // states
-  const [descriptionYJS, setDescriptionYJS] = useState<Uint8Array | null>(null);
   // router
   const router = useRouter();
   const { workspaceSlug, projectId } = router.query;
@@ -87,12 +86,16 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
 
   useReloadConfirmations(isSubmitting === "submitting");
 
-  // const { data: pageDescriptionYJS } = useSWR(
-  //   workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null,
-  //   workspaceSlug && projectId && pageId
-  //     ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString())
-  //     : null
-  // );
+  const { data: descriptionYJS } = useSWR(
+    workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null,
+    workspaceSlug && projectId && pageId
+      ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString())
+      : null,
+    {
+      refreshInterval: 20000,
+    }
+  );
+  const pageDescriptionYJS = new Uint8Array(descriptionYJS);
 
   const handleDescriptionChange = useCallback(
     (binaryString: string, descriptionHTML: string) => {
@@ -109,49 +112,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     [pageId, projectId, workspaceSlug]
   );
 
-  useEffect(() => {
-    const fetchDescription = async () => {
-      if (!workspaceSlug || !projectId || !pageId) return;
-      console.log("fetching...");
-
-      const response = await fetch(
-        `http://localhost:8000/api/workspaces/${workspaceSlug}/projects/${projectId}/pages/${pageId}/description/`,
-        {
-          credentials: "include",
-          method: "GET",
-          headers: {
-            "Content-Type": "application/octet-stream",
-          },
-        }
-      );
-      const data = await response.arrayBuffer();
-      setDescriptionYJS(new Uint8Array(data));
-      // __AUTO_GENERATED_PRINT_VAR_START__
-      console.log("fetchById data: %s", data); // __AUTO_GENERATED_PRINT_VAR_END__
-      // if (data.byteLength === 0) {
-      //   const yjs = await fetchByIdIfExists(workspaceSlug, projectId, pageId);
-      //   if (yjs) {
-      //     console.log("not found in db:", yjs, yjs instanceof Uint8Array);
-      //     return yjs;
-      //   }
-      // }
-    };
-
-    // Fetch the description immediately
-    fetchDescription();
-
-    // Then fetch the description every 10 seconds
-    const intervalId = setInterval(fetchDescription, 10000);
-
-    // Clear the interval when the component is unmounted
-    return () => clearInterval(intervalId);
-  }, [pageId, projectId, workspaceSlug]);
-
   useEffect(() => {
     updateMarkings(description_html ?? "<p></p>");
   }, [description_html, updateMarkings]);
 
-  if (pageDescription === undefined || pageId === undefined || !descriptionYJS) return <PageContentLoader />;
+  if (pageDescription === undefined || pageId === undefined || !pageDescriptionYJS) return <PageContentLoader />;
 
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
@@ -198,7 +163,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
                     upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
                   }}
                   handleEditorReady={handleEditorReady}
-                  value={descriptionYJS}
+                  value={pageDescriptionYJS}
                   ref={editorRef}
                   containerClassName="p-0 pb-64"
                   editorClassName="lg:px-10 pl-8"
diff --git a/web/services/page.service.ts b/web/services/page.service.ts
index 00a39f9da..aa898e1fa 100644
--- a/web/services/page.service.ts
+++ b/web/services/page.service.ts
@@ -125,6 +125,7 @@ export class PageService extends APIService {
       headers: {
         "Content-Type": "application/octet-stream",
       },
+      responseType: "arraybuffer",
     })
       .then((response) => response?.data)
       .catch((error) => {
diff --git a/yarn.lock b/yarn.lock
index eadb12c30..5eb2c1231 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2762,7 +2762,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@18.2.48", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==