revert: loadWorkspace unexpected behavior (#1172)

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 { useDataCenter, useGlobalState } from '@/store/app';
+import { 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 = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const currentWorkspace = useGlobalState(
     useCallback(store => store.currentDataCenterWorkspace, [])
   );

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

@@ -2,9 +2,10 @@ import { styled } from '@affine/component';
 import { Modal, ModalCloseButton, ModalWrapper } from '@affine/component';
 import { Button } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { useGlobalState } from '@affine/store';
 import { useState } from 'react';
 
+import { useAppState } from '@/providers/app-state-provider';
+
 import { Check, UnCheck } from './icon';
 interface LoginModalProps {
   open: boolean;
@@ -13,7 +14,7 @@ interface LoginModalProps {
 
 export const LogoutModal = ({ open, onClose }: LoginModalProps) => {
   const [localCache, setLocalCache] = useState(true);
-  const blobDataSynced = useGlobalState(store => store.blobDataSynced);
+  const { blobDataSynced } = useAppState();
   const { t } = useTranslation();
 
   return (

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, useEffect } from 'react';
+import { ReactNode, useCallback, useEffect } from 'react';
 
-import { useDataCenter } from '@/store/app';
+import { useGlobalState } from '@/store/app';
 
 export function MessageCenterHandler({ children }: { children?: ReactNode }) {
   const router = useRouter();
-  const dataCenter = useDataCenter();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
   useEffect(() => {
     const instance = MessageCenter.getInstance();
     if (instance) {

apps/web/src/components/page-list/DateCell.tsx

@@ -1,9 +1,10 @@
 import { TableCell } from '@affine/component';
-import type { PageMeta } from '@affine/store';
 import dayjs from 'dayjs';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 import React from 'react';
 
+import { PageMeta } from '@/providers/app-state-provider';
+
 dayjs.extend(localizedFormat);
 
 export const DateCell = ({

apps/web/src/components/page-list/OperationCell.tsx

@@ -7,7 +7,6 @@ import {
 } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { PageMeta } from '@affine/store';
 import {
   DeleteForeverIcon,
   FavouritedIcon,
@@ -19,6 +18,7 @@ import {
 } from '@blocksuite/icons';
 
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useConfirm } from '@/providers/ConfirmProvider';
 
 export const OperationCell = ({ pageMeta }: { pageMeta: PageMeta }) => {

apps/web/src/components/page-list/index.tsx

@@ -10,7 +10,6 @@ import { IconButton } from '@affine/component';
 import { Tooltip } from '@affine/component';
 import { toast } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { PageMeta } from '@affine/store';
 import {
   EdgelessIcon,
   FavouritedIcon,
@@ -22,6 +21,7 @@ import React, { useCallback } from 'react';
 
 import DateCell from '@/components/page-list/DateCell';
 import { usePageHelper } from '@/hooks/use-page-helper';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useTheme } from '@/providers/ThemeProvider';
 import { useGlobalState } from '@/store/app';
 

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

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

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

@@ -1,14 +1,18 @@
-import { useGlobalState } from '@affine/store';
 import { useRouter } from 'next/router';
-import { PropsWithChildren, useEffect } from 'react';
+import { PropsWithChildren } from 'react';
 
 import HelpIsland from '@/components/help-island';
 import { WorkSpaceSliderBar } from '@/components/workspace-slider-bar';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 
 import { PageLoading } from '../loading';
 import { StyledPage, StyledToolWrapper, StyledWrapper } from './styles';
 
+export const WorkspaceDefender = ({ children }: PropsWithChildren) => {
+  const { workspaceLoaded } = useEnsureWorkspace();
+  return <>{workspaceLoaded ? children : <PageLoading />}</>;
+};
+
 export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
   const router = useRouter();
 
@@ -31,22 +35,10 @@ export const WorkspaceLayout = ({ children }: PropsWithChildren) => {
 };
 
 export const Layout = ({ children }: PropsWithChildren) => {
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
-  const router = useRouter();
-  const loadWorkspace = useGlobalState(store => store.loadWorkspace);
-  useEffect(() => {
-    if (!exist) {
-      router.replace('/404');
-    }
-  }, [exist, router]);
-  useEffect(() => {
-    if (exist && targetWorkspace) {
-      loadWorkspace(targetWorkspace.id);
-    }
-  }, [exist, loadWorkspace, targetWorkspace]);
-  if (!targetWorkspace) {
-    return <PageLoading />;
-  }
-  return <WorkspaceLayout>{children}</WorkspaceLayout>;
+  return (
+    <WorkspaceDefender>
+      <WorkspaceLayout>{children}</WorkspaceLayout>
+    </WorkspaceDefender>
+  );
 };
 export default Layout;

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 { useDataCenter, useGlobalState } from '@/store/app';
+import { 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 = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const router = useRouter();
   const { t } = useTranslation();
   const [loginOpen, setLoginOpen] = useState(false);

apps/web/src/components/workspace-setting/general/leave/Leave.tsx

@@ -11,6 +11,8 @@ import {
   StyledModalWrapper,
   StyledTextContent,
 } from './style';
+// import { getDataCenter } from '@affine/datacenter';
+// import { useAppState } from '@/providers/app-state-provider';
 
 interface WorkspaceDeleteProps {
   open: boolean;

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 { useDataCenter, useGlobalState } from '@/store/app';
+import { 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 = useDataCenter();
+  const dataCenter = useGlobalState(useCallback(store => store.dataCenter, []));
 
   if (dataCenter.workspaces.length === 0) {
     setWorkspaceListShow(true);