feat: add duplicate item action

src/components/main/ItemMenu.tsx

@@ -1,5 +1,6 @@
 import { useContext, useState } from 'react';
 
+import FileCopyIcon from '@mui/icons-material/FileCopy';
 import FlagIcon from '@mui/icons-material/Flag';
 import LabelImportantIcon from '@mui/icons-material/LabelImportant';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -11,9 +12,13 @@ import MenuItem from '@mui/material/MenuItem';
 import { DiscriminatedItem } from '@graasp/sdk';
 import { ActionButton } from '@graasp/ui';
 
+import { mutations } from '@/config/queryClient';
+import { getParentsIdsFromPath } from '@/utils/item';
+
 import { useBuilderTranslation } from '../../config/i18n';
 import {
   ITEM_MENU_BUTTON_CLASS,
+  ITEM_MENU_DUPLICATE_BUTTON_CLASS,
   ITEM_MENU_FLAG_BUTTON_CLASS,
   ITEM_MENU_SHORTCUT_BUTTON_CLASS,
   buildItemMenu,
@@ -49,6 +54,7 @@ const ItemMenu = ({
     CreateShortcutModalContext,
   );
   const { openModal: openFlagModal } = useContext(FlagItemModalContext);
+  const { mutate: copyItems } = mutations.useCopyItems();
 
   const handleClick: IconButtonProps['onClick'] = (event) => {
     setAnchorEl(event.currentTarget);
@@ -68,6 +74,18 @@ const ItemMenu = ({
     handleClose();
   };
 
+  const handleDuplicate = () => {
+    const parentsIds = getParentsIdsFromPath(item.path);
+    // get the close parent if not then undefined
+    const to =
+      parentsIds.length > 1 ? parentsIds[parentsIds.length - 2] : undefined;
+
+    const newPayload = {
+      ids: [item.id],
+      to,
+    };
+    copyItems(newPayload);
+  };
   const renderEditorActions = () => {
     if (!canEdit) {
       return null;
@@ -116,6 +134,15 @@ const ItemMenu = ({
         itemIds={[item.id]}
         onClick={handleClose}
       />,
+      <MenuItem
+        onClick={handleDuplicate}
+        className={ITEM_MENU_DUPLICATE_BUTTON_CLASS}
+      >
+        <ListItemIcon>
+          <FileCopyIcon />
+        </ListItemIcon>
+        {translateBuilder(BUILDER.ITEM_MENU_DUPLICATE_MENU_ITEM)}
+      </MenuItem>,
     ];
   };
 

src/config/selectors.ts

@@ -92,6 +92,7 @@ export const SHARED_ITEMS_ERROR_ALERT_ID = 'sharedItemsErrorAlert';
 export const PUBLISHED_ITEMS_ERROR_ALERT_ID = 'publishedItemsErrorAlert';
 export const FAVORITE_ITEMS_ERROR_ALERT_ID = 'favoriteItemsErrorAlert';
 export const ITEM_MENU_SHORTCUT_BUTTON_CLASS = 'itemMenuShortcutButton';
+export const ITEM_MENU_DUPLICATE_BUTTON_CLASS = 'itemMenuDuplicateButton';
 export const ITEM_MENU_FAVORITE_BUTTON_CLASS = 'itemMenuFavoriteButton';
 export const ITEM_MENU_FLAG_BUTTON_CLASS = 'itemMenuFlagButton';
 export const buildFlagListItemId = (type: string): string =>

src/langs/constants.ts

@@ -136,6 +136,7 @@ export const BUILDER = {
   ITEM_MEMBERSHIPS_TABLE_PERMISSION_HEADER:
     'ITEM_MEMBERSHIPS_TABLE_PERMISSION_HEADER',
   ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM: 'ITEM_MENU_CREATE_SHORTCUT_MENU_ITEM',
+  ITEM_MENU_DUPLICATE_MENU_ITEM: 'ITEM_MENU_DUPLICATE_MENU_ITEM',
   ITEM_MENU_FLAG_MENU_ITEM: 'ITEM_MENU_FLAG_MENU_ITEM',
   ITEM_METADATA_CREATED_AT_TITLE: 'ITEM_METADATA_CREATED_AT_TITLE',
   ITEM_METADATA_LINK_TITLE: 'ITEM_METADATA_LINK_TITLE',

src/langs/en.json

@@ -291,5 +291,6 @@
   "SHORT_LINK_MAX_CHARS_ERROR": "The short link must not exceed {{data}} chars.",
   "SHORT_LINK_INVALID_CHARS_ERROR": "The short link contains invalid chars ({{data}}).",
   "SHORT_LINK_UNKNOWN_ERROR": "An unknown error occurred.",
-  "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.": "You can also find the items of this page in ''My Graasp''. This page ''Shared Items'' will be unavailable soon."
+  "You can also find the items of this page in ''My Graasp''. This page will be unavailable soon.": "You can also find the items of this page in ''My Graasp''. This page ''Shared Items'' will be unavailable soon.",
+  "ITEM_MENU_DUPLICATE_MENU_ITEM": "Duplicate"
 }