refactor(store): extract workspace out of AppState (#1037)

apps/web/src/hooks/use-change-page-meta.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
-import { useAppState, PageMeta } from '@/providers/app-state-provider';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useGlobalState } from '@/store/app';
 
 export type ChangePageMeta = (
   pageId: string,
@@ -7,7 +8,9 @@ export type ChangePageMeta = (
 ) => void;
 
 export const useChangePageMeta = () => {
-  const { currentWorkspace } = useAppState();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
 
   return useCallback<ChangePageMeta>(
     (pageId, pageMeta) => {

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

@@ -1,35 +1,42 @@
-import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useGlobalState } from '@/store/app';
+import { assertEquals } from '@blocksuite/global/utils';
+
+// todo: refactor with suspense mode
 // It is a fully effective hook
 // Cause it not just ensure workspace loaded, but also have router change.
 export const useEnsureWorkspace = () => {
-  const [workspaceLoaded, setWorkspaceLoaded] = useState(false);
-  const dataCenter = useGlobalState(store => store.dataCenter);
-  const { loadWorkspace } = useAppState();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
+  const loadWorkspace = useGlobalState(
+    useCallback(store => store.loadWorkspace, [])
+  );
   const router = useRouter();
-  const [activeWorkspaceId, setActiveWorkspaceId] = useState(
-    router.query.workspaceId as string
+  const [currentWorkspaceId, setCurrentWorkspaceId] = useState<string | null>(
+    typeof router.query.workspaceId === 'string'
+      ? router.query.workspaceId
+      : null
   );
 
   // const defaultOutLineWorkspaceId = '99ce7eb7';
   // console.log(defaultOutLineWorkspaceId);
   useEffect(() => {
-    setWorkspaceLoaded(false);
-    let aborted = false;
     const abortController = new AbortController();
 
-    const workspaceList = dataCenter.workspaces;
     const workspaceId =
-      (router.query.workspaceId as string) || workspaceList[0]?.id;
+      (router.query.workspaceId as string) || dataCenter.workspaces[0]?.id;
 
     // If router.query.workspaceId is not in workspace list, jump to 404 page
     // If workspaceList is empty, we need to create a default workspace but not jump to 404
     if (
       workspaceId &&
-      workspaceList.length &&
-      workspaceList.findIndex(meta => meta.id.toString() === workspaceId) === -1
+      dataCenter.workspaces.length &&
+      dataCenter.workspaces.findIndex(
+        meta => meta.id.toString() === workspaceId
+      ) === -1
     ) {
       router.push('/404');
       return;
@@ -44,22 +51,21 @@ export const useEnsureWorkspace = () => {
     //   return;
     // }
 
-    loadWorkspace.current(workspaceId, abortController.signal).then(unit => {
-      if (!aborted && unit) {
-        setWorkspaceLoaded(true);
-        setActiveWorkspaceId(workspaceId);
+    loadWorkspace(workspaceId, abortController.signal).then(unit => {
+      if (!abortController.signal.aborted && unit) {
+        setCurrentWorkspaceId(unit.id);
+        assertEquals(unit.id, workspaceId);
       }
     });
 
     return () => {
-      aborted = true;
       abortController.abort();
     };
   }, [dataCenter, loadWorkspace, router]);
 
   return {
-    workspaceLoaded,
-    activeWorkspaceId,
+    workspaceLoaded: currentWorkspace?.id === currentWorkspaceId,
+    activeWorkspaceId: currentWorkspace?.id ?? router.query.workspaceId,
   };
 };
 

apps/web/src/hooks/use-members.ts

@@ -1,10 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
 import { Member } from '@affine/datacenter';
-import { useAppState } from '@/providers/app-state-provider';
 import { useGlobalState } from '@/store/app';
 export const useMembers = () => {
   const dataCenter = useGlobalState(store => store.dataCenter);
-  const { currentWorkspace } = useAppState();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
   const [members, setMembers] = useState<Member[]>([]);
   const [loaded, setLoaded] = useState(false);
   const refreshMembers = useCallback(async () => {

apps/web/src/hooks/use-page-helper.ts

@@ -1,11 +1,12 @@
 import { uuidv4, Workspace } from '@blocksuite/store';
 import { QueryContent } from '@blocksuite/store/dist/workspace/search';
-import { PageMeta, useAppState } from '@/providers/app-state-provider';
+import { PageMeta } from '@/providers/app-state-provider';
 import { EditorContainer } from '@blocksuite/editor';
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useRouter } from 'next/router';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useGlobalState } from '@/store/app';
+import { useCallback } from 'react';
 
 export type EditorHandlers = {
   createPage: (params?: {
@@ -41,7 +42,9 @@ export const usePageHelper = (): EditorHandlers => {
   const router = useRouter();
   const changePageMeta = useChangePageMeta();
   const editor = useGlobalState(store => store.editor);
-  const { currentWorkspace } = useAppState();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
 
   return {
     createPage: ({

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

@@ -1,16 +1,19 @@
-import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useGlobalState } from '@/store/app';
+import { useCallback } from 'react';
 
 export const useWorkspaceHelper = () => {
   const dataCenter = useGlobalState(store => store.dataCenter);
-  const { currentWorkspace } = useAppState();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
+  const loadWorkspace = useGlobalState(store => store.loadWorkspace);
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
       name: name,
     });
     if (workspaceInfo && workspaceInfo.id) {
-      return await dataCenter.loadWorkspace(workspaceInfo.id);
+      return loadWorkspace(workspaceInfo.id);
     }
     return null;
   };