refactor: extract useBlockSuite from useAppState (#1001)

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

@@ -1,19 +1,23 @@
 import { useCallback, useEffect, useState } from 'react';
-import { useAppState, PageMeta } from '@/providers/app-state-provider';
+import { PageMeta } from '@/providers/app-state-provider';
+import { useBlockSuite } from '@/store/workspace';
 
 export const useCurrentPageMeta = (): PageMeta | null => {
-  const { currentPage, currentWorkspace } = useAppState();
+  const currentPage = useBlockSuite(store => store.currentPage);
+  const currentBlockSuiteWorkspace = useBlockSuite(
+    store => store.currentWorkspace
+  );
 
   const pageMetaHandler = useCallback((): PageMeta | null => {
-    if (!currentPage || !currentWorkspace) {
+    if (!currentPage || !currentBlockSuiteWorkspace) {
       return null;
     }
     return (
-      (currentWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
+      (currentBlockSuiteWorkspace.meta.pageMetas.find(
         p => p.id === currentPage.id
       ) as PageMeta) ?? null
     );
-  }, [currentPage, currentWorkspace]);
+  }, [currentPage, currentBlockSuiteWorkspace]);
 
   const [currentPageMeta, setCurrentPageMeta] = useState<PageMeta | null>(
     pageMetaHandler
@@ -22,16 +26,14 @@ export const useCurrentPageMeta = (): PageMeta | null => {
   useEffect(() => {
     setCurrentPageMeta(pageMetaHandler);
 
-    const dispose = currentWorkspace?.blocksuiteWorkspace?.meta.pagesUpdated.on(
-      () => {
-        setCurrentPageMeta(pageMetaHandler);
-      }
-    ).dispose;
+    const dispose = currentBlockSuiteWorkspace?.meta.pagesUpdated.on(() => {
+      setCurrentPageMeta(pageMetaHandler);
+    }).dispose;
 
     return () => {
       dispose?.();
     };
-  }, [currentPage, currentWorkspace, pageMetaHandler]);
+  }, [currentPage, currentBlockSuiteWorkspace, pageMetaHandler]);
 
   return currentPageMeta;
 };

apps/web/src/hooks/use-history-update.ts

@@ -1,13 +1,12 @@
 import { Page } from '@blocksuite/store';
-import { useAppState } from '@/providers/app-state-provider';
 import { useEffect, useRef } from 'react';
+import { useBlockSuite } from '@/store/workspace';
 
 export type EventCallBack<T> = (callback: (props: T) => void) => void;
 export type UseHistoryUpdated = (page?: Page) => EventCallBack<Page>;
 
 export const useHistoryUpdate: UseHistoryUpdated = () => {
-  const { currentPage } = useAppState();
-
+  const currentPage = useBlockSuite(store => store.currentPage);
   const callbackQueue = useRef<((page: Page) => void)[]>([]);
 
   useEffect(() => {

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

@@ -5,6 +5,7 @@ import { EditorContainer } from '@blocksuite/editor';
 import { useChangePageMeta } from '@/hooks/use-change-page-meta';
 import { useRouter } from 'next/router';
 import { WorkspaceUnit } from '@affine/datacenter';
+import { useBlockSuite } from '@/store/workspace';
 
 export type EditorHandlers = {
   createPage: (params?: {
@@ -39,7 +40,8 @@ const getPageMeta = (workspace: WorkspaceUnit | null, pageId: string) => {
 export const usePageHelper = (): EditorHandlers => {
   const router = useRouter();
   const changePageMeta = useChangePageMeta();
-  const { currentWorkspace, editor } = useAppState();
+  const editor = useBlockSuite(store => store.editor);
+  const { currentWorkspace } = useAppState();
 
   return {
     createPage: ({

apps/web/src/hooks/use-props-updated.ts

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { EditorContainer } from '@blocksuite/editor';
-import { useAppState } from '@/providers/app-state-provider';
+import { useBlockSuite } from '@/store/workspace';
 export type EventCallBack<T> = (callback: (props: T) => void) => void;
 
 export type UsePropsUpdated = (
@@ -8,7 +8,7 @@ export type UsePropsUpdated = (
 ) => EventCallBack<EditorContainer>;
 
 export const usePropsUpdated: UsePropsUpdated = () => {
-  const { editor } = useAppState();
+  const editor = useBlockSuite(store => store.editor);
 
   const callbackQueue = useRef<((editor: EditorContainer) => void)[]>([]);