From 96c2f6dcb28a50213e231e83396c77145eea04c8 Mon Sep 17 00:00:00 2001 From: Palanikannan M Date: Tue, 17 Dec 2024 14:27:25 +0530 Subject: [PATCH] chore: removing the syncing logic --- .../editors/document/collaborative-editor.tsx | 65 ++++++------------- .../core/hooks/use-collaborative-editor.ts | 12 +--- .../editor/src/core/types/collaboration.ts | 1 - .../components/icons/syncing-component.tsx | 18 ----- .../components/pages/editor/editor-body.tsx | 10 +-- .../pages/editor/header/extra-options.tsx | 4 +- .../pages/editor/header/mobile-root.tsx | 10 +-- .../components/pages/editor/header/root.tsx | 11 +--- .../components/pages/editor/page-root.tsx | 3 - 9 files changed, 28 insertions(+), 106 deletions(-) delete mode 100644 web/core/components/icons/syncing-component.tsx diff --git a/packages/editor/src/core/components/editors/document/collaborative-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-editor.tsx index 5accb9133dc..44c18c2f680 100644 --- 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,25 +44,24 @@ 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, @@ -70,33 +69,9 @@ const CollaborativeDocumentEditor = (props: ICollaborativeDocumentEditor) => { 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 ; - } + if (!hasServerSynced && !hasServerConnectionFailed) return ; return ( { // 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 index 0c0079b00b3..b95f7283eb5 100644 --- 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 deleted file mode 100644 index 1397c9cf23c..00000000000 --- a/web/core/components/icons/syncing-component.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { RefreshCcw } from "lucide-react"; -import { Tooltip } from "@plane/ui"; - -export const SyncingComponent = (props: { toolTipContent?: string }) => { - const { toolTipContent } = props; - const lockedComponent = ( -
- - Syncing -
- ); - - return ( - <> - {toolTipContent ? {lockedComponent} : <>{lockedComponent}} - - ); -}; diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx index 876a3db7f27..adbfd63680d 100644 --- 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>; page: IPage; sidePeekVisible: boolean; - setSyncing: (value: boolean) => void; }; export const PageEditorBody: React.FC = 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 = 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 index 2eb76659fe6..9ecc2998f92 100644 --- 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; handleDuplicatePage: () => void; page: IPage; - syncState: boolean | null; }; export const PageExtraOptions: React.FC = 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 = observer((props) => { return (
{is_locked && } - {syncState && } {archived_at && (
diff --git a/web/core/components/pages/editor/header/mobile-root.tsx b/web/core/components/pages/editor/header/mobile-root.tsx index 0987d17d6fe..df93a70e922 100644 --- 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 = 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 = observer((props) => { setSidePeekVisible={setSidePeekVisible} />
- +
{editorReady && isContentEditable && editorRef.current && } diff --git a/web/core/components/pages/editor/header/root.tsx b/web/core/components/pages/editor/header/root.tsx index 8c88b83f6ee..41933feb725 100644 --- 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 = 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 = observer((props) => { )} {editorReady && isContentEditable && editorRef.current && } - +
= observer((props) => { page={page} sidePeekVisible={sidePeekVisible} setSidePeekVisible={setSidePeekVisible} - syncState={syncState} />
diff --git a/web/core/components/pages/editor/page-root.tsx b/web/core/components/pages/editor/page-root.tsx index 19c0779e9ff..6f4418fe4d1 100644 --- 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(true); const [isVersionsOverlayOpen, setIsVersionsOverlayOpen] = useState(false); // refs const editorRef = useRef(null); @@ -136,7 +135,6 @@ export const PageRoot = observer((props: TPageRootProps) => { page={page} setSidePeekVisible={(state) => setSidePeekVisible(state)} sidePeekVisible={sidePeekVisible} - syncState={syncState} /> { handleEditorReady={setEditorReady} page={page} sidePeekVisible={sidePeekVisible} - setSyncing={setSyncing} /> );