fix(component): toast too many times when switch page mode (#2296)

apps/web/src/components/blocksuite/workspace-header/editor-mode-switch/index.tsx

@@ -1,3 +1,4 @@
+import { useAFFiNEI18N } from '@affine/i18n/hooks';
 import { assertExists } from '@blocksuite/store';
 import { useBlockSuitePageMeta } from '@toeverything/hooks/use-block-suite-page-meta';
 import { useAtomValue, useSetAtom } from 'jotai';
@@ -27,6 +28,7 @@ export const EditorModeSwitch = ({
   const pageMeta = useBlockSuitePageMeta(blockSuiteWorkspace).find(
     meta => meta.id === pageId
   );
+  const t = useAFFiNEI18N();
   assertExists(pageMeta);
   const { trash } = pageMeta;
 
@@ -41,8 +43,12 @@ export const EditorModeSwitch = ({
         active={currentMode === 'page'}
         hide={trash && currentMode !== 'page'}
         onClick={() => {
-          setMode(mode => ({ ...mode, [pageMeta.id]: 'page' }));
+          setMode(mode => {
-          toast('Page mode');
+            if (mode[pageMeta.id] !== 'page') {
+              toast(t['com.affine.pageMode']());
+            }
+            return { ...mode, [pageMeta.id]: 'page' };
+          });
         }}
       />
       <EdgelessSwitchItem
@@ -50,8 +56,12 @@ export const EditorModeSwitch = ({
         active={currentMode === 'edgeless'}
         hide={trash && currentMode !== 'edgeless'}
         onClick={() => {
-          setMode(mode => ({ ...mode, [pageMeta.id]: 'edgeless' }));
+          setMode(mode => {
-          toast('Edgeless mode');
+            if (mode[pageMeta.id] !== 'edgeless') {
+              toast(t['com.affine.edgelessMode']());
+            }
+            return { ...mode, [pageMeta.id]: 'edgeless' };
+          });
         }}
       />
     </StyledEditorModeSwitch>

apps/web/src/hooks/root/use-on-transform-workspace.ts

@@ -47,3 +47,15 @@ export function useOnTransformWorkspace() {
     [setUser, transformWorkspace]
   );
 }
+
+declare global {
+  // global Events
+  interface WindowEventMap {
+    'affine-workspace:transform': CustomEvent<{
+      from: WorkspaceFlavour;
+      to: WorkspaceFlavour;
+      oldId: string;
+      newId: string;
+    }>;
+  }
+}

apps/web/src/utils/toast.ts

@@ -9,8 +9,20 @@ export const toast = (message: string, options?: ToastOptions) => {
     '.main-container'
   ) as HTMLElement;
   logger.debug(`toast with message: "${message}"`, options);
+  window.dispatchEvent(
+    new CustomEvent('affine-toast:emit', { detail: message })
+  );
   return basicToast(message, {
     portal: mainContainer || document.body,
     ...options,
   });
 };
+
+declare global {
+  // global Events
+  interface WindowEventMap {
+    'affine-toast:emit': CustomEvent<{
+      message: string;
+    }>;
+  }
+}

packages/i18n/src/resources/en.json

@@ -265,5 +265,7 @@
   "Default db location hint": "By default will be saved to {{location}}",
   "light": "light",
   "dark": "dark",
-  "system": "system"
+  "system": "system",
+  "com.affine.pageMode": "Page Mode",
+  "com.affine.edgelessMode": "Edgeless Mode"
 }

tests/parallels/change-page-mode.spec.ts

@@ -5,11 +5,26 @@ import { openHomePage } from '../libs/load-page';
 import { clickPageMoreActions, waitMarkdownImported } from '../libs/page-logic';
 
 test('Switch to edgeless by switch edgeless item', async ({ page }) => {
+  async function getCount(): Promise<number> {
+    return page.evaluate(() => {
+      return globalThis.__toastCount;
+    });
+  }
   await openHomePage(page);
   await waitMarkdownImported(page);
   const btn = await page.getByTestId('switch-edgeless-mode-button');
+  await page.evaluate(() => {
+    globalThis.__toastCount = 0;
+    window.addEventListener('affine-toast:emit', () => {
+      globalThis.__toastCount++;
+    });
+  });
   await btn.click();
   await page.waitForTimeout(100);
+  {
+    const count = await getCount();
+    expect(count).toBe(1);
+  }
   const edgeless = page.locator('affine-edgeless-page');
   expect(await edgeless.isVisible()).toBe(true);
 
@@ -19,6 +34,18 @@ test('Switch to edgeless by switch edgeless item', async ({ page }) => {
       return window.getComputedStyle(element).getPropertyValue('padding');
     });
   expect(editorWrapperPadding).toBe('0px');
+  {
+    const count = await getCount();
+    expect(count).toBe(1);
+  }
+  await btn.click();
+  await btn.click();
+  await btn.click();
+  await page.waitForTimeout(100);
+  {
+    const count = await getCount();
+    expect(count).toBe(1);
+  }
 });
 
 test('Convert to edgeless by editor header items', async ({ page }) => {