revert: loadWorkspace unexpected behavior (#1172)

apps/web/src/pages/_app.tsx

@@ -6,22 +6,24 @@ import '../utils/print-build-info';
 import '@affine/i18n';
 
 import { useTranslation } from '@affine/i18n';
-import { DataCenterPreloader } from '@affine/store';
 import { Logger } from '@toeverything/pathfinder-logger';
 import type { NextPage } from 'next';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 // import AppStateProvider2 from '@/providers/app-state-provider2/provider';
-import type { ReactElement, ReactNode } from 'react';
-import { Suspense } from 'react';
+import { useRouter } from 'next/router';
+import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { Suspense, useEffect } from 'react';
 import React from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { MessageCenterHandler } from '@/components/message-center-handler';
 import ProviderComposer from '@/components/provider-composer';
+import { AppStateProvider } from '@/providers/app-state-provider';
 import ConfirmProvider from '@/providers/ConfirmProvider';
 import { ThemeProvider } from '@/providers/ThemeProvider';
 import { GlobalAppProvider } from '@/store/app';
+import { DataCenterPreloader } from '@/store/app/datacenter';
 import { ModalProvider } from '@/store/globalModal';
 
 export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<
@@ -35,9 +37,16 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+// Page list which do not rely on app state
+const NoNeedAppStatePageList = [
+  '/404',
+  '/public-workspace/[workspaceId]',
+  '/public-workspace/[workspaceId]/[pageId]',
+];
 const App = ({ Component, pageProps }: AppPropsWithLayout) => {
   const getLayout = Component.getLayout || (page => page);
   const { i18n } = useTranslation();
+  const router = useRouter();
 
   React.useEffect(() => {
     document.documentElement.lang = i18n.language;
@@ -56,24 +65,43 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
         <title>AFFiNE</title>
       </Head>
       <Logger />
-      <ProviderComposer
-        contexts={[
-          <GlobalAppProvider key="GlobalAppProvider" />,
-          <ThemeProvider key="ThemeProvider" />,
-          <ModalProvider key="ModalProvider" />,
-          <ConfirmProvider key="ConfirmProvider" />,
-        ]}
-      >
-        <Suspense fallback={<PageLoading />}>
-          <DataCenterPreloader>
-            <MessageCenterHandler>
-              {getLayout(<Component {...pageProps} />)}
-            </MessageCenterHandler>
-          </DataCenterPreloader>
-        </Suspense>
-      </ProviderComposer>
+      <GlobalAppProvider key="BlockSuiteProvider">
+        <ProviderComposer
+          contexts={[
+            <ThemeProvider key="ThemeProvider" />,
+            <AppStateProvider key="appStateProvider" />,
+            <ModalProvider key="ModalProvider" />,
+            <ConfirmProvider key="ConfirmProvider" />,
+          ]}
+        >
+          {NoNeedAppStatePageList.includes(router.route) ? (
+            getLayout(<Component {...pageProps} />)
+          ) : (
+            <Suspense fallback={<PageLoading />}>
+              <DataCenterPreloader>
+                <MessageCenterHandler>
+                  <AppDefender>
+                    {getLayout(<Component {...pageProps} />)}
+                  </AppDefender>
+                </MessageCenterHandler>
+              </DataCenterPreloader>
+            </Suspense>
+          )}
+        </ProviderComposer>
+      </GlobalAppProvider>
     </>
   );
 };
 
+const AppDefender = ({ children }: PropsWithChildren) => {
+  const router = useRouter();
+  useEffect(() => {
+    if (['/index.html', '/'].includes(router.asPath)) {
+      router.replace('/workspace');
+    }
+  }, [router]);
+
+  return <>{children}</>;
+};
+
 export default App;

apps/web/src/pages/index.tsx

@@ -1,15 +1,7 @@
 import type { NextPage } from 'next';
-import { useRouter } from 'next/router';
-import { useEffect } from 'react';
-
-import { PageLoading } from '@/components/loading';
 
 const Home: NextPage = () => {
-  const router = useRouter();
-  useEffect(() => {
-    router.replace('/workspace');
-  }, [router]);
-  return <PageLoading />;
+  return <div title="Home Page"></div>;
 };
 
 export default Home;

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 { useDataCenter } from '@/store/app';
+import { useGlobalState } 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 = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
 
   useEffect(() => {
     const init = async () => {

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

@@ -2,7 +2,6 @@ import { displayFlex, styled } from '@affine/component';
 import { Breadcrumbs } from '@affine/component';
 import { IconButton } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
-import { useDataCenterPublicWorkspace } from '@affine/store';
 import { PaperIcon, SearchIcon } from '@blocksuite/icons';
 import dynamic from 'next/dynamic';
 import NextLink from 'next/link';
@@ -11,6 +10,7 @@ import { ReactElement, useEffect, useMemo } from 'react';
 
 import { PageLoading } from '@/components/loading';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
 import { useModal } from '@/store/globalModal';
 
 import type { NextPageWithLayout } from '../..//_app';
@@ -21,17 +21,13 @@ const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
 
 const Page: NextPageWithLayout = () => {
   const router = useRouter();
-  const { workspaceId, pageId } = router.query;
-  const { error, workspace: workspaceUnit } = useDataCenterPublicWorkspace(
-    typeof workspaceId === 'string' ? workspaceId : null
-  );
+  const { workspaceId, pageId } = router.query as Record<string, string>;
+  const { status, workspace: workspaceUnit } =
+    useLoadPublicWorkspace(workspaceId);
   const { triggerQuickSearchModal } = useModal();
   const { t } = useTranslation();
 
   const page = useMemo(() => {
-    if (typeof pageId !== 'string') {
-      return null;
-    }
     if (workspaceUnit?.blocksuiteWorkspace) {
       return workspaceUnit.blocksuiteWorkspace.getPage(pageId);
     }
@@ -50,15 +46,18 @@ const Page: NextPageWithLayout = () => {
   }, [workspace, router, pageId]);
 
   useEffect(() => {
-    if (error) {
+    if (status === 'error') {
       router.push('/404');
     }
-  }, [router, error]);
+  }, [router, status]);
 
-  if (!workspace) {
+  if (status === 'loading') {
     return <PageLoading />;
   }
 
+  if (status === 'error') {
+    return null;
+  }
   return (
     <PageContainer>
       <NavContainer>
@@ -87,7 +86,7 @@ const Page: NextPageWithLayout = () => {
         </SearchButton>
       </NavContainer>
 
-      {page && (
+      {workspace && page && (
         <DynamicBlocksuite
           page={page}
           workspace={workspace}

apps/web/src/pages/public-workspace/[workspaceId]/index.tsx

@@ -1,5 +1,4 @@
 import { Breadcrumbs } from '@affine/component';
-import { PageMeta, useDataCenterPublicWorkspace } from '@affine/store';
 import { SearchIcon } from '@blocksuite/icons';
 import { useRouter } from 'next/router';
 import { ReactElement, useEffect, useMemo } from 'react';
@@ -7,6 +6,8 @@ import { ReactElement, useEffect, useMemo } from 'react';
 import { PageLoading } from '@/components/loading';
 import { PageList } from '@/components/page-list';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
+import { useLoadPublicWorkspace } from '@/hooks/use-load-public-workspace';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useModal } from '@/store/globalModal';
 
 import {
@@ -19,10 +20,8 @@ import {
 const All = () => {
   const router = useRouter();
   const { triggerQuickSearchModal } = useModal();
-  const { workspace, error } = useDataCenterPublicWorkspace(
-    typeof router.query.workspaceId === 'string'
-      ? router.query.workspaceId
-      : null
+  const { status, workspace } = useLoadPublicWorkspace(
+    router.query.workspaceId as string
   );
 
   const pageList = useMemo(() => {
@@ -32,15 +31,19 @@ const All = () => {
   const workspaceName = workspace?.blocksuiteWorkspace?.meta.name;
 
   useEffect(() => {
-    if (error) {
+    if (status === 'error') {
       router.push('/404');
     }
-  }, [router, error]);
+  }, [router, status]);
 
-  if (!workspace) {
+  if (status === 'loading') {
     return <PageLoading />;
   }
 
+  if (status === 'error') {
+    return null;
+  }
+
   return (
     <PageContainer>
       <NavContainer>

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 { useDataCenter, useGlobalState, useGlobalStateApi } from '@/store/app';
+import { 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 = useDataCenter();
+  const dataCenter = useGlobalState(store => store.dataCenter);
   const { createPage } = usePageHelper();
 
   useEffect(() => {

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

@@ -1,48 +1,44 @@
 import { useRouter } from 'next/router';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { PageLoading } from '@/components/loading';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
 import usePageHelper from '@/hooks/use-page-helper';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import { useGlobalState } from '@/store/app';
 
 const WorkspaceIndex = () => {
   const router = useRouter();
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
   const { createPage } = usePageHelper();
+  const { workspaceLoaded, activeWorkspaceId } = useEnsureWorkspace();
 
   useEffect(() => {
-    if (!exist) {
-      router.push('/404');
-      return;
-    }
-    const abortController = new AbortController();
     const initPage = async () => {
-      if (abortController.signal.aborted) {
-        return;
-      }
-      if (!targetWorkspace) {
+      if (!workspaceLoaded) {
         return;
       }
       const savedPageId =
-        targetWorkspace.blocksuiteWorkspace?.meta.pageMetas.find(
+        currentWorkspace?.blocksuiteWorkspace?.meta.pageMetas.find(
           meta => !meta.trash
         )?.id;
       if (savedPageId) {
-        router.replace(`/workspace/${targetWorkspace.id}/${savedPageId}`);
+        router.replace(`/workspace/${activeWorkspaceId}/${savedPageId}`);
         return;
-      } else {
-        const pageId = await createPage();
-        if (abortController.signal.aborted) {
-          return;
-        }
-        router.replace(`/workspace/${targetWorkspace.id}/${pageId}`);
       }
+
+      const pageId = await createPage();
+      router.replace(`/workspace/${activeWorkspaceId}/${pageId}`);
     };
     initPage();
-    return () => {
-      abortController.abort();
-    };
-  }, [targetWorkspace, createPage, router, exist]);
+  }, [
+    currentWorkspace,
+    createPage,
+    router,
+    workspaceLoaded,
+    activeWorkspaceId,
+  ]);
 
   return <PageLoading />;
 };

apps/web/src/pages/workspace/index.tsx

@@ -1,31 +1,23 @@
-import { useGlobalStateApi } from '@affine/store';
 import { useRouter } from 'next/router';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect } from 'react';
 
 import { PageLoading } from '@/components/loading';
-import { useRouterTargetWorkspace } from '@/hooks/use-router-target-workspace';
+import useEnsureWorkspace from '@/hooks/use-ensure-workspace';
+import { useGlobalState } from '@/store/app';
 
 export const WorkspaceIndex = () => {
   const router = useRouter();
-  const api = useGlobalStateApi();
-  const { targetWorkspace, exist } = useRouterTargetWorkspace();
-  const onceRef = useRef(true);
+  const currentWorkspace = useGlobalState(
+    useCallback(store => store.currentDataCenterWorkspace, [])
+  );
+  const { workspaceLoaded } = useEnsureWorkspace();
+
   useEffect(() => {
-    if (!onceRef.current) {
-      return;
+    if (workspaceLoaded) {
+      router.push(`/workspace/${currentWorkspace?.id}`);
     }
-    onceRef.current = true;
-    if (!exist) {
-      router.push('/404');
-    } else if (targetWorkspace) {
-      api
-        .getState()
-        .loadWorkspace(targetWorkspace.id)
-        .then(() => {
-          router.push(`/workspace/${targetWorkspace.id}`);
-        });
-    }
-  }, [targetWorkspace, exist, router, api]);
+  }, [currentWorkspace, router, workspaceLoaded]);
+
   return <PageLoading />;
 };