From a0f5d089d103730c3385732b498b85027f5900e9 Mon Sep 17 00:00:00 2001
From: DiamondThree <857159145@qq.com>
Date: Tue, 7 Feb 2023 18:48:55 +0800
Subject: [PATCH] fix: appState dependency

---
 .../app/src/hooks/use-ensure-workspace.ts     |  2 +-
 .../providers/app-state-provider/Provider.tsx | 39 +++++++++++++------
 .../providers/app-state-provider/interface.ts |  4 +-
 3 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/packages/app/src/hooks/use-ensure-workspace.ts b/packages/app/src/hooks/use-ensure-workspace.ts
index 0ef15580a0..d547b09dad 100644
--- a/packages/app/src/hooks/use-ensure-workspace.ts
+++ b/packages/app/src/hooks/use-ensure-workspace.ts
@@ -38,7 +38,7 @@ export const useEnsureWorkspace = () => {
     // }
     const workspaceId =
       (router.query.workspaceId as string) || workspaceList[0]?.id;
-    loadWorkspace(workspaceId).finally(() => {
+    loadWorkspace.current(workspaceId).finally(() => {
       setWorkspaceLoaded(true);
       setActiveWorkspaceId(activeWorkspaceId);
     });
diff --git a/packages/app/src/providers/app-state-provider/Provider.tsx b/packages/app/src/providers/app-state-provider/Provider.tsx
index 21846aefa0..5dd18094ad 100644
--- a/packages/app/src/providers/app-state-provider/Provider.tsx
+++ b/packages/app/src/providers/app-state-provider/Provider.tsx
@@ -19,11 +19,11 @@ type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;
 export const AppState = createContext<AppStateContext>({} as AppStateContext);
 
 export const useAppState = () => useContext(AppState);
-let syncChangeDisposable: Disposable | undefined = undefined;
 export const AppStateProvider = ({
   children,
 }: PropsWithChildren<AppStateContextProps>) => {
   const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
+  const [blobState, setBlobState] = useState(false);
   useEffect(() => {
     const initState = async () => {
       const dataCenter = await getDataCenter();
@@ -94,7 +94,8 @@ export const AppStateProvider = ({
     });
   };
 
-  const loadWorkspace = useRef<AppStateFunction['loadWorkspace']>();
+  const loadWorkspace: AppStateFunction['loadWorkspace'] =
+    useRef() as AppStateFunction['loadWorkspace'];
   loadWorkspace.current = async (workspaceId: string) => {
     const { dataCenter, workspaceList, currentWorkspace, user } = appState;
     if (!workspaceList.find(v => v.id.toString() === workspaceId)) {
@@ -103,7 +104,7 @@ export const AppStateProvider = ({
     if (workspaceId === currentWorkspace?.id) {
       return currentWorkspace;
     }
-    syncChangeDisposable?.dispose();
+
     const workspace = (await dataCenter.loadWorkspace(workspaceId)) ?? null;
     let isOwner;
     if (workspace?.provider === 'local') {
@@ -113,13 +114,7 @@ export const AppStateProvider = ({
       // We must ensure workspace.owner exists, then ensure id same.
       isOwner = workspace?.owner && user?.id === workspace.owner.id;
     }
-    const blobStorage = await workspace?.blocksuiteWorkspace?.blobs;
-    syncChangeDisposable = blobStorage?.signals.onBlobSyncStateChange.on(() => {
-      setAppState({
-        ...appState,
-        blobDataSynced: blobStorage?.uploading,
-      });
-    });
+
     const pageList =
       (workspace?.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]) ?? [];
     setAppState({
@@ -129,12 +124,31 @@ export const AppStateProvider = ({
       currentPage: null,
       editor: null,
       isOwner,
-      blobDataSynced: blobStorage?.uploading,
     });
 
     return workspace;
   };
 
+  useEffect(() => {
+    let syncChangeDisposable: Disposable | undefined;
+    const currentWorkspace = appState.currentWorkspace;
+    if (!currentWorkspace) {
+      return;
+    }
+    const getBlobStorage = async () => {
+      const blobStorage = await currentWorkspace?.blocksuiteWorkspace?.blobs;
+      syncChangeDisposable = blobStorage?.signals.onBlobSyncStateChange.on(
+        () => {
+          setBlobState(blobStorage?.uploading);
+        }
+      );
+    };
+    getBlobStorage();
+    return () => {
+      syncChangeDisposable?.dispose();
+    };
+  }, [appState.currentWorkspace]);
+
   const setEditor: AppStateFunction['setEditor'] =
     useRef() as AppStateFunction['setEditor'];
   setEditor.current = editor => {
@@ -176,9 +190,10 @@ export const AppStateProvider = ({
         ...appState,
         setEditor,
         loadPage: loadPage.current,
-        loadWorkspace: loadWorkspace.current,
+        loadWorkspace: loadWorkspace,
         login,
         logout,
+        blobDataSynced: blobState,
       }}
     >
       {children}
diff --git a/packages/app/src/providers/app-state-provider/interface.ts b/packages/app/src/providers/app-state-provider/interface.ts
index 356795e965..a1ea400229 100644
--- a/packages/app/src/providers/app-state-provider/interface.ts
+++ b/packages/app/src/providers/app-state-provider/interface.ts
@@ -30,7 +30,9 @@ export type AppStateValue = {
 export type AppStateFunction = {
   setEditor: MutableRefObject<(page: EditorContainer) => void>;
 
-  loadWorkspace: (workspaceId: string) => Promise<WorkspaceUnit | null>;
+  loadWorkspace: MutableRefObject<
+    (workspaceId: string) => Promise<WorkspaceUnit | null>
+  >;
   loadPage: (pageId: string) => void;
 
   login: () => Promise<User>;