refactor(store): port to useGlobalState with zustand (#1012)

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

@@ -1,10 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 import { PageMeta } from '@/providers/app-state-provider';
-import { useBlockSuite } from '@/store/workspace';
+import { useGlobalState } from '@/store/app';
 
 export const useCurrentPageMeta = (): PageMeta | null => {
-  const currentPage = useBlockSuite(store => store.currentPage);
-  const currentBlockSuiteWorkspace = useBlockSuite(
+  const currentPage = useGlobalState(store => store.currentPage);
+  const currentBlockSuiteWorkspace = useGlobalState(
     store => store.currentWorkspace
   );
 

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

@@ -1,11 +1,13 @@
 import { useAppState } from '@/providers/app-state-provider';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+import { useGlobalState } from '@/store/app';
 // 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, loadWorkspace } = useAppState();
+  const dataCenter = useGlobalState(store => store.dataCenter);
+  const { loadWorkspace } = useAppState();
   const router = useRouter();
   const [activeWorkspaceId, setActiveWorkspaceId] = useState(
     router.query.workspaceId as string

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

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

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

@@ -1,8 +1,10 @@
 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, currentWorkspace } = useAppState();
+  const dataCenter = useGlobalState(store => store.dataCenter);
+  const { currentWorkspace } = useAppState();
   const [members, setMembers] = useState<Member[]>([]);
   const [loaded, setLoaded] = useState(false);
   const refreshMembers = useCallback(async () => {

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

@@ -5,7 +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';
+import { useGlobalState } from '@/store/app';
 
 export type EditorHandlers = {
   createPage: (params?: {
@@ -40,7 +40,7 @@ const getPageMeta = (workspace: WorkspaceUnit | null, pageId: string) => {
 export const usePageHelper = (): EditorHandlers => {
   const router = useRouter();
   const changePageMeta = useChangePageMeta();
-  const editor = useBlockSuite(store => store.editor);
+  const editor = useGlobalState(store => store.editor);
   const { currentWorkspace } = useAppState();
 
   return {

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef } from 'react';
 import { EditorContainer } from '@blocksuite/editor';
-import { useBlockSuite } from '@/store/workspace';
+import { useGlobalState } from '@/store/app';
 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 = useBlockSuite(store => store.editor);
+  const editor = useGlobalState(store => store.editor);
 
   const callbackQueue = useRef<((editor: EditorContainer) => void)[]>([]);
 

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

@@ -1,8 +1,10 @@
 import { useAppState } from '@/providers/app-state-provider';
 import { WorkspaceUnit } from '@affine/datacenter';
+import { useGlobalState } from '@/store/app';
 
 export const useWorkspaceHelper = () => {
-  const { dataCenter, currentWorkspace } = useAppState();
+  const dataCenter = useGlobalState(store => store.dataCenter);
+  const { currentWorkspace } = useAppState();
   const createWorkspace = async (name: string) => {
     const workspaceInfo = await dataCenter.createWorkspace({
       name: name,