github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: replace useEffect fetch logic with useSWR

Browse Source
This commit is contained in:
Aaryan Khandelwal 2024-05-12 23:51:33 +05:30
parent 5c87e3510c
commit 209df5b8ba
3 changed files with 16 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/components/pages/editor/editor-body.tsx
View File

@ -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"

1
web/services/page.service.ts
View File

@ -125,6 +125,7 @@ export class PageService extends APIService {
headers: {
"Content-Type": "application/octet-stream",
},
responseType: "arraybuffer",
})
.then((response) => response?.data)
.catch((error) => {

2
yarn.lock
View File

@ -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==