refactor(store): move datacenter into global (#1118)

apps/web/src/components/enable-workspace-modal/index.tsx

@@ -4,7 +4,7 @@ import { CloseIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { useCallback, useState } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 
 import { Content, ContentTitle, Header, StyleButton, StyleTips } from './style';
 
@@ -20,7 +20,7 @@ export const EnableWorkspaceModal = ({
   const { t } = useTranslation();
   const login = useGlobalState(store => store.login);
   const user = useGlobalState(store => store.user);
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/components/message-center-handler/index.tsx

@@ -2,13 +2,13 @@ import { toast } from '@affine/component';
 import { MessageCenter } from '@affine/datacenter';
 import { AffineProvider } from '@affine/datacenter';
 import { useRouter } from 'next/router';
-import { ReactNode, useCallback, useEffect } from 'react';
+import { ReactNode, useEffect } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter } from '@/store/app';
 
 export function MessageCenterHandler({ children }: { children?: ReactNode }) {
   const router = useRouter();
-  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const dataCenter = useDataCenter();
   useEffect(() => {
     const instance = MessageCenter.getInstance();
     if (instance) {

apps/web/src/components/quick-search/PublishedResults.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from '@affine/i18n';
-import { PageMeta } from '@affine/store';
+import { PageMeta, useDataCenter } from '@affine/store';
 import { EdgelessIcon, PaperIcon } from '@blocksuite/icons';
 import { Workspace } from '@blocksuite/store';
 import { Command } from 'cmdk';
@@ -7,7 +7,6 @@ import { useRouter } from 'next/router';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import usePageHelper from '@/hooks/use-page-helper';
-import { useGlobalState } from '@/store/app';
 
 import { NoResultSVG } from './NoResultSVG';
 import { StyledListItem, StyledNotFound } from './style';
@@ -24,7 +23,7 @@ export const PublishedResults = (props: {
     props;
   const { search } = usePageHelper();
   const [results, setResults] = useState(new Map<string, string | undefined>());
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const router = useRouter();
   const [pageList, setPageList] = useState<PageMeta[]>([]);
   useEffect(() => {

apps/web/src/components/workspace-modal/index.tsx

@@ -5,7 +5,7 @@ import { HelpIcon, PlusIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 
 import { CreateWorkspaceModal } from '../create-workspace';
 import { LoginModal } from '../login-modal';
@@ -34,7 +34,7 @@ interface WorkspaceModalProps {
 export const WorkspaceModal = ({ open, onClose }: WorkspaceModalProps) => {
   const [createWorkspaceOpen, setCreateWorkspaceOpen] = useState(false);
   const logout = useGlobalState(store => store.logout);
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);

apps/web/src/components/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { WorkspaceModal } from '@/components/workspace-modal';
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 
 import { SelectorWrapper, WorkspaceName } from './styles';
 
@@ -11,7 +11,7 @@ export const WorkspaceSelector = () => {
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
-  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const dataCenter = useDataCenter();
 
   if (dataCenter.workspaces.length === 0) {
     setWorkspaceListShow(true);

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

@@ -2,13 +2,13 @@ import { assertEquals } from '@blocksuite/global/utils';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useState } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 
 // 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 dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
+  const dataCenter = useDataCenter();
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/hooks/use-load-public-workspace.ts

@@ -1,4 +1,5 @@
-import { getDataCenter, WorkspaceUnit } from '@affine/datacenter';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { dataCenterPromise } from '@affine/store';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -13,7 +14,7 @@ export function useLoadPublicWorkspace(workspaceId: string) {
     setStatus('loading');
 
     const init = async () => {
-      const dataCenter = await getDataCenter();
+      const dataCenter = await dataCenterPromise;
 
       dataCenter
         .loadPublicWorkspace(workspaceId)

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

@@ -1,9 +1,9 @@
 import { Member } from '@affine/datacenter';
 import { useCallback, useEffect, useState } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 export const useMembers = () => {
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

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

@@ -1,10 +1,10 @@
 import { WorkspaceUnit } from '@affine/datacenter';
 import { useCallback } from 'react';
 
-import { useGlobalState } from '@/store/app';
+import { useDataCenter, useGlobalState } from '@/store/app';
 
 export const useWorkspaceHelper = () => {
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

apps/web/src/pages/invite/[invite_code].tsx

@@ -11,7 +11,7 @@ import { useEffect, useState } from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { useWorkspaceHelper } from '@/hooks/use-workspace-helper';
-import { useGlobalState } from '@/store/app';
+import { useDataCenter } from '@/store/app';
 
 import inviteError from '../../../public/imgs/invite-error.svg';
 import inviteSuccess from '../../../public/imgs/invite-success.svg';
@@ -21,7 +21,7 @@ export default function DevPage() {
   const router = useRouter();
   const [inviteData, setInviteData] = useState<Permission | null>(null);
   const { acceptInvite } = useWorkspaceHelper();
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
 
   useEffect(() => {
     const init = async () => {

apps/web/src/pages/workspace/[workspaceId]/[pageId].tsx

@@ -15,7 +15,7 @@ import { EditorHeader } from '@/components/header';
 import MobileModal from '@/components/mobile-modal';
 import WorkspaceLayout from '@/components/workspace-layout';
 import { usePageHelper } from '@/hooks/use-page-helper';
-import { useGlobalState, useGlobalStateApi } from '@/store/app';
+import { useDataCenter, useGlobalState, useGlobalStateApi } from '@/store/app';
 import exampleMarkdown from '@/templates/Welcome-to-AFFiNE-Alpha-Downhills.md';
 
 import type { NextPageWithLayout } from '../..//_app';
@@ -109,7 +109,7 @@ const PageDefender = ({ children }: PropsWithChildren) => {
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );
-  const dataCenter = useGlobalState(store => store.dataCenter);
+  const dataCenter = useDataCenter();
   const { createPage } = usePageHelper();
 
   useEffect(() => {