feat: add hook useBlockSuiteWorkspaceName (#1281)

apps/web/src/components/pure/workspace-slider-bar/WorkspaceSelector/WorkspaceSelector.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import { useBlockSuiteWorkspaceName } from '../../../../hooks/use-blocksuite-workspace-name';
 import { RemWorkspace } from '../../../../shared';
 import { WorkspaceAvatar } from '../../workspace-avatar';
 import { SelectorWrapper, WorkspaceName } from './styles';
@@ -13,16 +14,9 @@ export const WorkspaceSelector: React.FC<WorkspaceSelectorProps> = ({
   currentWorkspace,
   onClick,
 }) => {
-  let name = 'Untitled Workspace';
-  if (currentWorkspace) {
-    if (currentWorkspace.flavour === 'affine') {
-      if (currentWorkspace.firstBinarySynced) {
-        name = currentWorkspace.blockSuiteWorkspace.meta.name;
-      }
-    } else if (currentWorkspace.flavour === 'local') {
-      name = currentWorkspace.blockSuiteWorkspace.meta.name;
-    }
-  }
+  const [name] = useBlockSuiteWorkspaceName(
+    currentWorkspace?.blockSuiteWorkspace ?? null
+  );
   return (
     <>
       <SelectorWrapper onClick={onClick} data-testid="current-workspace">

apps/web/src/hooks/__tests__/index.spec.tsx

@@ -15,6 +15,7 @@ import { beforeAll, beforeEach, describe, expect, test } from 'vitest';
 
 import { BlockSuiteWorkspace, RemWorkspaceFlavour } from '../../shared';
 import { useCurrentWorkspace } from '../current/use-current-workspace';
+import { useBlockSuiteWorkspaceName } from '../use-blocksuite-workspace-name';
 import { useLastOpenedWorkspace } from '../use-last-opened-workspace';
 import { usePageMeta, usePageMetaHelper } from '../use-page-meta';
 import { useSyncRouterWithCurrentWorkspaceAndPage } from '../use-sync-router-with-current-workspace-and-page';
@@ -178,3 +179,18 @@ describe('useLastOpenedWorkspace', () => {
     );
   });
 });
+
+describe('useBlockSuiteWorkspaceName', () => {
+  test('basic', async () => {
+    blockSuiteWorkspace.meta.setName('test 1');
+    const workspaceNameHook = renderHook(() =>
+      useBlockSuiteWorkspaceName(blockSuiteWorkspace)
+    );
+    expect(workspaceNameHook.result.current[0]).toBe('test 1');
+    blockSuiteWorkspace.meta.setName('test 2');
+    workspaceNameHook.rerender();
+    expect(workspaceNameHook.result.current[0]).toBe('test 2');
+    workspaceNameHook.result.current[1]('test 3');
+    expect(blockSuiteWorkspace.meta.name).toBe('test 3');
+  });
+});

apps/web/src/hooks/use-blocksuite-workspace-name.ts

@@ -0,0 +1,33 @@
+import { DEFAULT_WORKSPACE_NAME } from '@affine/env';
+import { assertExists } from '@blocksuite/store';
+import { useCallback, useEffect, useState } from 'react';
+
+import { BlockSuiteWorkspace } from '../shared';
+
+export function useBlockSuiteWorkspaceName(
+  blockSuiteWorkspace: BlockSuiteWorkspace | null
+) {
+  const [name, set] = useState(
+    () => blockSuiteWorkspace?.meta.name ?? DEFAULT_WORKSPACE_NAME
+  );
+  useEffect(() => {
+    if (blockSuiteWorkspace) {
+      set(blockSuiteWorkspace.meta.name);
+      const dispose = blockSuiteWorkspace.meta.commonFieldsUpdated.on(() => {
+        set(blockSuiteWorkspace.meta.name);
+      });
+      return () => {
+        dispose.dispose();
+      };
+    }
+  }, [blockSuiteWorkspace]);
+  const setName = useCallback(
+    (name: string) => {
+      assertExists(blockSuiteWorkspace);
+      set(name);
+      blockSuiteWorkspace.meta.setName(name);
+    },
+    [blockSuiteWorkspace]
+  );
+  return [name, setName] as const;
+}