feat: add button to copy multiple files at once

src/components/context/CopyItemModalContext.js

@@ -10,7 +10,7 @@ const CopyItemModalContext = React.createContext();
 
 const CopyItemModalProvider = ({ children }) => {
   const { t } = useTranslation();
-  const { mutate: copyItem } = useMutation(MUTATION_KEYS.COPY_ITEM);
+  const { mutate: copyItem } = useMutation(MUTATION_KEYS.COPY_ITEMS);
   const [open, setOpen] = useState(false);
   const [itemId, setItemId] = useState(false);
 

src/components/main/CopyButtons.js

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import { FilterNone } from '@material-ui/icons';
+import { ITEM_COPY_BUTTON_CLASS } from '../../config/selectors';
+import { CopyItemModalContext } from '../context/CopyItemModalContext';
+
+const CopyButton = ({ itemIds, color, id }) => {
+  const { t } = useTranslation();
+
+  const { openModal: openCopyModal } = useContext(CopyItemModalContext);
+
+  const handleCopy = () => {
+    openCopyModal(itemIds);
+  };
+
+  return (
+    <>
+      <Tooltip title={t('Copy')}>
+        <IconButton
+          id={id}
+          color={color}
+          className={ITEM_COPY_BUTTON_CLASS}
+          aria-label="copy"
+          onClick={handleCopy}
+        >
+          <FilterNone />
+        </IconButton>
+      </Tooltip>
+    </>
+  );
+};
+
+CopyButton.propTypes = {
+  itemIds: PropTypes.arrayOf(PropTypes.string).isRequired,
+  color: PropTypes.string,
+  id: PropTypes.string,
+};
+
+CopyButton.defaultProps = {
+  color: 'default',
+  id: '',
+};
+
+export default CopyButton

src/components/main/TableToolbar.js

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next';
 import { ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID } from '../../config/selectors';
 import DeleteButton from '../common/DeleteButton';
 import NewItemButton from './NewItemButton';
+import CopyButton from './CopyButtons';
 
 const useToolbarStyles = makeStyles((theme) => ({
   root: {
@@ -60,6 +61,13 @@ const TableToolbar = (props) => {
         </>
       )}
 
+      {numSelected > 0 && (
+        <CopyButton
+          id="copy"
+          color="secondary"
+          itemIds={selected}
+        />
+      )}
       {numSelected > 0 && (
         <DeleteButton
           id={ITEMS_TABLE_DELETE_SELECTED_ITEMS_ID}

src/config/selectors.js

@@ -1,6 +1,7 @@
 const parseStringForId = (string) => string.replaceAll('+', '');
 
 export const ITEM_DELETE_BUTTON_CLASS = 'itemDeleteButton';
+export const ITEM_COPY_BUTTON_CLASS = 'itemCopyButton';
 export const CONFIRM_DELETE_BUTTON_ID = 'confirmDeleteButton';
 export const buildItemCard = (id) => `itemCard-${id}`;
 export const CREATE_ITEM_BUTTON_ID = 'createItemButton';