fix: remove useEffect on router sync with atoms (#2241)

apps/web/src/blocksuite/providers/affine/index.ts

@@ -30,6 +30,7 @@ export const createAffineDownloadProvider = (
           new Uint8Array(hashMap.get(id) as ArrayBuffer)
         );
         connected = true;
+        callbacks.forEach(cb => cb());
         return;
       }
       affineApis
@@ -41,6 +42,8 @@ export const createAffineDownloadProvider = (
             blockSuiteWorkspace.doc,
             new Uint8Array(binary)
           );
+          connected = true;
+          callbacks.forEach(cb => cb());
         })
         .catch(e => {
           providerLogger.error('downloadWorkspace', e);

apps/web/src/hooks/root/use-on-transform-workspace.ts

@@ -6,6 +6,7 @@ import {
   SignMethod,
   storageChangeSlot,
 } from '@affine/workspace/affine/login';
+import { rootCurrentWorkspaceIdAtom } from '@affine/workspace/atom';
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { WorkspaceFlavour } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
@@ -17,6 +18,7 @@ import { useTransformWorkspace } from '../use-transform-workspace';
 export function useOnTransformWorkspace() {
   const transformWorkspace = useTransformWorkspace();
   const setUser = useSetAtom(currentAffineUserAtom);
+  const setWorkspaceId = useSetAtom(rootCurrentWorkspaceIdAtom);
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
       from: From,
@@ -43,8 +45,9 @@ export function useOnTransformWorkspace() {
           },
         })
       );
+      setWorkspaceId(workspaceId);
     },
-    [setUser, transformWorkspace]
+    [setUser, setWorkspaceId, transformWorkspace]
   );
 }
 

apps/web/src/hooks/use-router-and-workspace-with-page-id-defense.ts

@@ -2,7 +2,7 @@ import { DebugLogger } from '@affine/debug';
 import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
 import { useAtom, useAtomValue } from 'jotai';
 import type { NextRouter } from 'next/router';
-import { useEffect, useRef } from 'react';
+import { useRef } from 'react';
 
 import { rootCurrentWorkspaceAtom } from '../atoms/root';
 export const HALT_PROBLEM_TIMEOUT = 1000;
@@ -12,42 +12,12 @@ const logger = new DebugLogger('useRouterWithWorkspaceIdDefense');
 export function useRouterAndWorkspaceWithPageIdDefense(router: NextRouter) {
   const currentWorkspace = useAtomValue(rootCurrentWorkspaceAtom);
   const [currentPageId, setCurrentPageId] = useAtom(rootCurrentPageIdAtom);
-  const fallbackModeRef = useRef(false);
+  const timeoutRef = useRef<unknown | null>(null);
-  useEffect(() => {
   if (!router.isReady) {
     return;
   }
-    const { workspaceId, pageId } = router.query;
+  if (!timeoutRef.current) {
-    if (typeof pageId !== 'string') {
+    timeoutRef.current = setTimeout(() => {
-      logger.warn('pageId is not a string', pageId);
-      return;
-    }
-    if (typeof workspaceId !== 'string') {
-      logger.warn('workspaceId is not a string', workspaceId);
-      return;
-    }
-    if (currentWorkspace?.id !== workspaceId) {
-      logger.warn('workspaceId is not currentWorkspace', workspaceId);
-      return;
-    }
-    if (currentPageId !== pageId && !fallbackModeRef.current) {
-      logger.info('set pageId', pageId, 'for workspace', workspaceId);
-      setCurrentPageId(pageId);
-      void router.push({
-        pathname: '/workspace/[workspaceId]/[pageId]',
-        query: {
-          ...router.query,
-          workspaceId,
-          pageId,
-        },
-      });
-    }
-  }, [currentPageId, currentWorkspace.id, router, setCurrentPageId]);
-  useEffect(() => {
-    if (fallbackModeRef.current) {
-      return;
-    }
-    const id = setTimeout(() => {
       if (currentPageId) {
         const page =
           currentWorkspace.blockSuiteWorkspace.getPage(currentPageId);
@@ -70,19 +40,34 @@ export function useRouterAndWorkspaceWithPageIdDefense(router: NextRouter) {
                 pageId: firstOne.id,
               },
             });
-            fallbackModeRef.current = true;
           }
         }
       }
     }, HALT_PROBLEM_TIMEOUT);
-    return () => {
+  }
-      clearTimeout(id);
+  const { workspaceId, pageId } = router.query;
-    };
+  if (typeof pageId !== 'string') {
-  }, [
+    console.warn('pageId is not a string', pageId);
-    currentPageId,
+    return;
-    currentWorkspace.blockSuiteWorkspace,
+  }
-    currentWorkspace.id,
+  if (typeof workspaceId !== 'string') {
-    router,
+    console.warn('workspaceId is not a string', workspaceId);
-    setCurrentPageId,
+    return;
-  ]);
+  }
+  if (currentWorkspace?.id !== workspaceId) {
+    console.warn('workspaceId is not currentWorkspace', workspaceId);
+    return;
+  }
+  if (currentPageId !== pageId) {
+    console.log('set current page id', pageId);
+    setCurrentPageId(pageId);
+    void router.push({
+      pathname: '/workspace/[workspaceId]/[pageId]',
+      query: {
+        ...router.query,
+        workspaceId,
+        pageId,
+      },
+    });
+  }
 }

apps/web/src/hooks/use-router-with-workspace-id-defense.ts

@@ -6,7 +6,7 @@ import {
 } from '@affine/workspace/atom';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import type { NextRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useMemo } from 'react';
 
 const logger = new DebugLogger('useRouterWithWorkspaceIdDefense');
 
@@ -16,14 +16,16 @@ export function useRouterWithWorkspaceIdDefense(router: NextRouter) {
     rootCurrentWorkspaceIdAtom
   );
   const setCurrentPageId = useSetAtom(rootCurrentPageIdAtom);
-  useEffect(() => {
+  const exist = useMemo(
+    () => metadata.find(m => m.id === currentWorkspaceId),
+    [currentWorkspaceId, metadata]
+  );
   if (!router.isReady) {
     return;
   }
   if (!currentWorkspaceId) {
     return;
   }
-    const exist = metadata.find(m => m.id === currentWorkspaceId);
   if (!exist) {
     console.warn('workspace not exist, redirect to first one');
     // clean up
@@ -42,12 +44,4 @@ export function useRouterWithWorkspaceIdDefense(router: NextRouter) {
       },
     });
   }
-  }, [
-    currentWorkspaceId,
-    metadata,
-    router,
-    router.isReady,
-    setCurrentPageId,
-    setCurrentWorkspaceId,
-  ]);
 }

apps/web/src/hooks/use-sync-router-with-current-page-id.ts

@@ -1,15 +1,16 @@
 import { rootCurrentPageIdAtom } from '@affine/workspace/atom';
-import { useSetAtom } from 'jotai';
+import { useAtom } from 'jotai';
 import type { NextRouter } from 'next/router';
-import { useEffect } from 'react';
 
 export function useSyncRouterWithCurrentPageId(router: NextRouter) {
-  const setCurrentPageId = useSetAtom(rootCurrentPageIdAtom);
+  const [currentPageId, setCurrentPageId] = useAtom(rootCurrentPageIdAtom);
-  useEffect(() => {
   if (!router.isReady) {
     return;
   }
   const pageId = router.query.pageId;
+  if (currentPageId === pageId) {
+    return;
+  }
   if (typeof pageId === 'string') {
     console.log('set page id', pageId);
     setCurrentPageId(pageId);
@@ -17,5 +18,4 @@ export function useSyncRouterWithCurrentPageId(router: NextRouter) {
     console.log('cleanup page');
     setCurrentPageId(null);
   }
-  }, [router.isReady, router.query.pageId, setCurrentPageId]);
 }

apps/web/src/hooks/use-sync-router-with-current-workspace-id.ts

@@ -5,7 +5,6 @@ import {
 } from '@affine/workspace/atom';
 import { useAtom, useAtomValue } from 'jotai';
 import type { NextRouter } from 'next/router';
-import { useEffect } from 'react';
 
 const logger = new DebugLogger('useSyncRouterWithCurrentWorkspaceId');
 
@@ -14,7 +13,6 @@ export function useSyncRouterWithCurrentWorkspaceId(router: NextRouter) {
     rootCurrentWorkspaceIdAtom
   );
   const metadata = useAtomValue(rootWorkspacesMetadataAtom);
-  useEffect(() => {
   if (!router.isReady) {
     return;
   }
@@ -22,11 +20,14 @@ export function useSyncRouterWithCurrentWorkspaceId(router: NextRouter) {
   if (typeof workspaceId !== 'string') {
     return;
   }
+  if (currentWorkspaceId === workspaceId) {
+    return;
+  }
   if (currentWorkspaceId) {
     if (currentWorkspaceId !== workspaceId) {
       const target = metadata.find(workspace => workspace.id === workspaceId);
-        if (!target) {
       logger.debug('workspace not exist, redirect to current one');
+      if (!target) {
         // workspaceId is invalid, redirect to currentWorkspaceId
         void router.push({
           pathname: router.pathname,
@@ -68,5 +69,4 @@ export function useSyncRouterWithCurrentWorkspaceId(router: NextRouter) {
       });
     }
   }
-  }, [currentWorkspaceId, metadata, router, setCurrentWorkspaceId]);
 }

apps/web/src/hooks/use-transform-workspace.ts

@@ -1,7 +1,4 @@
-import {
+import { rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
-  rootCurrentWorkspaceIdAtom,
-  rootWorkspacesMetadataAtom,
-} from '@affine/workspace/atom';
 import type { WorkspaceFlavour } from '@affine/workspace/type';
 import type { WorkspaceRegistry } from '@affine/workspace/type';
 import { useSetAtom } from 'jotai';
@@ -15,7 +12,6 @@ import { WorkspaceAdapters } from '../plugins';
  * The logic here is to delete the old workspace and create a new one.
  */
 export function useTransformWorkspace() {
-  const setCurrentWorkspaceId = useSetAtom(rootCurrentWorkspaceIdAtom);
   const set = useSetAtom(rootWorkspacesMetadataAtom);
   return useCallback(
     async <From extends WorkspaceFlavour, To extends WorkspaceFlavour>(
@@ -23,10 +19,11 @@ export function useTransformWorkspace() {
       to: To,
       workspace: WorkspaceRegistry[From]
     ): Promise<string> => {
-      await WorkspaceAdapters[from].CRUD.delete(workspace as any);
+      // create first, then delete, in case of failure
       const newId = await WorkspaceAdapters[to].CRUD.create(
         workspace.blockSuiteWorkspace
       );
+      await WorkspaceAdapters[from].CRUD.delete(workspace as any);
       set(workspaces => {
         const idx = workspaces.findIndex(ws => ws.id === workspace.id);
         workspaces.splice(idx, 1, {
@@ -35,9 +32,8 @@ export function useTransformWorkspace() {
         });
         return [...workspaces];
       });
-      setCurrentWorkspaceId(newId);
       return newId;
     },
-    [set, setCurrentWorkspaceId]
+    [set]
   );
 }

apps/web/src/pages/workspace/[workspaceId]/setting.tsx

@@ -11,6 +11,7 @@ import { assertExists } from '@blocksuite/store';
 import { useAtom, useAtomValue } from 'jotai';
 import { atomWithStorage } from 'jotai/utils';
 import Head from 'next/head';
+import type { NextRouter } from 'next/router';
 import { useRouter } from 'next/router';
 import React, { useCallback, useEffect } from 'react';
 
@@ -31,28 +32,11 @@ const settingPanelAtom = atomWithStorage<SettingPanel>(
   settingPanel.General
 );
 
-const SettingPage: NextPageWithLayout = () => {
+function useTabRouterSync(
-  const router = useRouter();
+  router: NextRouter,
-  const workspaceIds = useAtomValue(rootWorkspacesMetadataAtom);
+  currentTab: SettingPanel,
-  const [currentWorkspace] = useCurrentWorkspace();
+  setCurrentTab: (tab: SettingPanel) => void
-  const t = useAFFiNEI18N();
+) {
-  useSyncRouterWithCurrentWorkspaceId(router);
-  const [currentTab, setCurrentTab] = useAtom(settingPanelAtom);
-  useEffect(() => {});
-  const onChangeTab = useCallback(
-    (tab: SettingPanel) => {
-      setCurrentTab(tab as SettingPanel);
-      router.push({
-        pathname: router.pathname,
-        query: {
-          ...router.query,
-          currentTab: tab,
-        },
-      });
-    },
-    [router, setCurrentTab]
-  );
-  useEffect(() => {
   if (!router.isReady) {
     return;
   }
@@ -65,7 +49,7 @@ const SettingPage: NextPageWithLayout = () => {
     settingPanelValues.indexOf(queryCurrentTab as SettingPanel) === -1
   ) {
     setCurrentTab(settingPanel.General);
-      router.replace({
+    void router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
@@ -75,7 +59,7 @@ const SettingPage: NextPageWithLayout = () => {
     return;
   } else if (settingPanelValues.indexOf(currentTab as SettingPanel) === -1) {
     setCurrentTab(settingPanel.General);
-      router.replace({
+    void router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
@@ -84,7 +68,7 @@ const SettingPage: NextPageWithLayout = () => {
     });
     return;
   } else if (queryCurrentTab !== currentTab) {
-      router.replace({
+    void router.replace({
       pathname: router.pathname,
       query: {
         ...router.query,
@@ -93,7 +77,30 @@ const SettingPage: NextPageWithLayout = () => {
     });
     return;
   }
-  }, [currentTab, router, setCurrentTab]);
+}
+
+const SettingPage: NextPageWithLayout = () => {
+  const router = useRouter();
+  const workspaceIds = useAtomValue(rootWorkspacesMetadataAtom);
+  const [currentWorkspace] = useCurrentWorkspace();
+  const t = useAFFiNEI18N();
+  useSyncRouterWithCurrentWorkspaceId(router);
+  const [currentTab, setCurrentTab] = useAtom(settingPanelAtom);
+  useEffect(() => {});
+  const onChangeTab = useCallback(
+    (tab: SettingPanel) => {
+      setCurrentTab(tab as SettingPanel);
+      void router.push({
+        pathname: router.pathname,
+        query: {
+          ...router.query,
+          currentTab: tab,
+        },
+      });
+    },
+    [router, setCurrentTab]
+  );
+  useTabRouterSync(router, currentTab, setCurrentTab);
 
   const helper = useAppHelper();
 

apps/web/src/plugins/affine/index.tsx

@@ -11,6 +11,7 @@ import {
   SignMethod,
 } from '@affine/workspace/affine/login';
 import { rootStore, rootWorkspacesMetadataAtom } from '@affine/workspace/atom';
+import { createIndexedDBBackgroundProvider } from '@affine/workspace/providers';
 import type { AffineLegacyCloudWorkspace } from '@affine/workspace/type';
 import {
   LoadPriority,
@@ -28,6 +29,7 @@ import { mutate } from 'swr';
 import { z } from 'zod';
 
 import { createAffineProviders } from '../../blocksuite';
+import { createAffineDownloadProvider } from '../../blocksuite/providers/affine';
 import { PageNotFoundError } from '../../components/affine/affine-error-eoundary';
 import { WorkspaceSettingDetail } from '../../components/affine/workspace-setting-detail';
 import { BlockSuitePageList } from '../../components/blocksuite/block-suite-page-list';
@@ -148,6 +150,27 @@ export const AffinePlugin: WorkspaceAdapter<WorkspaceFlavour.AFFINE> = {
           );
         }
       }
+      {
+        const bs = createEmptyBlockSuiteWorkspace(id, WorkspaceFlavour.AFFINE, {
+          workspaceApis: affineApis,
+        });
+        // fixme:
+        //  force to download workspace binary
+        //  to make sure the workspace is synced
+        const provider = createAffineDownloadProvider(bs);
+        const indexedDBProvider = createIndexedDBBackgroundProvider(bs);
+        await new Promise<void>(resolve => {
+          indexedDBProvider.callbacks.add(() => {
+            resolve();
+          });
+          provider.callbacks.add(() => {
+            indexedDBProvider.connect();
+          });
+          provider.connect();
+        });
+        provider.disconnect();
+        indexedDBProvider.disconnect();
+      }
 
       await mutate(matcher => matcher === QueryKey.getWorkspaces);
       // refresh the local storage

packages/workspace/package.json

@@ -22,6 +22,7 @@
     "@affine/component": "workspace:*",
     "@affine/debug": "workspace:*",
     "@affine/env": "workspace:*",
+    "@toeverything/hooks": "workspace:*",
     "@toeverything/y-indexeddb": "workspace:*",
     "firebase": "^9.21.0",
     "jotai": "^2.1.0",

packages/workspace/src/affine/__tests__/api.spec.ts

@@ -17,6 +17,7 @@ import { assertExists } from '@blocksuite/global/utils';
 import type { Page, PageMeta } from '@blocksuite/store';
 import { Workspace } from '@blocksuite/store';
 import { faker } from '@faker-js/faker';
+import type {} from '@toeverything/hooks/use-block-suite-page-meta';
 import { beforeEach, describe, expect, test, vi } from 'vitest';
 import { WebSocket } from 'ws';
 import { applyUpdate } from 'yjs';

yarn.lock

@@ -371,6 +371,7 @@ __metadata:
     "@affine/component": "workspace:*"
     "@affine/debug": "workspace:*"
     "@affine/env": "workspace:*"
+    "@toeverything/hooks": "workspace:*"
     "@toeverything/y-indexeddb": "workspace:*"
     "@types/ws": ^8.5.4
     firebase: ^9.21.0