feat: refactor trash, page would delete from its parent's subpageIds after move to trash (#1871)

2026-02-12 12:28:42 +00:00 · 2023-04-12 14:14:57 +08:00
parent ba4a2fc9d2
commit af04c1b889
12 changed files with 119 additions and 82 deletions
--- a/apps/web/src/components/affine/operation-menu-items/MoveTo.tsx
+++ b/apps/web/src/components/affine/operation-menu-items/MoveTo.tsx
@@ -2,7 +2,7 @@ import { MenuItem } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { ArrowRightSmallIcon, MoveToIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import { useMemo, useRef, useState } from 'react';
+import { useRef, useState } from 'react';

 import type { BlockSuiteWorkspace } from '../../../shared';
 import { PinboardMenu } from '../pinboard';
@@ -47,10 +47,7 @@ export const MoveTo = ({
        anchorEl={anchorEl}
        open={open}
        placement="left-start"
-        metas={useMemo(
-          () => metas.filter(m => !m.trash && m.id !== currentMeta.id),
-          [metas, currentMeta]
-        )}
+        metas={metas}
        currentMeta={currentMeta}
        blockSuiteWorkspace={blockSuiteWorkspace}
        onPinboardClick={onSelect}
--- a/apps/web/src/components/affine/pinboard/pinboard-menu/index.tsx
+++ b/apps/web/src/components/affine/pinboard/pinboard-menu/index.tsx
@@ -3,7 +3,7 @@ import { Input, PureMenu, TreeView } from '@affine/component';
 import { useTranslation } from '@affine/i18n';
 import { RemoveIcon, SearchIcon } from '@blocksuite/icons';
 import type { PageMeta } from '@blocksuite/store';
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';

 import { usePageMetaHelper } from '../../../../hooks/use-page-meta';
 import { usePinboardData } from '../../../../hooks/use-pinboard-data';
@@ -29,13 +29,17 @@ export type PinboardMenuProps = {
 } & PureMenuProps;

 export const PinboardMenu = ({
-  metas,
+  metas: propsMetas,
  currentMeta,
  blockSuiteWorkspace,
  showRemovePinboard = false,
  onPinboardClick,
  ...pureMenuProps
 }: PinboardMenuProps) => {
+  const metas = useMemo(
+    () => propsMetas.filter(m => m.id !== currentMeta.id),
+    [currentMeta.id, propsMetas]
+  );
  const { t } = useTranslation();
  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
  const [query, setQuery] = useState('');
--- a/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
+++ b/apps/web/src/components/affine/pinboard/pinboard-render/OperationButton.tsx
@@ -10,7 +10,7 @@ import type { PageMeta } from '@blocksuite/store';
 import { useTheme } from '@mui/material';
 import { useMemo, useState } from 'react';

-import { usePageMetaHelper } from '../../../../hooks/use-page-meta';
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
 import { CopyLink, MoveToTrash } from '../../operation-menu-items';
@@ -49,7 +49,7 @@ export const OperationButton = ({
  const [pinboardMenuOpen, setPinboardMenuOpen] = useState(false);
  const [confirmModalOpen, setConfirmModalOpen] = useState(false);
  const menuIndex = useMemo(() => modalIndex + 1, [modalIndex]);
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const { removeToTrash } = useMetaHelper(blockSuiteWorkspace);

  return (
    <MuiClickAwayListener
@@ -151,10 +151,7 @@ export const OperationButton = ({
          meta={currentMeta}
          onConfirm={() => {
            toast(t('Moved to Trash'));
-            setPageMeta(currentMeta.id, {
-              trash: true,
-              trashDate: +new Date(),
-            });
+            removeToTrash(currentMeta.id);
            onDelete();
          }}
          onCancel={() => {
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/OperationCell.tsx
@@ -9,7 +9,6 @@ import {
 import { useTranslation } from '@affine/i18n';
 import {
  DeletePermanentlyIcon,
-  DeleteTemporarilyIcon,
  FavoritedIcon,
  FavoriteIcon,
  MoreVerticalIcon,
@@ -22,7 +21,7 @@ import { useState } from 'react';

 import type { BlockSuiteWorkspace } from '../../../../shared';
 import { toast } from '../../../../utils';
-import { MoveTo } from '../../../affine/operation-menu-items';
+import { MoveTo, MoveToTrash } from '../../../affine/operation-menu-items';

 export type OperationCellProps = {
  pageMeta: PageMeta;
@@ -30,7 +29,7 @@ export type OperationCellProps = {
  blockSuiteWorkspace: BlockSuiteWorkspace;
  onOpenPageInNewTab: (pageId: string) => void;
  onToggleFavoritePage: (pageId: string) => void;
-  onToggleTrashPage: (pageId: string) => void;
+  onToggleTrashPage: (pageId: string, isTrash: boolean) => void;
 };

 export const OperationCell: React.FC<OperationCellProps> = ({
@@ -74,15 +73,12 @@ export const OperationCell: React.FC<OperationCellProps> = ({
        />
      )}
      {!pageMeta.isRootPinboard && (
-        <MenuItem
-          data-testid="move-to-trash"
-          onClick={() => {
+        <MoveToTrash
+          testId="move-to-trash"
+          onItemClick={() => {
            setOpen(true);
          }}
-          icon={<DeleteTemporarilyIcon />}
-        >
-          {t('Move to Trash')}
-        </MenuItem>
+        />
      )}
    </>
  );
@@ -100,16 +96,11 @@ export const OperationCell: React.FC<OperationCellProps> = ({
          </IconButton>
        </Menu>
      </FlexWrapper>
-      <Confirm
+      <MoveToTrash.ConfirmModal
        open={open}
-        title={t('Delete page?')}
-        content={t('will be moved to Trash', {
-          title: pageMeta.title || 'Untitled',
-        })}
-        confirmText={t('Delete')}
-        confirmType="danger"
+        meta={pageMeta}
        onConfirm={() => {
-          onToggleTrashPage(id);
+          onToggleTrashPage(id, true);
          toast(t('Deleted'));
          setOpen(false);
        }}
--- a/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
+++ b/apps/web/src/components/blocksuite/block-suite-page-list/page-list/index.tsx
@@ -19,9 +19,10 @@ import type { PageMeta } from '@blocksuite/store';
 import { useMediaQuery, useTheme } from '@mui/material';
 import { useAtomValue } from 'jotai';
 import type React from 'react';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';

 import { workspacePreferredModeAtom } from '../../../../atoms';
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import {
  usePageMeta,
  usePageMetaHelper,
@@ -101,6 +102,8 @@ export const PageList: React.FC<PageListProps> = ({
 }) => {
  const pageList = usePageMeta(blockSuiteWorkspace);
  const helper = usePageMetaHelper(blockSuiteWorkspace);
+  const { removeToTrash, restoreFromTrash } =
+    useMetaHelper(blockSuiteWorkspace);
  const { t } = useTranslation();
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));
@@ -113,20 +116,6 @@ export const PageList: React.FC<PageListProps> = ({
      ),
    [pageList, listType]
  );
-  const restorePage = useCallback(
-    (pageMeta: PageMeta, allMetas: PageMeta[]) => {
-      helper.setPageMeta(pageMeta.id, {
-        trash: false,
-      });
-
-      allMetas
-        .filter(m => pageMeta?.subpageIds.includes(m.id))
-        .forEach(m => {
-          restorePage(m, allMetas);
-        });
-    },
-    [helper]
-  );
  if (list.length === 0) {
    return <Empty listType={listType} />;
  }
@@ -212,7 +201,7 @@ export const PageList: React.FC<PageListProps> = ({
                              blockSuiteWorkspace.removePage(pageId);
                            }}
                            onRestorePage={() => {
-                              restorePage(pageMeta, pageList);
+                              restoreFromTrash(pageMeta.id);
                            }}
                            onOpenPage={pageId => {
                              onClickPage(pageId, false);
@@ -231,11 +220,12 @@ export const PageList: React.FC<PageListProps> = ({
                                favorite: !pageMeta.favorite,
                              });
                            }}
-                            onToggleTrashPage={() => {
-                              helper.setPageMeta(pageMeta.id, {
-                                trash: !pageMeta.trash,
-                                trashDate: +new Date(),
-                              });
+                            onToggleTrashPage={(pageId, isTrash) => {
+                              if (isTrash) {
+                                removeToTrash(pageId);
+                              } else {
+                                restoreFromTrash(pageId);
+                              }
                            }}
                          />
                        )}
--- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx
+++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/EditorOptionMenu.tsx
@@ -14,6 +14,7 @@ import { useAtom } from 'jotai';
 import { useState } from 'react';

 import { workspacePreferredModeAtom } from '../../../../atoms';
+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
 import {
@@ -47,7 +48,7 @@ export const EditorOptionMenu = () => {
  const { favorite } = pageMeta;
  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
  const [openConfirm, setOpenConfirm] = useState(false);
-
+  const { removeToTrash } = useMetaHelper(blockSuiteWorkspace);
  const EditMenu = (
    <>
      <MenuItem
@@ -118,11 +119,8 @@ export const EditorOptionMenu = () => {
          open={openConfirm}
          meta={pageMeta}
          onConfirm={() => {
+            removeToTrash(pageMeta.id);
            toast(t('Moved to Trash'));
-            setPageMeta(pageMeta.id, {
-              trash: true,
-              trashDate: +new Date(),
-            });
          }}
          onCancel={() => {
            setOpenConfirm(false);
--- a/apps/web/src/components/blocksuite/workspace-header/header-right-items/TrashButtonGroup.tsx
+++ b/apps/web/src/components/blocksuite/workspace-header/header-right-items/TrashButtonGroup.tsx
@@ -4,12 +4,10 @@ import { assertExists } from '@blocksuite/store';
 import { useRouter } from 'next/router';
 import { useState } from 'react';

+import { useMetaHelper } from '../../../../hooks/affine/use-meta-helper';
 import { useCurrentPageId } from '../../../../hooks/current/use-current-page-id';
 import { useCurrentWorkspace } from '../../../../hooks/current/use-current-workspace';
-import {
-  usePageMeta,
-  usePageMetaHelper,
-} from '../../../../hooks/use-page-meta';
+import { usePageMeta } from '../../../../hooks/use-page-meta';

 export const TrashButtonGroup = () => {
  // fixme(himself65): remove these hooks ASAP
@@ -22,12 +20,12 @@ export const TrashButtonGroup = () => {
    meta => meta.id === pageId
  );
  assertExists(pageMeta);
-  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const { t } = useTranslation();
  const router = useRouter();
-  //
+  const { restoreFromTrash } = useMetaHelper(blockSuiteWorkspace);
+
  const [open, setOpen] = useState(false);

-  const { t } = useTranslation();
  return (
    <>
      <Button
@@ -35,7 +33,7 @@ export const TrashButtonGroup = () => {
        shape="round"
        style={{ marginRight: '24px' }}
        onClick={() => {
-          setPageMeta(pageId, { trash: false });
+          restoreFromTrash(pageId);
        }}
      >
        {t('Restore it')}
--- a/apps/web/src/components/pure/workspace-slider-bar/Pinboard.tsx
+++ b/apps/web/src/components/pure/workspace-slider-bar/Pinboard.tsx
@@ -34,7 +34,7 @@ export const Pinboard = ({
  );

  const { data } = usePinboardData({
-    metas: allMetas.filter(meta => !meta.trash),
+    metas: allMetas,
    pinboardRender: PinboardRender,
    blockSuiteWorkspace: blockSuiteWorkspace,
    onClick: handlePinboardClick,
--- a/apps/web/src/hooks/affine/use-meta-helper.ts
+++ b/apps/web/src/hooks/affine/use-meta-helper.ts
@@ -0,0 +1,68 @@
+import { useCallback } from 'react';
+
+import type { BlockSuiteWorkspace } from '../../shared';
+import { usePageMeta, usePageMetaHelper } from '../use-page-meta';
+
+export function useMetaHelper(blockSuiteWorkspace: BlockSuiteWorkspace | null) {
+  const { setPageMeta, getPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const metas = usePageMeta(blockSuiteWorkspace);
+
+  const removeToTrash = useCallback(
+    (pageId: string, isRoot = true) => {
+      const parentMeta = metas.find(m => m.subpageIds?.includes(pageId));
+      const { subpageIds = [] } = getPageMeta(pageId) ?? {};
+
+      subpageIds.forEach(id => {
+        removeToTrash(id, false);
+      });
+
+      setPageMeta(pageId, {
+        trash: true,
+        trashDate: +new Date(),
+        trashRelate: isRoot ? parentMeta?.id : undefined,
+      });
+
+      // Just the trash root need delete its id from parent
+      if (parentMeta && isRoot) {
+        const deleteIndex = parentMeta.subpageIds.findIndex(
+          id => id === pageId
+        );
+        const newSubpageIds = [...parentMeta.subpageIds];
+        newSubpageIds.splice(deleteIndex, 1);
+        setPageMeta(parentMeta.id, {
+          subpageIds: newSubpageIds,
+        });
+      }
+    },
+    [getPageMeta, metas, setPageMeta]
+  );
+
+  const restoreFromTrash = useCallback(
+    (pageId: string) => {
+      const { subpageIds = [], trashRelate } = getPageMeta(pageId) ?? {};
+
+      if (trashRelate) {
+        const parentMeta = metas.find(m => m.id === trashRelate);
+        parentMeta &&
+          setPageMeta(parentMeta.id, {
+            subpageIds: [...parentMeta.subpageIds, pageId],
+          });
+      }
+
+      setPageMeta(pageId, {
+        trash: false,
+        trashDate: undefined,
+        trashRelate: undefined,
+      });
+      subpageIds.forEach(id => {
+        restoreFromTrash(id);
+      });
+    },
+    [getPageMeta, metas, setPageMeta]
+  );
+
+  return {
+    removeToTrash,
+    restoreFromTrash,
+  };
+}
--- a/apps/web/src/hooks/use-page-meta.ts
+++ b/apps/web/src/hooks/use-page-meta.ts
@@ -9,6 +9,8 @@ declare module '@blocksuite/store' {
  interface PageMeta {
    favorite?: boolean;
    subpageIds: string[];
+    // If a page remove to trash, and it is a subpage, it will remove from its parent `subpageIds`, 'trashRelate' is use for save it parent
+    trashRelate?: string;
    trash?: boolean;
    trashDate?: number;
    // whether to create the page with the default template
--- a/apps/web/src/hooks/use-pinboard-handler.ts
+++ b/apps/web/src/hooks/use-pinboard-handler.ts
@@ -5,6 +5,7 @@ import { nanoid } from '@blocksuite/store';
 import { useCallback } from 'react';

 import type { BlockSuiteWorkspace } from '../shared';
+import { useMetaHelper } from './affine/use-meta-helper';
 import { useBlockSuiteWorkspaceHelper } from './use-blocksuite-workspace-helper';
 import { usePageMetaHelper } from './use-page-meta';
 import type { NodeRenderProps } from './use-pinboard-data';
@@ -32,8 +33,9 @@ export function usePinboardHandler({
  onDrop?: TreeViewProps<NodeRenderProps>['onDrop'];
 }) {
  const { createPage } = useBlockSuiteWorkspaceHelper(blockSuiteWorkspace);
-  const { getPageMeta, setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
-
+  const { setPageMeta } = usePageMetaHelper(blockSuiteWorkspace);
+  const { removeToTrash: removeToTrashHelper } =
+    useMetaHelper(blockSuiteWorkspace);
  // Just need handle add operation, delete check is handled in blockSuite's reference link
  const addReferenceLink = useCallback(
    (pageId: string, referenceId: string) => {
@@ -71,21 +73,10 @@ export function usePinboardHandler({

  const deletePin = useCallback(
    (deleteId: string) => {
-      const removeToTrash = (currentMeta: PageMeta) => {
-        const { subpageIds = [] } = currentMeta;
-        setPageMeta(currentMeta.id, {
-          trash: true,
-          trashDate: +new Date(),
-        });
-        subpageIds.forEach(id => {
-          const subCurrentMeta = getPageMeta(id);
-          subCurrentMeta && removeToTrash(subCurrentMeta);
-        });
-      };
-      removeToTrash(metas.find(m => m.id === deleteId)!);
+      removeToTrashHelper(deleteId);
      onDelete?.(deleteId);
    },
-    [metas, getPageMeta, onDelete, setPageMeta]
+    [removeToTrashHelper, onDelete]
  );

  const dropPin = useCallback(