fix: public workspace loading (#1144)

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

@@ -1,36 +0,0 @@
-import { WorkspaceUnit } from '@affine/datacenter';
-import { dataCenterPromise } from '@affine/store';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-
-export function useLoadPublicWorkspace(workspaceId: string) {
-  const router = useRouter();
-  const [workspace, setWorkspace] = useState<WorkspaceUnit | null>();
-  const [status, setStatus] = useState<'loading' | 'error' | 'success'>(
-    'loading'
-  );
-
-  useEffect(() => {
-    setStatus('loading');
-
-    const init = async () => {
-      const dataCenter = await dataCenterPromise;
-
-      dataCenter
-        .loadPublicWorkspace(workspaceId)
-        .then(data => {
-          setWorkspace(data);
-          setStatus('success');
-        })
-        .catch(() => {
-          // if (!cancel) {
-          //   router.push('/404');
-          // }
-          setStatus('error');
-        });
-    };
-    init();
-  }, [router, workspaceId]);
-
-  return { status, workspace };
-}

apps/web/src/pages/_app.tsx

@@ -7,15 +7,13 @@ import '@affine/i18n';
 
 import { useTranslation } from '@affine/i18n';
 import { DataCenterPreloader } from '@affine/store';
-import { NoSsr } from '@mui/material';
 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 { useRouter } from 'next/router';
+import type { ReactElement, ReactNode } from 'react';
-import type { PropsWithChildren, ReactElement, ReactNode } from 'react';
+import { Suspense } from 'react';
-import { Suspense, useEffect } from 'react';
 import React from 'react';
 
 import { PageLoading } from '@/components/loading';
@@ -37,16 +35,9 @@ 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;
@@ -73,35 +64,16 @@ const App = ({ Component, pageProps }: AppPropsWithLayout) => {
           <ConfirmProvider key="ConfirmProvider" />,
         ]}
       >
-        <NoSsr>
+        <Suspense fallback={<PageLoading />}>
-          {NoNeedAppStatePageList.includes(router.route) ? (
+          <DataCenterPreloader>
-            getLayout(<Component {...pageProps} />)
+            <MessageCenterHandler>
-          ) : (
+              {getLayout(<Component {...pageProps} />)}
-            <Suspense fallback={<PageLoading />}>
+            </MessageCenterHandler>
-              <DataCenterPreloader>
+          </DataCenterPreloader>
-                <MessageCenterHandler>
+        </Suspense>
-                  <AppDefender>
-                    {getLayout(<Component {...pageProps} />)}
-                  </AppDefender>
-                </MessageCenterHandler>
-              </DataCenterPreloader>
-            </Suspense>
-          )}
-        </NoSsr>
       </ProviderComposer>
     </>
   );
 };
 
-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,7 +1,15 @@
 import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+import { PageLoading } from '@/components/loading';
 
 const Home: NextPage = () => {
-  return <div title="Home Page"></div>;
+  const router = useRouter();
+  useEffect(() => {
+    router.replace('/workspace');
+  }, [router]);
+  return <PageLoading />;
 };
 
 export default Home;

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

@@ -2,6 +2,7 @@ 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';
@@ -10,7 +11,6 @@ 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,13 +21,17 @@ const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
 
 const Page: NextPageWithLayout = () => {
   const router = useRouter();
-  const { workspaceId, pageId } = router.query as Record<string, string>;
+  const { workspaceId, pageId } = router.query;
-  const { status, workspace: workspaceUnit } =
+  const { error, workspace: workspaceUnit } = useDataCenterPublicWorkspace(
-    useLoadPublicWorkspace(workspaceId);
+    typeof workspaceId === 'string' ? workspaceId : null
+  );
   const { triggerQuickSearchModal } = useModal();
   const { t } = useTranslation();
 
   const page = useMemo(() => {
+    if (typeof pageId !== 'string') {
+      return null;
+    }
     if (workspaceUnit?.blocksuiteWorkspace) {
       return workspaceUnit.blocksuiteWorkspace.getPage(pageId);
     }
@@ -46,18 +50,15 @@ const Page: NextPageWithLayout = () => {
   }, [workspace, router, pageId]);
 
   useEffect(() => {
-    if (status === 'error') {
+    if (error) {
       router.push('/404');
     }
-  }, [router, status]);
+  }, [router, error]);
 
-  if (status === 'loading') {
+  if (!workspace) {
     return <PageLoading />;
   }
 
-  if (status === 'error') {
-    return null;
-  }
   return (
     <PageContainer>
       <NavContainer>
@@ -86,7 +87,7 @@ const Page: NextPageWithLayout = () => {
         </SearchButton>
       </NavContainer>
 
-      {workspace && page && (
+      {page && (
         <DynamicBlocksuite
           page={page}
           workspace={workspace}

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

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

packages/store/src/app/datacenter/index.tsx

@@ -129,6 +129,19 @@ export function useDataCenterWorkspace(
   return data ?? null;
 }
 
+export function useDataCenterPublicWorkspace(workspaceId: string | null) {
+  const { data, error } = useSWR<WorkspaceUnit | null>(
+    ['datacenter', workspaceId, 'public'],
+    {
+      fallbackData: null,
+    }
+  );
+  return {
+    workspace: data ?? null,
+    error,
+  } as const;
+}
+
 export function DataCenterPreloader({ children }: React.PropsWithChildren) {
   const api = useGlobalStateApi();
   //# region effect for updating workspace page list

packages/store/src/app/index.tsx

@@ -84,7 +84,9 @@ export const useGlobalState: UseBoundStore<Store> = ((
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) as any;
 
-export type DataKey = ['datacenter', string | null] | ['datacenter'];
+export type DataKey =
+  | ['datacenter', string | null, 'public' | undefined]
+  | ['datacenter'];
 
 const swrFetcher = async (keys: DataKey) => {
   assertEquals(keys[0], 'datacenter');
@@ -100,6 +102,9 @@ const swrFetcher = async (keys: DataKey) => {
       return null;
     }
     const dataCenter = await dataCenterPromise;
+    if (keys[2] === 'public') {
+      return dataCenter.loadPublicWorkspace(keys[1]);
+    }
     return dataCenter.loadWorkspace(keys[1]);
   }
 };

packages/store/src/index.ts

@@ -4,5 +4,6 @@ export { createDefaultWorkspace, DataCenterPreloader } from './app/datacenter';
 export {
   dataCenterPromise,
   useDataCenter,
+  useDataCenterPublicWorkspace,
   useDataCenterWorkspace,
 } from './app/datacenter';