chore: removing the syncing logic

makeplane · Dec 17, 2024 · 96c2f6d · 96c2f6d
1 parent a7ddf3d
commit 96c2f6d
Show file tree

Hide file tree

Showing 9 changed files with 28 additions and 106 deletions.
diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 // components
 import { DocumentContentLoader, PageRenderer } from "@/components/editors";
 // constants
@@ -44,59 +44,34 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => {
   }
 
   // use document editor
-  const { editor, hasServerConnectionFailed, hasServerSynced, localProvider, hasIndexedDbSynced } =
-    useCollaborativeEditor({
-      disabledExtensions,
-      editable,
-      editorClassName,
-      embedHandler,
-      extensions,
-      fileHandler,
-      forwardedRef,
-      handleEditorReady,
-      id,
-      mentionHandler,
-      onTransaction,
-      placeholder,
-      realtimeConfig,
-      serverHandler,
-      tabIndex,
-      user,
-    });
+  const { editor, hasServerConnectionFailed, hasServerSynced } = useCollaborativeEditor({
+    disabledExtensions,
+    editable,
+    editorClassName,
+    embedHandler,
+    extensions,
+    fileHandler,
+    forwardedRef,
+    handleEditorReady,
+    id,
+    mentionHandler,
+    onTransaction,
+    placeholder,
+    realtimeConfig,
+    serverHandler,
+    tabIndex,
+    user,
+  });
 
   const editorContainerClassNames = getEditorClassNames({
     noBorder: true,
     borderOnFocus: false,
     containerClassName,
   });
 
-  const [hasIndexedDbEntry, setHasIndexedDbEntry] = useState(null);
-
-  useEffect(() => {
-    async function documentIndexedDbEntry(dbName: string) {
-      try {
-        const databases = await indexedDB.databases();
-        const hasEntry = databases.some((db) => db.name === dbName);
-        setHasIndexedDbEntry(hasEntry);
-      } catch (error) {
-        console.error("Error checking database existence:", error);
-        return false;
-      }
-    }
-    documentIndexedDbEntry(id);
-  }, [id, localProvider]);
-
   if (!editor) return null;
 
-  if (
-    hasServerConnectionFailed ||
-    (!hasIndexedDbEntry && !hasServerSynced) ||
-    !hasIndexedDbSynced ||
-    !hasIndexedDbEntry
-  ) {
-    console.log("syncing indexedDB");
-    return <DocumentContentLoader />;
-  }
+  if (!hasServerSynced && !hasServerConnectionFailed) return <DocumentContentLoader />;
 
   return (
     <PageRenderer

diff --git a/packages/editor/src/core/hooks/use-collaborative-editor.ts b/packages/editor/src/core/hooks/use-collaborative-editor.ts
@@ -34,7 +34,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
   // states
   const [hasServerConnectionFailed, setHasServerConnectionFailed] = useState(false);
   const [hasServerSynced, setHasServerSynced] = useState(false);
-  const [hasIndexedDbSynced, setHasIndexedDbSynced] = useState(false);
   // initialize Hocuspocus provider
   const provider = useMemo(
     () =>
@@ -55,10 +54,7 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
             setHasServerConnectionFailed(true);
           }
         },
-        onSynced: () => {
-          serverHandler?.onServerSync?.();
-          setHasServerSynced(true);
-        },
+        onSynced: () => setHasServerSynced(true),
       }),
     [id, realtimeConfig, serverHandler, user]
   );
@@ -68,10 +64,6 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     [id, provider]
   );
 
-  localProvider?.on("synced", () => {
-    setHasIndexedDbSynced(true);
-  });
-
   // destroy and disconnect all providers connection on unmount
   useEffect(
     () => () => {
@@ -119,7 +111,5 @@ export const useCollaborativeEditor = (props: TCollaborativeEditorProps) => {
     editor,
     hasServerConnectionFailed,
     hasServerSynced,
-    hasIndexedDbSynced,
-    localProvider,
   };
 };
diff --git a/packages/editor/src/core/types/collaboration.ts b/packages/editor/src/core/types/collaboration.ts
@@ -17,7 +17,6 @@ import {
 export type TServerHandler = {
   onConnect?: () => void;
   onServerError?: () => void;
-  onServerSync?: () => void;
 };
 
 type TCollaborativeEditorHookProps = {

diff --git a/web/core/components/icons/syncing-component.tsx b/web/core/components/icons/syncing-component.tsx
diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
@@ -44,11 +44,10 @@ type Props = {
   handleEditorReady: Dispatch<SetStateAction<boolean>>;
   page: IPage;
   sidePeekVisible: boolean;
-  setSyncing: (value: boolean) => void;
 };
 
 export const PageEditorBody: React.FC<Props> = observer((props) => {
-  const { editorRef, handleConnectionStatus, handleEditorReady, page, sidePeekVisible, setSyncing } = props;
+  const { editorRef, handleConnectionStatus, handleEditorReady, page, sidePeekVisible } = props;
   // router
   const { workspaceSlug, projectId } = useParams();
   // store hooks
@@ -107,17 +106,12 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     handleConnectionStatus(true);
   }, [handleConnectionStatus]);
 
-  const handleServerSynced = useCallback(() => {
-    setSyncing(false);
-  }, [setSyncing]);
-
   const serverHandler: TServerHandler = useMemo(
     () => ({
       onConnect: handleServerConnect,
       onServerError: handleServerError,
-      onServerSync: handleServerSynced,
     }),
-    [handleServerConnect, handleServerError, handleServerSynced]
+    [handleServerConnect, handleServerError]
   );
 
   const realtimeConfig: TRealtimeConfig | undefined = useMemo(() => {

diff --git a/web/core/components/pages/editor/header/extra-options.tsx b/web/core/components/pages/editor/header/extra-options.tsx
@@ -20,11 +20,10 @@ type Props = {
   editorRef: React.RefObject<EditorRefApi>;
   handleDuplicatePage: () => void;
   page: IPage;
-  syncState: boolean | null;
 };
 
 export const PageExtraOptions: React.FC<Props> = observer((props) => {
-  const { editorRef, syncState, handleDuplicatePage, page } = props;
+  const { editorRef, handleDuplicatePage, page } = props;
   // derived values
   const {
     archived_at,
@@ -61,7 +60,6 @@ export const PageExtraOptions: React.FC<Props> = observer((props) => {
   return (
     <div className="flex items-center justify-end gap-3">
       {is_locked && <LockedComponent />}
-      {syncState && <SyncingComponent />}
       {archived_at && (
         <div className="flex-shrink-0 flex h-7 items-center gap-2 rounded-full bg-blue-500/20 px-3 py-0.5 text-xs font-medium text-blue-500">
           <ArchiveIcon className="flex-shrink-0 size-3" />

diff --git a/web/core/components/pages/editor/header/mobile-root.tsx b/web/core/components/pages/editor/header/mobile-root.tsx
@@ -15,11 +15,10 @@ type Props = {
   page: IPage;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
-  syncState: boolean;
 };
 
 export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
-  const { editorReady, editorRef, handleDuplicatePage, page, setSidePeekVisible, sidePeekVisible, syncState } = props;
+  const { editorReady, editorRef, handleDuplicatePage, page, setSidePeekVisible, sidePeekVisible } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
@@ -38,12 +37,7 @@ export const PageEditorMobileHeaderRoot: React.FC<Props> = observer((props) => {
             setSidePeekVisible={setSidePeekVisible}
           />
         </div>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          syncState={syncState}
-        />
+        <PageExtraOptions editorRef={editorRef} handleDuplicatePage={handleDuplicatePage} page={page} />
       </Header>
       <Header variant={EHeaderVariant.TERNARY}>
         {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}

diff --git a/web/core/components/pages/editor/header/root.tsx b/web/core/components/pages/editor/header/root.tsx
@@ -17,11 +17,10 @@ type Props = {
   page: IPage;
   setSidePeekVisible: (sidePeekState: boolean) => void;
   sidePeekVisible: boolean;
-  syncState: boolean;
 };
 
 export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
-  const { editorReady, editorRef, setSidePeekVisible, sidePeekVisible, handleDuplicatePage, page, syncState } = props;
+  const { editorReady, editorRef, setSidePeekVisible, sidePeekVisible, handleDuplicatePage, page } = props;
   // derived values
   const { isContentEditable } = page;
   // page filters
@@ -50,12 +49,7 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           )}
           {editorReady && isContentEditable && editorRef.current && <PageToolbar editorRef={editorRef?.current} />}
         </Header.LeftItem>
-        <PageExtraOptions
-          editorRef={editorRef}
-          handleDuplicatePage={handleDuplicatePage}
-          page={page}
-          syncState={syncState}
-        />
+        <PageExtraOptions editorRef={editorRef} handleDuplicatePage={handleDuplicatePage} page={page} />
       </Header>
       <div className="md:hidden">
         <PageEditorMobileHeaderRoot
@@ -65,7 +59,6 @@ export const PageEditorHeaderRoot: React.FC<Props> = observer((props) => {
           page={page}
           sidePeekVisible={sidePeekVisible}
           setSidePeekVisible={setSidePeekVisible}
-          syncState={syncState}
         />
       </div>
     </>

diff --git a/web/core/components/pages/editor/page-root.tsx b/web/core/components/pages/editor/page-root.tsx
@@ -33,7 +33,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
   const [editorReady, setEditorReady] = useState(false);
   const [hasConnectionFailed, setHasConnectionFailed] = useState(false);
   const [sidePeekVisible, setSidePeekVisible] = useState(window.innerWidth >= 768);
-  const [syncState, setSyncing] = useState<boolean>(true);
   const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false);
   // refs
   const editorRef = useRef<EditorRefApi>(null);
@@ -136,7 +135,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
         page={page}
         setSidePeekVisible={(state) => setSidePeekVisible(state)}
         sidePeekVisible={sidePeekVisible}
-        syncState={syncState}
       />
       <PageEditorBody
         editorReady={editorReady}
@@ -145,7 +143,6 @@ export const PageRoot = observer((props: TPageRootProps) => {
         handleEditorReady={setEditorReady}
         page={page}
         sidePeekVisible={sidePeekVisible}
-        setSyncing={setSyncing}
       />
     </>
   );