refactor(component): make component pure (#5427)

packages/frontend/component/package.json

@@ -42,8 +42,6 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@toeverything/hooks": "workspace:*",
-    "@toeverything/infra": "workspace:*",
     "@toeverything/theme": "^0.7.24",
     "@vanilla-extract/dynamic": "^2.0.3",
     "bytes": "^3.1.2",

packages/frontend/component/src/components/app-sidebar/app-updater-button/index.tsx

@@ -1,17 +1,18 @@
 import { Unreachable } from '@affine/env/constant';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { CloseIcon, NewIcon, ResetIcon } from '@blocksuite/icons';
-import { useAppUpdater } from '@toeverything/hooks/use-app-updater';
 import clsx from 'clsx';
 import { useCallback, useMemo } from 'react';
 
 import { Tooltip } from '../../../ui/tooltip';
 import * as styles from './index.css';
 
-export interface AddPageButtonPureProps {
-  onClickUpdate: () => void;
-  onDismissCurrentChangelog: () => void;
-  currentChangelogUnread: boolean;
+export interface AddPageButtonProps {
+  onQuitAndInstall: () => void;
+  onDownloadUpdate: () => void;
+  onDismissChangelog: () => void;
+  onOpenChangelog: () => void;
+  changelogUnread: boolean;
   updateReady: boolean;
   updateAvailable: {
     version: string;
@@ -33,8 +34,8 @@ interface ButtonContentProps {
   autoDownload: boolean;
   downloadProgress: number | null;
   appQuitting: boolean;
-  currentChangelogUnread: boolean;
-  onDismissCurrentChangelog: () => void;
+  changelogUnread: boolean;
+  onDismissChangelog: () => void;
 }
 
 function DownloadUpdate({ updateAvailable }: ButtonContentProps) {
@@ -114,14 +115,14 @@ function OpenDownloadPage({ updateAvailable }: ButtonContentProps) {
   );
 }
 
-function WhatsNew({ onDismissCurrentChangelog }: ButtonContentProps) {
+function WhatsNew({ onDismissChangelog }: ButtonContentProps) {
   const t = useAFFiNEI18N();
   const onClickClose: React.MouseEventHandler = useCallback(
     e => {
-      onDismissCurrentChangelog();
+      onDismissChangelog();
       e.stopPropagation();
     },
-    [onDismissCurrentChangelog]
+    [onDismissChangelog]
   );
   return (
     <>
@@ -149,42 +150,76 @@ const getButtonContentRenderer = (props: ButtonContentProps) => {
     }
   } else if (props.updateAvailable && !props.updateAvailable?.allowAutoUpdate) {
     return OpenDownloadPage;
-  } else if (props.currentChangelogUnread) {
+  } else if (props.changelogUnread) {
     return WhatsNew;
   }
   return null;
 };
 
-export function AppUpdaterButtonPure({
+export function AppUpdaterButton({
   updateReady,
-  onClickUpdate,
-  onDismissCurrentChangelog,
-  currentChangelogUnread,
+  changelogUnread,
+  onDismissChangelog,
+  onDownloadUpdate,
+  onQuitAndInstall,
+  onOpenChangelog,
   updateAvailable,
   autoDownload,
   downloadProgress,
   appQuitting,
   className,
   style,
-}: AddPageButtonPureProps) {
+}: AddPageButtonProps) {
+  const handleClick = useCallback(() => {
+    if (updateReady) {
+      onQuitAndInstall();
+    } else if (updateAvailable) {
+      if (updateAvailable.allowAutoUpdate) {
+        if (autoDownload) {
+          // wait for download to finish
+        } else {
+          onDownloadUpdate();
+        }
+      } else {
+        window.open(
+          `https://github.com/toeverything/AFFiNE/releases/tag/v${updateAvailable.version}`,
+          '_blank'
+        );
+      }
+    } else if (changelogUnread) {
+      window.open(runtimeConfig.changelogUrl, '_blank');
+      onOpenChangelog();
+    } else {
+      throw new Unreachable();
+    }
+  }, [
+    updateReady,
+    updateAvailable,
+    changelogUnread,
+    onQuitAndInstall,
+    autoDownload,
+    onDownloadUpdate,
+    onOpenChangelog,
+  ]);
+
   const contentProps = useMemo(
     () => ({
       updateReady,
       updateAvailable,
-      currentChangelogUnread,
+      changelogUnread,
       autoDownload,
       downloadProgress,
       appQuitting,
-      onDismissCurrentChangelog,
+      onDismissChangelog,
     }),
     [
       updateReady,
       updateAvailable,
-      currentChangelogUnread,
+      changelogUnread,
       autoDownload,
       downloadProgress,
       appQuitting,
-      onDismissCurrentChangelog,
+      onDismissChangelog,
     ]
   );
 
@@ -222,6 +257,10 @@ export function AppUpdaterButtonPure({
     updateReady,
   ]);
 
+  if (!updateAvailable && !changelogUnread) {
+    return null;
+  }
+
   return wrapWithTooltip(
     <button
       style={style}
@@ -229,7 +268,7 @@ export function AppUpdaterButtonPure({
       data-has-update={!!updateAvailable}
       data-updating={appQuitting}
       data-disabled={disabled}
-      onClick={onClickUpdate}
+      onClick={handleClick}
     >
       {ContentComponent ? <ContentComponent {...contentProps} /> : null}
       <div className={styles.particles} aria-hidden="true"></div>
@@ -238,77 +277,3 @@ export function AppUpdaterButtonPure({
     updateAvailable?.version
   );
 }
-
-// Although it is called an input, it is actually a button.
-export function AppUpdaterButton({
-  className,
-  style,
-}: {
-  className?: string;
-  style?: React.CSSProperties;
-}) {
-  const {
-    quitAndInstall,
-    appQuitting,
-    autoDownload,
-    downloadUpdate,
-    readChangelog,
-    changelogUnread,
-    updateReady,
-    updateAvailable,
-    downloadProgress,
-    currentVersion,
-  } = useAppUpdater();
-
-  const handleClickUpdate = useCallback(() => {
-    if (updateReady) {
-      quitAndInstall();
-    } else if (updateAvailable) {
-      if (updateAvailable.allowAutoUpdate) {
-        if (autoDownload) {
-          // wait for download to finish
-        } else {
-          downloadUpdate();
-        }
-      } else {
-        window.open(
-          `https://github.com/toeverything/AFFiNE/releases/tag/v${currentVersion}`,
-          '_blank'
-        );
-      }
-    } else if (changelogUnread) {
-      window.open(runtimeConfig.changelogUrl, '_blank');
-      readChangelog();
-    } else {
-      throw new Unreachable();
-    }
-  }, [
-    updateReady,
-    updateAvailable,
-    changelogUnread,
-    quitAndInstall,
-    autoDownload,
-    downloadUpdate,
-    currentVersion,
-    readChangelog,
-  ]);
-
-  if (!updateAvailable && !changelogUnread) {
-    return null;
-  }
-
-  return (
-    <AppUpdaterButtonPure
-      appQuitting={appQuitting}
-      autoDownload={autoDownload}
-      updateReady={!!updateReady}
-      onClickUpdate={handleClickUpdate}
-      onDismissCurrentChangelog={readChangelog}
-      currentChangelogUnread={changelogUnread}
-      updateAvailable={updateAvailable}
-      downloadProgress={downloadProgress}
-      className={className}
-      style={style}
-    />
-  );
-}

packages/frontend/component/src/components/card/workspace-card/index.tsx

@@ -3,8 +3,6 @@ import { WorkspaceFlavour } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { WorkspaceMetadata } from '@affine/workspace';
 import { CollaborationIcon, SettingsIcon } from '@blocksuite/icons';
-import { useWorkspaceBlobObjectUrl } from '@toeverything/hooks/use-workspace-blob';
-import { useWorkspaceInfo } from '@toeverything/hooks/use-workspace-info';
 import { useCallback } from 'react';
 
 import { Avatar } from '../../../ui/avatar';
@@ -72,6 +70,8 @@ export interface WorkspaceCardProps {
   onClick: (metadata: WorkspaceMetadata) => void;
   onSettingClick: (metadata: WorkspaceMetadata) => void;
   isOwner?: boolean;
+  avatar?: string;
+  name?: string;
 }
 
 export const WorkspaceCardSkeleton = () => {
@@ -96,11 +96,10 @@ export const WorkspaceCard = ({
   currentWorkspaceId,
   meta,
   isOwner = true,
+  name,
+  avatar,
 }: WorkspaceCardProps) => {
-  const information = useWorkspaceInfo(meta);
-  const avatarUrl = useWorkspaceBlobObjectUrl(meta, information?.avatar);
-
-  const name = information?.name ?? UNTITLED_WORKSPACE_NAME;
+  const displayName = name ?? UNTITLED_WORKSPACE_NAME;
   return (
     <StyledCard
       data-testid="workspace-card"
@@ -109,12 +108,10 @@ export const WorkspaceCard = ({
       }, [onClick, meta])}
       active={meta.id === currentWorkspaceId}
     >
-      <Avatar size={28} url={avatarUrl} name={name} colorfulFallback />
+      <Avatar size={28} url={avatar} name={name} colorfulFallback />
       <StyledWorkspaceInfo>
         <StyledWorkspaceTitleArea style={{ display: 'flex' }}>
-          <StyledWorkspaceTitle>
-            {information?.name ?? UNTITLED_WORKSPACE_NAME}
-          </StyledWorkspaceTitle>
+          <StyledWorkspaceTitle>{displayName}</StyledWorkspaceTitle>
 
           <StyledSettingLink
             size="small"

packages/frontend/component/src/components/page-list/__tests__/use-block-suite-page-preview.spec.ts

@@ -0,0 +1,69 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import 'fake-indexeddb/auto';
+
+import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
+import { assertExists } from '@blocksuite/global/utils';
+import type { Page } from '@blocksuite/store';
+import { Schema, Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
+import { renderHook } from '@testing-library/react';
+import { useAtomValue } from 'jotai';
+import { describe, expect, test, vi } from 'vitest';
+import { beforeEach } from 'vitest';
+
+import { useBlockSuitePagePreview } from '../use-block-suite-page-preview';
+let blockSuiteWorkspace: BlockSuiteWorkspace;
+
+const schema = new Schema();
+schema.register(AffineSchemas).register(__unstableSchemas);
+
+beforeEach(async () => {
+  vi.useFakeTimers({ toFake: ['requestIdleCallback'] });
+  blockSuiteWorkspace = new BlockSuiteWorkspace({ id: 'test', schema });
+  const initPage = async (page: Page) => {
+    await page.waitForLoaded();
+    expect(page).not.toBeNull();
+    assertExists(page);
+    const pageBlockId = page.addBlock('affine:page', {
+      title: new page.Text(''),
+    });
+    const frameId = page.addBlock('affine:note', {}, pageBlockId);
+    page.addBlock('affine:paragraph', {}, frameId);
+  };
+  await initPage(blockSuiteWorkspace.createPage({ id: 'page0' }));
+});
+
+describe('useBlockSuitePagePreview', () => {
+  test('basic', async () => {
+    const page = blockSuiteWorkspace.getPage('page0') as Page;
+    const id = page.addBlock(
+      'affine:paragraph',
+      {
+        text: new page.Text('Hello, world!'),
+      },
+      page.getBlockByFlavour('affine:note')[0].id
+    );
+    const hook = renderHook(() => useAtomValue(useBlockSuitePagePreview(page)));
+    expect(hook.result.current).toBe('Hello, world!');
+    page.transact(() => {
+      page.getBlockById(id)!.text!.insert('Test', 0);
+    });
+    await new Promise(resolve => setTimeout(resolve, 100));
+    hook.rerender();
+    expect(hook.result.current).toBe('TestHello, world!');
+
+    // Insert before
+    page.addBlock(
+      'affine:paragraph',
+      {
+        text: new page.Text('First block!'),
+      },
+      page.getBlockByFlavour('affine:note')[0].id,
+      0
+    );
+    await new Promise(resolve => setTimeout(resolve, 100));
+    hook.rerender();
+    expect(hook.result.current).toBe('First block! TestHello, world!');
+  });
+});

packages/frontend/component/src/components/page-list/page-content-preview.tsx

@@ -1,9 +1,10 @@
 import type { Workspace } from '@blocksuite/store';
-import { useBlockSuitePagePreview } from '@toeverything/hooks/use-block-suite-page-preview';
-import { useBlockSuiteWorkspacePage } from '@toeverything/hooks/use-block-suite-workspace-page';
 import { useAtomValue } from 'jotai';
 import { Suspense } from 'react';
 
+import { useBlockSuitePagePreview } from './use-block-suite-page-preview';
+import { useBlockSuiteWorkspacePage } from './use-block-suite-workspace-page';
+
 interface PagePreviewInnerProps {
   workspace: Workspace;
   pageId: string;

packages/frontend/component/src/components/page-list/use-block-suite-workspace-page.ts

@@ -0,0 +1,46 @@
+import { DebugLogger } from '@affine/debug';
+import { DisposableGroup } from '@blocksuite/global/utils';
+import type { Page, Workspace } from '@blocksuite/store';
+import { useEffect, useState } from 'react';
+
+const logger = new DebugLogger('use-block-suite-workspace-page');
+
+export function useBlockSuiteWorkspacePage(
+  blockSuiteWorkspace: Workspace,
+  pageId: string | null
+): Page | null {
+  const [page, setPage] = useState(
+    pageId ? blockSuiteWorkspace.getPage(pageId) : null
+  );
+
+  useEffect(() => {
+    const group = new DisposableGroup();
+    group.add(
+      blockSuiteWorkspace.slots.pageAdded.on(id => {
+        if (pageId === id) {
+          setPage(blockSuiteWorkspace.getPage(id));
+        }
+      })
+    );
+    group.add(
+      blockSuiteWorkspace.slots.pageRemoved.on(id => {
+        if (pageId === id) {
+          setPage(null);
+        }
+      })
+    );
+    return () => {
+      group.dispose();
+    };
+  }, [blockSuiteWorkspace, pageId]);
+
+  useEffect(() => {
+    if (page && !page.loaded) {
+      page.load().catch(err => {
+        logger.error('Failed to load page', err);
+      });
+    }
+  }, [page]);
+
+  return page;
+}

packages/frontend/component/src/components/workspace-list/index.tsx

@@ -24,21 +24,28 @@ export interface WorkspaceListProps {
   disabled?: boolean;
   currentWorkspaceId?: string | null;
   items: WorkspaceMetadata[];
-  onClick: (workspaceMetadata: WorkspaceMetadata) => void;
-  onSettingClick: (workspaceMetadata: WorkspaceMetadata) => void;
+  onClick: (workspace: WorkspaceMetadata) => void;
+  onSettingClick: (workspace: WorkspaceMetadata) => void;
   onDragEnd: (event: DragEndEvent) => void;
-  useIsWorkspaceOwner?: (workspaceMetadata: WorkspaceMetadata) => boolean;
+  useIsWorkspaceOwner: (workspaceMetadata: WorkspaceMetadata) => boolean;
+  useWorkspaceAvatar: (
+    workspaceMetadata: WorkspaceMetadata
+  ) => string | undefined;
+  useWorkspaceName: (
+    workspaceMetadata: WorkspaceMetadata
+  ) => string | undefined;
 }
 
 interface SortableWorkspaceItemProps extends Omit<WorkspaceListProps, 'items'> {
   item: WorkspaceMetadata;
-  useIsWorkspaceOwner?: (workspaceMetadata: WorkspaceMetadata) => boolean;
 }
 
 const SortableWorkspaceItem = ({
   disabled,
   item,
   useIsWorkspaceOwner,
+  useWorkspaceAvatar,
+  useWorkspaceName,
   currentWorkspaceId,
   onClick,
   onSettingClick,
@@ -59,6 +66,8 @@ const SortableWorkspaceItem = ({
     [disabled, transform, transition]
   );
   const isOwner = useIsWorkspaceOwner?.(item);
+  const avatar = useWorkspaceAvatar?.(item);
+  const name = useWorkspaceName?.(item);
   return (
     <div
       className={workspaceItemStyle}
@@ -74,6 +83,8 @@ const SortableWorkspaceItem = ({
         onClick={onClick}
         onSettingClick={onSettingClick}
         isOwner={isOwner}
+        name={name}
+        avatar={avatar}
       />
     </div>
   );

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/index.tsx

@@ -107,7 +107,7 @@ export const UserWithWorkspaceList = ({
         <SignInItem />
       )}
       <Divider size="thinner" />
-      <AFFiNEWorkspaceList workspaces={workspaces} onEventEnd={onEventEnd} />
+      <AFFiNEWorkspaceList onEventEnd={onEventEnd} />
       {workspaces.length > 0 ? <Divider size="thinner" /> : null}
       <AddWorkspace
         onAddWorkspace={onAddWorkspace}

packages/frontend/core/src/components/pure/workspace-slider-bar/user-with-workspace-list/workspace-list/index.tsx

@@ -4,8 +4,15 @@ import { WorkspaceList } from '@affine/component/workspace-list';
 import { WorkspaceFlavour, WorkspaceSubPath } from '@affine/env/workspace';
 import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import type { WorkspaceMetadata } from '@affine/workspace';
-import { currentWorkspaceAtom } from '@affine/workspace/atom';
+import {
+  currentWorkspaceAtom,
+  workspaceListAtom,
+} from '@affine/workspace/atom';
 import type { DragEndEvent } from '@dnd-kit/core';
+import {
+  useWorkspaceAvatar,
+  useWorkspaceName,
+} from '@toeverything/hooks/use-workspace-info';
 import { useAtomValue, useSetAtom } from 'jotai';
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { useSession } from 'next-auth/react';
@@ -54,6 +61,8 @@ const CloudWorkSpaceList = ({
         onSettingClick={onClickWorkspaceSetting}
         onDragEnd={onDragEnd}
         useIsWorkspaceOwner={useIsWorkspaceOwner}
+        useWorkspaceName={useWorkspaceName}
+        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
@@ -83,18 +92,21 @@ const LocalWorkspaces = ({
         onClick={onClickWorkspace}
         onSettingClick={onClickWorkspaceSetting}
         onDragEnd={onDragEnd}
+        useIsWorkspaceOwner={useIsWorkspaceOwner}
+        useWorkspaceName={useWorkspaceName}
+        useWorkspaceAvatar={useWorkspaceAvatar}
       />
     </div>
   );
 };
 
 export const AFFiNEWorkspaceList = ({
-  workspaces,
   onEventEnd,
 }: {
-  workspaces: WorkspaceMetadata[];
   onEventEnd?: () => void;
 }) => {
+  const workspaces = useAtomValue(workspaceListAtom);
+
   const setOpenCreateWorkspaceModal = useSetAtom(openCreateWorkspaceModalAtom);
 
   const { jumpToSubPath } = useNavigateHelper();

packages/frontend/core/src/components/root-app-sidebar/index.tsx

@@ -4,7 +4,6 @@ import {
   AppDownloadButton,
   AppSidebar,
   appSidebarOpenAtom,
-  AppUpdaterButton,
   CategoryDivider,
   MenuItem,
   MenuLinkItem,
@@ -49,6 +48,7 @@ import FavoriteList from '../pure/workspace-slider-bar/favorite/favorite-list';
 import { UserWithWorkspaceList } from '../pure/workspace-slider-bar/user-with-workspace-list';
 import { WorkspaceCard } from '../pure/workspace-slider-bar/workspace-card';
 import ImportPage from './import-page';
+import { UpdaterButton } from './updater-button';
 
 export type RootAppSidebarProps = {
   isPublicWorkspace: boolean;
@@ -299,7 +299,7 @@ export const RootAppSidebar = ({
         )}
       </SidebarScrollableContainer>
       <SidebarContainer>
-        {environment.isDesktop ? <AppUpdaterButton /> : <AppDownloadButton />}
+        {environment.isDesktop ? <UpdaterButton /> : <AppDownloadButton />}
         <div style={{ height: '4px' }} />
         <AddPageButton onClick={onClickNewPage} />
       </SidebarContainer>

packages/frontend/core/src/components/root-app-sidebar/updater-button.tsx

@@ -0,0 +1,21 @@
+import { AppUpdaterButton } from '@affine/component/app-sidebar/app-updater-button';
+import { useAppUpdater } from '@toeverything/hooks/use-app-updater';
+
+export const UpdaterButton = () => {
+  const appUpdater = useAppUpdater();
+
+  return (
+    <AppUpdaterButton
+      onQuitAndInstall={appUpdater.quitAndInstall}
+      onDownloadUpdate={appUpdater.downloadUpdate}
+      onDismissChangelog={appUpdater.dismissChangelog}
+      onOpenChangelog={appUpdater.openChangelog}
+      changelogUnread={appUpdater.changelogUnread}
+      updateReady={!!appUpdater.updateReady}
+      updateAvailable={appUpdater.updateAvailable}
+      autoDownload={appUpdater.autoDownload}
+      downloadProgress={appUpdater.downloadProgress}
+      appQuitting={appUpdater.appQuitting}
+    />
+  );
+};

packages/frontend/hooks/src/__tests__/index.spec.ts

@@ -8,11 +8,9 @@ import { assertExists } from '@blocksuite/global/utils';
 import type { Page } from '@blocksuite/store';
 import { Schema, Workspace as BlockSuiteWorkspace } from '@blocksuite/store';
 import { renderHook } from '@testing-library/react';
-import { useAtomValue } from 'jotai';
 import { describe, expect, test, vi } from 'vitest';
 import { beforeEach } from 'vitest';
 
-import { useBlockSuitePagePreview } from '../use-block-suite-page-preview';
 import { useBlockSuiteWorkspacePageTitle } from '../use-block-suite-workspace-page-title';
 
 let blockSuiteWorkspace: BlockSuiteWorkspace;
@@ -49,37 +47,3 @@ describe('useBlockSuiteWorkspacePageTitle', () => {
     expect(pageTitleHook.result.current).toBe('1');
   });
 });
-
-describe('useBlockSuitePagePreview', () => {
-  test('basic', async () => {
-    const page = blockSuiteWorkspace.getPage('page0') as Page;
-    const id = page.addBlock(
-      'affine:paragraph',
-      {
-        text: new page.Text('Hello, world!'),
-      },
-      page.getBlockByFlavour('affine:note')[0].id
-    );
-    const hook = renderHook(() => useAtomValue(useBlockSuitePagePreview(page)));
-    expect(hook.result.current).toBe('Hello, world!');
-    page.transact(() => {
-      page.getBlockById(id)!.text!.insert('Test', 0);
-    });
-    await new Promise(resolve => setTimeout(resolve, 100));
-    hook.rerender();
-    expect(hook.result.current).toBe('TestHello, world!');
-
-    // Insert before
-    page.addBlock(
-      'affine:paragraph',
-      {
-        text: new page.Text('First block!'),
-      },
-      page.getBlockByFlavour('affine:note')[0].id,
-      0
-    );
-    await new Promise(resolve => setTimeout(resolve, 100));
-    hook.rerender();
-    expect(hook.result.current).toBe('First block! TestHello, world!');
-  });
-});

packages/frontend/hooks/src/use-app-updater.ts

@@ -168,7 +168,12 @@ export const useAppUpdater = () => {
     [setSetting]
   );
 
-  const readChangelog = useAsyncCallback(async () => {
+  const openChangelog = useAsyncCallback(async () => {
+    window.open(runtimeConfig.changelogUrl, '_blank');
+    await setChangelogUnread(true);
+  }, [setChangelogUnread]);
+
+  const dismissChangelog = useAsyncCallback(async () => {
     await setChangelogUnread(true);
   }, [setChangelogUnread]);
 
@@ -183,7 +188,8 @@ export const useAppUpdater = () => {
     autoCheck: setting.autoCheckUpdate,
     autoDownload: setting.autoDownloadUpdate,
     changelogUnread,
-    readChangelog,
+    openChangelog,
+    dismissChangelog,
     updateReady,
     updateAvailable: useAtomValue(updateAvailableAtom),
     downloadProgress,

packages/frontend/hooks/src/use-block-suite-workspace-page.ts

@@ -1,112 +1,42 @@
 import { DebugLogger } from '@affine/debug';
-import { assertExists, DisposableGroup } from '@blocksuite/global/utils';
+import { DisposableGroup } from '@blocksuite/global/utils';
 import type { Page, Workspace } from '@blocksuite/store';
-import type { Atom } from 'jotai';
-import { atom, useAtomValue } from 'jotai';
-import PQueue from 'p-queue';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 const logger = new DebugLogger('use-block-suite-workspace-page');
 
-const weakMap = new WeakMap<Workspace, Map<string, Atom<Page | null>>>();
-
-const emptyAtom = atom<Page | null>(null);
-
-function getAtom(w: Workspace, pageId: string | null): Atom<Page | null> {
-  if (!pageId) {
-    return emptyAtom;
-  }
-  if (!weakMap.has(w)) {
-    weakMap.set(w, new Map());
-  }
-  const map = weakMap.get(w);
-  assertExists(map);
-  if (!map.has(pageId)) {
-    const baseAtom = atom(w.getPage(pageId));
-    baseAtom.onMount = set => {
-      const group = new DisposableGroup();
-      group.add(
-        w.slots.pageAdded.on(id => {
-          if (pageId === id) {
-            set(w.getPage(id));
-          }
-        })
-      );
-      group.add(
-        w.slots.pageRemoved.on(id => {
-          if (pageId === id) {
-            set(null);
-          }
-        })
-      );
-      return () => {
-        group.dispose();
-      };
-    };
-    map.set(pageId, baseAtom);
-    return baseAtom;
-  } else {
-    return map.get(pageId) as Atom<Page | null>;
-  }
-}
-// concurrently load 3 pages at most
-const CONCURRENT_JOBS = 3;
-
-const loadPageQueue = new PQueue({
-  concurrency: CONCURRENT_JOBS,
-});
-
-const loadedPages = new WeakSet<Page>();
-
-const awaitForIdle = () =>
-  new Promise(resolve =>
-    requestIdleCallback(resolve, {
-      timeout: 1000, // do not wait for too long
-    })
-  );
-
-const awaitForTimeout = (timeout: number) =>
-  new Promise(resolve => setTimeout(resolve, timeout));
-
-/**
- * Load a page and wait for it to be loaded
- * This page will be loaded in a queue so that it will not jam the network and browser CPU
- */
-export function loadPage(page: Page, priority = 0) {
-  if (loadedPages.has(page)) {
-    return Promise.resolve();
-  }
-  loadedPages.add(page);
-  return loadPageQueue.add(
-    async () => {
-      if (!page.loaded) {
-        await awaitForIdle();
-        await page.waitForLoaded();
-        logger.debug('page loaded', page.id);
-        // we do not know how long it takes to load a page here
-        // so that we just use 300ms timeout as the default page processing time
-        await awaitForTimeout(300);
-      } else {
-        // do nothing if it is already loaded
-      }
-    },
-    {
-      priority,
-    }
-  );
-}
-
 export function useBlockSuiteWorkspacePage(
   blockSuiteWorkspace: Workspace,
   pageId: string | null
 ): Page | null {
-  const pageAtom = getAtom(blockSuiteWorkspace, pageId);
-  assertExists(pageAtom);
-  const page = useAtomValue(pageAtom);
+  const [page, setPage] = useState(
+    pageId ? blockSuiteWorkspace.getPage(pageId) : null
+  );
+
+  useEffect(() => {
+    const group = new DisposableGroup();
+    group.add(
+      blockSuiteWorkspace.slots.pageAdded.on(id => {
+        if (pageId === id) {
+          setPage(blockSuiteWorkspace.getPage(id));
+        }
+      })
+    );
+    group.add(
+      blockSuiteWorkspace.slots.pageRemoved.on(id => {
+        if (pageId === id) {
+          setPage(null);
+        }
+      })
+    );
+    return () => {
+      group.dispose();
+    };
+  }, [blockSuiteWorkspace, pageId]);
 
   useEffect(() => {
     if (page && !page.loaded) {
-      loadPage(page).catch(err => {
+      page.load().catch(err => {
         logger.error('Failed to load page', err);
       });
     }

packages/frontend/hooks/src/use-workspace-info.ts

@@ -1,12 +1,11 @@
-import type { Workspace, WorkspaceMetadata } from '@affine/workspace';
+import type { WorkspaceMetadata } from '@affine/workspace';
 import { workspaceManagerAtom } from '@affine/workspace/atom';
 import { useAtomValue } from 'jotai';
 import { useEffect, useState } from 'react';
 
-export function useWorkspaceInfo(
-  meta: WorkspaceMetadata,
-  workspace?: Workspace
-) {
+import { useWorkspaceBlobObjectUrl } from './use-workspace-blob';
+
+export function useWorkspaceInfo(meta: WorkspaceMetadata) {
   const workspaceManager = useAtomValue(workspaceManagerAtom);
 
   const [information, setInformation] = useState(
@@ -20,7 +19,20 @@ export function useWorkspaceInfo(
     return information.onUpdated.on(info => {
       setInformation(info);
     }).dispose;
-  }, [meta, workspace, workspaceManager]);
+  }, [meta, workspaceManager]);
 
   return information;
 }
+
+export function useWorkspaceName(meta: WorkspaceMetadata) {
+  const information = useWorkspaceInfo(meta);
+
+  return information?.name;
+}
+
+export function useWorkspaceAvatar(meta: WorkspaceMetadata) {
+  const information = useWorkspaceInfo(meta);
+  const avatar = useWorkspaceBlobObjectUrl(meta, information?.avatar);
+
+  return avatar;
+}