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 { observer } from "mobx-react";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { Control, Controller } from "react-hook-form"; import { Control, Controller } from "react-hook-form";
import useSWR from "swr";
// document editor // document editor
import { import {
DocumentEditorWithRef, DocumentEditorWithRef,
@ -55,8 +56,6 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
sidePeekVisible, sidePeekVisible,
updateMarkings, updateMarkings,
} = props; } = props;
// states
const [descriptionYJS, setDescriptionYJS] = useState<Uint8Array | null>(null);
// router // router
const router = useRouter(); const router = useRouter();
const { workspaceSlug, projectId } = router.query; const { workspaceSlug, projectId } = router.query;
@ -87,12 +86,16 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
useReloadConfirmations(isSubmitting === "submitting"); useReloadConfirmations(isSubmitting === "submitting");
// const { data: pageDescriptionYJS } = useSWR( const { data: descriptionYJS } = useSWR(
// workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null, workspaceSlug && projectId && pageId ? `PAGE_DESCRIPTION_${workspaceSlug}_${projectId}_${pageId}` : null,
// workspaceSlug && projectId && pageId workspaceSlug && projectId && pageId
// ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString()) ? () => pageService.fetchDescriptionYJS(workspaceSlug.toString(), projectId.toString(), pageId.toString())
// : null : null,
// ); {
refreshInterval: 20000,
}
);
const pageDescriptionYJS = new Uint8Array(descriptionYJS);
const handleDescriptionChange = useCallback( const handleDescriptionChange = useCallback(
(binaryString: string, descriptionHTML: string) => { (binaryString: string, descriptionHTML: string) => {
@ -109,49 +112,11 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
[pageId, projectId, workspaceSlug] [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(() => { useEffect(() => {
updateMarkings(description_html ?? "<p></p>"); updateMarkings(description_html ?? "<p></p>");
}, [description_html, updateMarkings]); }, [description_html, updateMarkings]);
if (pageDescription === undefined || pageId === undefined || !descriptionYJS) return <PageContentLoader />; if (pageDescription === undefined || pageId === undefined || !pageDescriptionYJS) return <PageContentLoader />;
return ( return (
<div className="flex items-center h-full w-full overflow-y-auto"> <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), upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
}} }}
handleEditorReady={handleEditorReady} handleEditorReady={handleEditorReady}
value={descriptionYJS} value={pageDescriptionYJS}
ref={editorRef} ref={editorRef}
containerClassName="p-0 pb-64" containerClassName="p-0 pb-64"
editorClassName="lg:px-10 pl-8" editorClassName="lg:px-10 pl-8"

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

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

2
yarn.lock
View File

@ -2762,7 +2762,7 @@
dependencies: dependencies:
"@types/react" "*" "@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" version "18.2.48"
resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w== integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==