fix: should show workspace avatar using blob url (#949)

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

@@ -0,0 +1,31 @@
+import { useAppState } from '@/providers/app-state-provider';
+import { WorkspaceUnit } from '@affine/datacenter';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+
+export function usePublicWorkspace(workspaceId: string) {
+  const { dataCenter } = useAppState();
+  const router = useRouter();
+  const [workspace, setWorkspace] = useState<WorkspaceUnit>();
+
+  useEffect(() => {
+    let cancel = false;
+    dataCenter
+      .loadPublicWorkspace(workspaceId)
+      .then(data => {
+        if (!cancel) {
+          setWorkspace(data);
+        }
+      })
+      .catch(() => {
+        if (!cancel) {
+          router.push('/404');
+        }
+      });
+    return () => {
+      cancel = true;
+    };
+  }, [router, workspaceId, dataCenter]);
+
+  return workspace;
+}

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

@@ -1,10 +1,8 @@
-import { ReactElement, useEffect, useState } from 'react';
+import { ReactElement, useEffect, useMemo, useState } from 'react';
-import { useAppState } from '@/providers/app-state-provider';
 import type { NextPageWithLayout } from '../..//_app';
 import { displayFlex, styled } from '@affine/component';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
-import { Page as PageStore, Workspace } from '@blocksuite/store';
 import { PageLoading } from '@/components/loading';
 import { Breadcrumbs } from '@affine/component';
 import { IconButton } from '@affine/component';
@@ -12,64 +10,58 @@ import NextLink from 'next/link';
 import { PaperIcon, SearchIcon } from '@blocksuite/icons';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
 import { useModal } from '@/store/globalModal';
+import { usePublicWorkspace } from '@/hooks/use-public-workspace';
+import { useTranslation } from '@affine/i18n';
 
 const DynamicBlocksuite = dynamic(() => import('@/components/editor'), {
   ssr: false,
 });
+
 const Page: NextPageWithLayout = () => {
-  const [workspace, setWorkspace] = useState<Workspace>();
-  const [page, setPage] = useState<PageStore>();
-  const { dataCenter } = useAppState();
   const router = useRouter();
+  const { workspaceId, pageId } = router.query as Record<string, string>;
+  const workspaceUnit = usePublicWorkspace(workspaceId);
   const [loaded, setLoaded] = useState(false);
-  const [workspaceName, setWorkspaceName] = useState('');
-  const [pageTitle, setPageTitle] = useState('');
   const { triggerQuickSearchModal } = useModal();
+  const { t } = useTranslation();
+
+  const page = useMemo(() => {
+    if (workspaceUnit?.blocksuiteWorkspace) {
+      return workspaceUnit.blocksuiteWorkspace.getPage(pageId);
+    }
+    return null;
+  }, [workspaceUnit, pageId]);
+
+  const workspace = workspaceUnit?.blocksuiteWorkspace;
+  const pageTitle = page?.meta.title;
+  const workspaceName = workspace?.meta.name;
 
   useEffect(() => {
-    dataCenter
+    const pageNotFound = workspace?.meta.pageMetas.every(p => p.id !== pageId);
-      .loadPublicWorkspace(router.query.workspaceId as string)
+    if (workspace && pageNotFound) {
-      .then(data => {
+      router.push('/404');
-        setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string);
+    }
-        if (data.blocksuiteWorkspace) {
+  }, [workspace, router, pageId]);
-          setWorkspace(data.blocksuiteWorkspace);
+
-          if (
-            router.query.pageId &&
-            data.blocksuiteWorkspace.meta.pageMetas.find(
-              p => p.id === router.query.pageId
-            )
-          ) {
-            const page = data.blocksuiteWorkspace.getPage(
-              router.query.pageId as string
-            );
-            page && setPageTitle(page.meta.title);
-            page && setPage(page);
-          } else {
-            router.push('/404');
-          }
-        }
-      })
-      .catch(() => {
-        router.push('/404');
-      });
-  }, [router, dataCenter]);
   return (
     <>
       {!loaded && <PageLoading />}
       <PageContainer>
         <NavContainer>
           <Breadcrumbs>
-            <StyledBreadcrumbs
+            <StyledBreadcrumbs href={`/public-workspace/${workspaceId}`}>
-              href={`/public-workspace/${router.query.workspaceId}`}
+              <WorkspaceUnitAvatar
-            >
+                size={24}
-              <WorkspaceUnitAvatar size={24} name={workspaceName} />
+                name={workspaceName}
+                workspaceUnit={workspaceUnit}
+              />
               <span>{workspaceName}</span>
             </StyledBreadcrumbs>
             <StyledBreadcrumbs
-              href={`/public-workspace/${router.query.workspaceId}/${router.query.pageId}`}
+              href={`/public-workspace/${workspaceId}/${pageId}`}
             >
               <PaperIcon fontSize={24} />
-              <span>{pageTitle ? pageTitle : 'Untitled'}</span>
+              <span>{pageTitle ? pageTitle : t('Untitled')}</span>
             </StyledBreadcrumbs>
           </Breadcrumbs>
           <SearchButton

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

@@ -1,35 +1,30 @@
 import { PageList } from '@/components/page-list';
-import { ReactElement, useEffect, useState } from 'react';
-import { PageMeta, useAppState } from '@/providers/app-state-provider';
-import { useRouter } from 'next/router';
-import {
-  PageContainer,
-  NavContainer,
-  StyledBreadcrumbs,
-  SearchButton,
-} from './[pageId]';
-import { Breadcrumbs } from '@affine/component';
 import { WorkspaceUnitAvatar } from '@/components/workspace-avatar';
-import { SearchIcon } from '@blocksuite/icons';
+import { usePublicWorkspace } from '@/hooks/use-public-workspace';
+import { PageMeta } from '@/providers/app-state-provider';
 import { useModal } from '@/store/globalModal';
-const All = () => {
+import { Breadcrumbs } from '@affine/component';
-  const { dataCenter } = useAppState();
+import { SearchIcon } from '@blocksuite/icons';
-  const router = useRouter();
+import { useRouter } from 'next/router';
-  const [pageList, setPageList] = useState<PageMeta[]>([]);
+import { ReactElement, useMemo } from 'react';
-  const [workspaceName, setWorkspaceName] = useState('');
+import {
-  const { triggerQuickSearchModal } = useModal();
+  NavContainer,
-  useEffect(() => {
+  PageContainer,
-    dataCenter
+  SearchButton,
-      .loadPublicWorkspace(router.query.workspaceId as string)
+  StyledBreadcrumbs,
-      .then(data => {
+} from './[pageId]';
-        setPageList(data.blocksuiteWorkspace?.meta.pageMetas as PageMeta[]);
-        setWorkspaceName(data.blocksuiteWorkspace?.meta.name as string);
-      })
-      .catch(() => {
-        router.push('/404');
-      });
-  }, [router, dataCenter]);
 
+const All = () => {
+  const router = useRouter();
+  const { triggerQuickSearchModal } = useModal();
+  const workspaceUnit = usePublicWorkspace(router.query.workspaceId as string);
+
+  const pageList = useMemo(() => {
+    return (workspaceUnit?.blocksuiteWorkspace?.meta.pageMetas ??
+      []) as PageMeta[];
+  }, [workspaceUnit]);
+
+  const workspaceName = workspaceUnit?.blocksuiteWorkspace?.meta.name;
   return (
     <PageContainer>
       <NavContainer>
@@ -37,7 +32,11 @@ const All = () => {
           <StyledBreadcrumbs
             href={`/public-workspace/${router.query.workspaceId}`}
           >
-            <WorkspaceUnitAvatar size={24} name={workspaceName} />
+            <WorkspaceUnitAvatar
+              size={24}
+              name={workspaceName}
+              workspaceUnit={workspaceUnit}
+            />
             <span>{workspaceName}</span>
           </StyledBreadcrumbs>
         </Breadcrumbs>