refactor: new provider (#4900)

packages/frontend/core/src/pages/share/detail-page.tsx

@@ -1,9 +1,9 @@
 import { MainContainer } from '@affine/component/workspace';
 import { DebugLogger } from '@affine/debug';
 import { WorkspaceFlavour } from '@affine/env/workspace';
+import type { CloudDoc } from '@affine/workspace/affine/download';
+import { downloadBinaryFromCloud } from '@affine/workspace/affine/download';
 import { getOrCreateWorkspace } from '@affine/workspace/manager';
-import { downloadBinaryFromCloud } from '@affine/workspace/providers';
-import type { CloudDoc } from '@affine/workspace/providers/cloud';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { noop } from 'foxact/noop';
@@ -30,7 +30,7 @@ type LoaderData = {
 };
 
 function assertDownloadResponse(
-  value: CloudDoc | boolean
+  value: CloudDoc | null
 ): asserts value is CloudDoc {
   if (
     !value ||

packages/frontend/core/src/pages/workspace/detail-page.tsx

@@ -5,20 +5,18 @@ import {
 } from '@affine/component/page-list';
 import { WorkspaceSubPath } from '@affine/env/workspace';
 import { globalBlockSuiteSchema } from '@affine/workspace/manager';
+import { SyncEngineStatus } from '@affine/workspace/providers';
 import type { EditorContainer } from '@blocksuite/editor';
 import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import {
   contentLayoutAtom,
   currentPageIdAtom,
-  currentWorkspaceAtom,
   currentWorkspaceIdAtom,
-  getCurrentStore,
 } from '@toeverything/infra/atom';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { type ReactElement, useCallback } from 'react';
-import type { LoaderFunction } from 'react-router-dom';
-import { redirect } from 'react-router-dom';
+import { type ReactElement, useCallback, useEffect, useState } from 'react';
+import { type LoaderFunction, useParams } from 'react-router-dom';
 import type { Map as YMap } from 'yjs';
 
 import { getUIAdapter } from '../../adapters/workspace';
@@ -27,6 +25,7 @@ import { collectionsCRUDAtom } from '../../atoms/collections';
 import { currentModeAtom } from '../../atoms/mode';
 import { WorkspaceHeader } from '../../components/workspace-header';
 import { useRegisterBlocksuiteEditorCommands } from '../../hooks/affine/use-register-blocksuite-editor-commands';
+import { useCurrentSyncEngineStatus } from '../../hooks/current/use-current-sync-engine';
 import { useCurrentWorkspace } from '../../hooks/current/use-current-workspace';
 import { useNavigateHelper } from '../../hooks/use-navigate-helper';
 import { performanceRenderLogger } from '../../shared';
@@ -107,46 +106,113 @@ const DetailPageImpl = (): ReactElement => {
 
 export const DetailPage = (): ReactElement => {
   const [currentWorkspace] = useCurrentWorkspace();
+  const currentSyncEngineStatus = useCurrentSyncEngineStatus();
   const currentPageId = useAtomValue(currentPageIdAtom);
-  const page = currentPageId
-    ? currentWorkspace.blockSuiteWorkspace.getPage(currentPageId)
-    : null;
+  const [page, setPage] = useState<Page | null>(null);
+  const [pageLoaded, setPageLoaded] = useState<boolean>(false);
 
-  if (!currentPageId || !page) {
+  // load page by current page id
+  useEffect(() => {
+    if (!currentPageId) {
+      setPage(null);
+      return;
+    }
+
+    const exists = currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+
+    if (exists) {
+      setPage(exists);
+      return;
+    }
+
+    const dispose = currentWorkspace.blockSuiteWorkspace.slots.pagesUpdated.on(
+      () => {
+        const exists =
+          currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
+
+        if (exists) {
+          setPage(exists);
+        }
+      }
+    );
+
+    return dispose.dispose;
+  }, [currentPageId, currentWorkspace]);
+
+  const navigate = useNavigateHelper();
+
+  // if sync engine has been synced and the page is null, wait 1s and jump to 404 page.
+  useEffect(() => {
+    if (currentSyncEngineStatus === SyncEngineStatus.Synced && !page) {
+      const timeout = setTimeout(() => {
+        navigate.jumpTo404();
+      }, 1000);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return;
+  }, [currentSyncEngineStatus, navigate, page]);
+
+  // wait for page to be loaded
+  useEffect(() => {
+    if (page) {
+      if (!page.loaded) {
+        setPageLoaded(true);
+      } else {
+        setPageLoaded(false);
+        // call waitForLoaded to trigger load
+        page
+          .load(() => {})
+          .catch(() => {
+            // do nothing
+          });
+        return page.slots.ready.on(() => {
+          setPageLoaded(true);
+        }).dispose;
+      }
+    } else {
+      setPageLoaded(false);
+    }
+    return;
+  }, [page]);
+
+  if (!currentPageId || !page || !pageLoaded) {
     return <PageDetailSkeleton key="current-page-is-null" />;
   }
+
+  if (page.meta.jumpOnce) {
+    currentWorkspace.blockSuiteWorkspace.setPageMeta(page.id, {
+      jumpOnce: false,
+    });
+  }
+
   return <DetailPageImpl />;
 };
 
-export const loader: LoaderFunction = async args => {
-  const rootStore = getCurrentStore();
-  rootStore.set(contentLayoutAtom, 'editor');
-  if (args.params.workspaceId) {
-    localStorage.setItem('last_workspace_id', args.params.workspaceId);
-    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
-  }
-  const currentWorkspace = await rootStore.get(currentWorkspaceAtom);
-  if (args.params.pageId) {
-    const pageId = args.params.pageId;
-    localStorage.setItem('last_page_id', pageId);
-    const page = currentWorkspace.getPage(pageId);
-    if (!page) {
-      return redirect('/404');
-    }
-    if (page.meta.jumpOnce) {
-      currentWorkspace.setPageMeta(page.id, {
-        jumpOnce: false,
-      });
-    }
-    rootStore.set(currentPageIdAtom, pageId);
-  } else {
-    return redirect('/404');
-  }
+export const loader: LoaderFunction = async () => {
   return null;
 };
 
 export const Component = () => {
   performanceRenderLogger.info('DetailPage');
 
+  const setContentLayout = useSetAtom(contentLayoutAtom);
+  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
+  const setCurrentPageId = useSetAtom(currentPageIdAtom);
+  const params = useParams();
+
+  useEffect(() => {
+    setContentLayout('editor');
+    if (params.workspaceId) {
+      localStorage.setItem('last_workspace_id', params.workspaceId);
+      setCurrentWorkspaceId(params.workspaceId);
+    }
+    if (params.pageId) {
+      localStorage.setItem('last_page_id', params.pageId);
+      setCurrentPageId(params.pageId);
+    }
+  }, [params, setContentLayout, setCurrentPageId, setCurrentWorkspaceId]);
+
   return <DetailPage />;
 };

packages/frontend/core/src/pages/workspace/index.tsx

@@ -7,12 +7,14 @@ import {
   getCurrentStore,
 } from '@toeverything/infra/atom';
 import { guidCompatibilityFix } from '@toeverything/infra/blocksuite';
-import type { ReactElement } from 'react';
+import { useSetAtom } from 'jotai';
+import { type ReactElement, useEffect } from 'react';
 import {
   type LoaderFunction,
   Outlet,
   redirect,
   useLoaderData,
+  useParams,
 } from 'react-router-dom';
 
 import { WorkspaceLayout } from '../../layouts/workspace-layout';
@@ -24,6 +26,12 @@ export const loader: LoaderFunction = async args => {
   workspaceLoaderLogger.info('start');
 
   const rootStore = getCurrentStore();
+
+  if (args.params.workspaceId) {
+    localStorage.setItem('last_workspace_id', args.params.workspaceId);
+    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
+  }
+
   const meta = await rootStore.get(rootWorkspacesMetadataAtom);
   workspaceLoaderLogger.info('meta loaded');
 
@@ -31,10 +39,7 @@ export const loader: LoaderFunction = async args => {
   if (!currentMetadata) {
     return redirect('/404');
   }
-  if (args.params.workspaceId) {
-    localStorage.setItem('last_workspace_id', args.params.workspaceId);
-    rootStore.set(currentWorkspaceIdAtom, args.params.workspaceId);
-  }
+
   if (!args.params.pageId) {
     rootStore.set(currentPageIdAtom, null);
   }
@@ -43,6 +48,10 @@ export const loader: LoaderFunction = async args => {
     workspaceLoaderLogger.info('get cloud workspace atom');
 
     const workspace = await rootStore.get(workspaceAtom);
+    if (!workspace.doc.isLoaded) {
+      await workspace.doc.whenLoaded;
+    }
+    workspaceLoaderLogger.info('workspace loaded');
     return (() => {
       guidCompatibilityFix(workspace.doc);
       const blockVersions = workspace.meta.blockVersions;
@@ -65,6 +74,17 @@ export const loader: LoaderFunction = async args => {
 export const Component = (): ReactElement => {
   performanceRenderLogger.info('WorkspaceLayout');
 
+  const setCurrentWorkspaceId = useSetAtom(currentWorkspaceIdAtom);
+
+  const params = useParams();
+
+  useEffect(() => {
+    if (params.workspaceId) {
+      localStorage.setItem('last_workspace_id', params.workspaceId);
+      setCurrentWorkspaceId(params.workspaceId);
+    }
+  }, [params, setCurrentWorkspaceId]);
+
   const incompatible = useLoaderData();
   return (
     <WorkspaceLayout incompatible={!!incompatible}>