feat: refactor app state provider

packages/app/src/providers/GlobalModalProvider.tsx

@@ -97,12 +97,12 @@ export const ModalProvider = ({
           triggerHandler('shortcuts', false);
         }}
       ></ShortcutsModal>
-      <QuickSearch
-        open={modalMap.quickSearch}
-        onClose={() => {
-          triggerHandler('quickSearch', false);
-        }}
-      ></QuickSearch>
+      {/*<QuickSearch*/}
+      {/*  open={modalMap.quickSearch}*/}
+      {/*  onClose={() => {*/}
+      {/*    triggerHandler('quickSearch', false);*/}
+      {/*  }}*/}
+      {/*></QuickSearch>*/}
       <ImportModal
         open={modalMap.import}
         onClose={() => {

packages/app/src/providers/app-state-provider/DynamicBlocksuite.tsx

@@ -2,11 +2,11 @@ import { useEffect } from 'react';
 import type { Page } from '@blocksuite/store';
 import '@blocksuite/blocks';
 import { EditorContainer } from '@blocksuite/editor';
-import type { CreateEditorHandler } from './context';
+import { CreateEditorHandler } from './interface';
 
-interface Props {
+type Props = {
   setCreateEditorHandler: (handler: CreateEditorHandler) => void;
-}
+};
 
 const DynamicBlocksuite = ({ setCreateEditorHandler }: Props) => {
   useEffect(() => {

packages/app/src/providers/app-state-provider/Provider.tsx

@@ -1,46 +1,30 @@
-import { useMemo, useState, useCallback, useRef } from 'react';
-import type { ReactNode } from 'react';
-import dynamic from 'next/dynamic';
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react';
+import type { PropsWithChildren } from 'react';
 import { getDataCenter } from '@affine/datacenter';
-import { AppState, AppStateContext } from './context';
-import type {
-  AppStateValue,
-  CreateEditorHandler,
-  LoadWorkspaceHandler,
-} from './context';
-import { Page } from '@blocksuite/store';
-import { EditorContainer } from '@blocksuite/editor';
+import { AppStateContext, AppStateValue } from './interface';
+import { createDefaultWorkspace } from './utils';
+
+type AppStateContextProps = PropsWithChildren<Record<string, unknown>>;
+import dynamic from 'next/dynamic';
+import { CreateEditorHandler } from '@/providers/app-state-provider3';
+
 const DynamicBlocksuite = dynamic(() => import('./DynamicBlocksuite'), {
   ssr: false,
 });
+export const AppState = createContext<AppStateContext>({} as AppStateContext);
 
-const loadWorkspaceHandler: LoadWorkspaceHandler = async workspaceId => {
-  if (workspaceId) {
-    const dc = await getDataCenter();
-    return dc.load(workspaceId, { providerId: 'affine' });
-  } else {
-    return null;
-  }
-};
-export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
-  const refreshWorkspacesMeta = async () => {
-    const dc = await getDataCenter();
-    const workspacesMeta = await dc.apis.getWorkspaces().catch(() => {
-      return [];
-    });
-    setState(state => ({ ...state, workspacesMeta }));
-  };
+export const useAppState = () => useContext(AppState);
 
-  const [state, setState] = useState<AppStateValue>({
-    user: null,
-    workspacesMeta: [],
-    currentWorkspaceId: '',
-    currentWorkspace: null,
-    currentPage: null,
-    editor: null,
-    refreshWorkspacesMeta,
-    synced: true,
-  });
+export const AppStateProvider = ({
+  children,
+}: PropsWithChildren<AppStateContextProps>) => {
+  const [appState, setAppState] = useState<AppStateValue>({} as AppStateValue);
 
   const [createEditorHandler, _setCreateEditorHandler] =
     useState<CreateEditorHandler>();
@@ -52,54 +36,84 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     [_setCreateEditorHandler]
   );
 
-  const loadWorkspace = useRef<AppStateContext['loadWorkspace']>(() =>
-    Promise.resolve(null)
-  );
-  loadWorkspace.current = async (workspaceId: string) => {
-    if (state.currentWorkspaceId === workspaceId) {
-      return state.currentWorkspace;
+  useEffect(() => {
+    const init = async () => {
+      const dataCenter = await getDataCenter();
+
+      if (dataCenter.workspaces.length === 0) {
+        await createDefaultWorkspace(dataCenter);
+      }
+
+      const currentWorkspace = await dataCenter.loadWorkspace(
+        dataCenter.workspaces[0].id
+      );
+
+      setAppState({
+        dataCenter,
+        user: await dataCenter.getUserInfo(),
+        workspaceList: dataCenter.workspaces,
+        currentWorkspaceId: dataCenter.workspaces[0].id,
+        currentWorkspace,
+        pageList: currentWorkspace.meta.pageMetas,
+        currentPage: null,
+        editor: null,
+        synced: true,
+      });
+    };
+
+    init();
+  }, []);
+
+  useEffect(() => {
+    if (!appState?.currentWorkspace) {
+      return;
     }
-    const workspace =
-      (await loadWorkspaceHandler(workspaceId, state.user)) || null;
+    const currentWorkspace = appState.currentWorkspace;
+    const dispose = currentWorkspace.meta.pagesUpdated.on(() => {
+      setAppState({
+        ...appState,
+        pageList: currentWorkspace.meta.pageMetas,
+      });
+    }).dispose;
+    return () => {
+      dispose();
+    };
+  }, [appState]);
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    window.workspace = workspace;
-    // FIXME: there needs some method to destroy websocket.
-    // Or we need a manager to manage websocket.
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    state.currentWorkspace?.__ws__?.destroy();
-
-    setState(state => ({
-      ...state,
-      currentWorkspace: workspace,
-      currentWorkspaceId: workspaceId,
-    }));
-    return workspace;
-  };
-
-  const loadPage = useRef<AppStateContext['loadPage']>(() =>
-    Promise.resolve(null)
-  );
-  loadPage.current = async (pageId: string) => {
-    const { currentWorkspace, currentPage } = state;
+  const loadPage = (pageId: string) => {
+    const { currentWorkspace, currentPage } = appState;
     if (pageId === currentPage?.id) {
-      return currentPage;
+      return;
     }
-    const page = (pageId ? currentWorkspace?.getPage(pageId) : null) || null;
-    setState(state => ({ ...state, currentPage: page }));
-    return page;
+    const page = currentWorkspace?.getPage(pageId) || null;
+    setAppState({
+      ...appState,
+      currentPage: page,
+    });
   };
 
-  const createEditor = useRef<
-    ((page: Page) => EditorContainer | null) | undefined
-  >();
-  createEditor.current = () => {
-    const { currentPage, currentWorkspace } = state;
+  const loadWorkspace = async (workspaceId: string) => {
+    const { dataCenter, workspaceList, currentWorkspaceId } = appState;
+    if (!workspaceList.find(v => v.id === workspaceId)) {
+      return;
+    }
+    if (workspaceId === currentWorkspaceId) {
+      return;
+    }
+
+    setAppState({
+      ...appState,
+      currentWorkspace: await dataCenter.loadWorkspace(workspaceId),
+      currentWorkspaceId: workspaceId,
+    });
+  };
+
+  const createEditor = () => {
+    const { currentPage, currentWorkspace } = appState;
     if (!currentPage || !currentWorkspace) {
       return null;
     }
+
     const editor = createEditorHandler?.(currentPage) || null;
 
     if (editor) {
@@ -117,28 +131,28 @@ export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
     return editor;
   };
 
-  const setEditor = useRef<(editor: AppStateValue['editor']) => void>();
-
-  setEditor.current = (editor: AppStateValue['editor']) => {
-    setState(state => ({ ...state, editor }));
+  const setEditor = (editor: AppStateValue['editor']) => {
+    setAppState({
+      ...appState,
+      editor,
+    });
   };
 
-  const context = useMemo(
-    () => ({
-      ...state,
-      setState,
-      createEditor,
-      setEditor,
-      loadWorkspace: loadWorkspace.current,
-      loadPage: loadPage.current,
-    }),
-    [state, setState, loadPage, loadWorkspace]
-  );
-
   return (
-    <AppState.Provider value={context}>
+    <AppState.Provider
+      value={{
+        ...appState,
+        setEditor,
+        loadPage,
+        loadWorkspace,
+        createEditor,
+      }}
+    >
       <DynamicBlocksuite setCreateEditorHandler={setCreateEditorHandler} />
+
       {children}
     </AppState.Provider>
   );
 };
+
+export default AppStateProvider;

packages/app/src/providers/app-state-provider/index.ts

@@ -1,2 +1 @@
-export * from './context';
-export * from './interface';
+export * from './Provider';

packages/app/src/providers/app-state-provider/interface.ts

@@ -1,17 +1,31 @@
-import { PageMeta as OriginalPageMeta } from '@blocksuite/store/dist/workspace/workspace';
+import { DataCenter, User, Workspace } from '@affine/datacenter';
+import type { EditorContainer } from '@blocksuite/editor';
 
-// export type PageMeta = {
-//   favorite: boolean;
-//   trash: boolean;
-//   trashDate: number | void;
-//   updatedDate: number | void;
-//   mode: EditorContainer['mode'];
-// } & OriginalPageMeta;
+import type {
+  Page as StorePage,
+  Workspace as StoreWorkspace,
+  PageMeta,
+} from '@blocksuite/store';
 
-export interface PageMeta extends OriginalPageMeta {
-  favorite: boolean;
-  trash: boolean;
-  trashDate: number;
-  updatedDate: number;
-  mode: 'edgeless' | 'page';
-}
+export type AppStateValue = {
+  dataCenter: DataCenter;
+  user: User | null;
+  workspaceList: Workspace[];
+  currentWorkspace: StoreWorkspace;
+  currentWorkspaceId: string;
+  pageList: PageMeta[];
+  currentPage: StorePage | null;
+  editor?: EditorContainer | null;
+  synced: boolean;
+};
+
+export type AppStateFunction = {
+  createEditor: (page: StorePage) => EditorContainer | null;
+  setEditor: (page: EditorContainer) => void;
+  loadWorkspace: (workspaceId: string) => Promise<void>;
+  loadPage: (pageId: string) => void;
+};
+
+export type AppStateContext = AppStateValue & AppStateFunction;
+
+export type CreateEditorHandler = (page: StorePage) => EditorContainer | null;

packages/app/src/providers/app-state-provider/utils.ts

@@ -0,0 +1,10 @@
+import { DataCenter } from '@affine/datacenter';
+
+const DEFAULT_WORKSPACE_NAME = 'affine';
+
+export const createDefaultWorkspace = async (dataCenter: DataCenter) => {
+  return dataCenter.createWorkspace({
+    avatar: 'test',
+    name: DEFAULT_WORKSPACE_NAME,
+  });
+};

packages/app/src/providers/app-state-provider3/DynamicBlocksuite.tsx

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+import type { Page } from '@blocksuite/store';
+import '@blocksuite/blocks';
+import { EditorContainer } from '@blocksuite/editor';
+import type { CreateEditorHandler } from './context';
+
+interface Props {
+  setCreateEditorHandler: (handler: CreateEditorHandler) => void;
+}
+
+const DynamicBlocksuite = ({ setCreateEditorHandler }: Props) => {
+  useEffect(() => {
+    const createEditorHandler: CreateEditorHandler = (page: Page) => {
+      const editor = new EditorContainer();
+      editor.page = page;
+      return editor;
+    };
+
+    setCreateEditorHandler(createEditorHandler);
+  }, [setCreateEditorHandler]);
+
+  return <></>;
+};
+
+export default DynamicBlocksuite;

packages/app/src/providers/app-state-provider3/Provider.tsx

@@ -0,0 +1,144 @@
+import { useMemo, useState, useCallback, useRef } from 'react';
+import type { ReactNode } from 'react';
+import dynamic from 'next/dynamic';
+import { getDataCenter } from '@affine/datacenter';
+import { AppState, AppStateContext } from './context';
+import type {
+  AppStateValue,
+  CreateEditorHandler,
+  LoadWorkspaceHandler,
+} from './context';
+import { Page } from '@blocksuite/store';
+import { EditorContainer } from '@blocksuite/editor';
+const DynamicBlocksuite = dynamic(() => import('./DynamicBlocksuite'), {
+  ssr: false,
+});
+
+const loadWorkspaceHandler: LoadWorkspaceHandler = async workspaceId => {
+  if (workspaceId) {
+    const dc = await getDataCenter();
+    return dc.load(workspaceId, { providerId: 'affine' });
+  } else {
+    return null;
+  }
+};
+export const AppStateProvider = ({ children }: { children?: ReactNode }) => {
+  const refreshWorkspacesMeta = async () => {
+    const dc = await getDataCenter();
+    const workspacesMeta = await dc.apis.getWorkspaces().catch(() => {
+      return [];
+    });
+    setState(state => ({ ...state, workspacesMeta }));
+  };
+
+  const [state, setState] = useState<AppStateValue>({
+    user: null,
+    workspacesMeta: [],
+    currentWorkspaceId: '',
+    currentWorkspace: null,
+    currentPage: null,
+    editor: null,
+    refreshWorkspacesMeta,
+    synced: true,
+  });
+
+  const [createEditorHandler, _setCreateEditorHandler] =
+    useState<CreateEditorHandler>();
+
+  const setCreateEditorHandler = useCallback(
+    (handler: CreateEditorHandler) => {
+      _setCreateEditorHandler(() => handler);
+    },
+    [_setCreateEditorHandler]
+  );
+
+  const loadWorkspace = useRef<AppStateContext['loadWorkspace']>(() =>
+    Promise.resolve(null)
+  );
+  loadWorkspace.current = async (workspaceId: string) => {
+    if (state.currentWorkspaceId === workspaceId) {
+      return state.currentWorkspace;
+    }
+    const workspace =
+      (await loadWorkspaceHandler(workspaceId, state.user)) || null;
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    window.workspace = workspace;
+    // FIXME: there needs some method to destroy websocket.
+    // Or we need a manager to manage websocket.
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    state.currentWorkspace?.__ws__?.destroy();
+
+    setState(state => ({
+      ...state,
+      currentWorkspace: workspace,
+      currentWorkspaceId: workspaceId,
+    }));
+    return workspace;
+  };
+
+  const loadPage = useRef<AppStateContext['loadPage']>(() =>
+    Promise.resolve(null)
+  );
+  loadPage.current = async (pageId: string) => {
+    const { currentWorkspace, currentPage } = state;
+    if (pageId === currentPage?.id) {
+      return currentPage;
+    }
+    const page = (pageId ? currentWorkspace?.getPage(pageId) : null) || null;
+    setState(state => ({ ...state, currentPage: page }));
+    return page;
+  };
+
+  const createEditor = useRef<
+    ((page: Page) => EditorContainer | null) | undefined
+  >();
+  createEditor.current = () => {
+    const { currentPage, currentWorkspace } = state;
+    if (!currentPage || !currentWorkspace) {
+      return null;
+    }
+    const editor = createEditorHandler?.(currentPage) || null;
+
+    if (editor) {
+      const pageMeta = currentWorkspace.meta.pageMetas.find(
+        p => p.id === currentPage.id
+      );
+      if (pageMeta?.mode) {
+        editor.mode = pageMeta.mode as 'page' | 'edgeless' | undefined;
+      }
+      if (pageMeta?.trash) {
+        editor.readonly = true;
+      }
+    }
+
+    return editor;
+  };
+
+  const setEditor = useRef<(editor: AppStateValue['editor']) => void>();
+
+  setEditor.current = (editor: AppStateValue['editor']) => {
+    setState(state => ({ ...state, editor }));
+  };
+
+  const context = useMemo(
+    () => ({
+      ...state,
+      setState,
+      createEditor,
+      setEditor,
+      loadWorkspace: loadWorkspace.current,
+      loadPage: loadPage.current,
+    }),
+    [state, setState, loadPage, loadWorkspace]
+  );
+
+  return (
+    <AppState.Provider value={context}>
+      <DynamicBlocksuite setCreateEditorHandler={setCreateEditorHandler} />
+      {children}
+    </AppState.Provider>
+  );
+};

packages/app/src/providers/app-state-provider3/index.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './interface';

packages/app/src/providers/app-state-provider3/interface.ts

@@ -0,0 +1,17 @@
+import { PageMeta as OriginalPageMeta } from '@blocksuite/store/dist/workspace/workspace';
+
+// export type PageMeta = {
+//   favorite: boolean;
+//   trash: boolean;
+//   trashDate: number | void;
+//   updatedDate: number | void;
+//   mode: EditorContainer['mode'];
+// } & OriginalPageMeta;
+
+export interface PageMeta extends OriginalPageMeta {
+  favorite: boolean;
+  trash: boolean;
+  trashDate: number;
+  updatedDate: number;
+  mode: 'edgeless' | 'page';
+}