Merge pull request #471 from bluewave-labs/466-add-duplicate-button

466 add duplicate button
bluewave-labs · Jan 7, 2025 · 50fb7dc · 50fb7dc
2 parents c0fd8aa + 77d4926
commit 50fb7dc
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 11 deletions.
diff --git a/frontend/src/scenes/banner/BannerDefaultPage.jsx b/frontend/src/scenes/banner/BannerDefaultPage.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useLocation } from "react-router-dom";
 import { ACTIVITY_TYPES_INFO } from "../../data/guideMainPageData";
-import { deleteBanner, getBanners } from "../../services/bannerServices";
+import { addBanner, getBannerById, deleteBanner, getBanners } from "../../services/bannerServices";
 import DefaultPageTemplate from "../../templates/DefaultPageTemplate/DefaultPageTemplate";
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
 import BannerPage from "./CreateBannerPage";
@@ -30,6 +30,8 @@ const BannerDefaultPage = () => {
         itemTypeInfo={ACTIVITY_TYPES_INFO.BANNERS}
         getItemDetails={getBannerDetails}
         itemsUpdated={itemsUpdated}
+        getItemById={getBannerById}
+        duplicateItem={addBanner}
       />
       {isOpen && (
         <BannerPage

diff --git a/frontend/src/scenes/hints/HintDefaultPage.jsx b/frontend/src/scenes/hints/HintDefaultPage.jsx
@@ -3,7 +3,7 @@ import { useLocation } from "react-router-dom"
 import DefaultPageTemplate from "../../templates/DefaultPageTemplate/DefaultPageTemplate";
 import CreateHintPage from "./CreateHintPage";
 import { ACTIVITY_TYPES_INFO } from "../../data/guideMainPageData";
-import { getHints, deleteHint } from '../../services/hintServices';
+import { addHint, getHintById, getHints, deleteHint } from '../../services/hintServices';
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
 
 const HintDefaultPage = () => {
@@ -29,6 +29,8 @@ const HintDefaultPage = () => {
         itemTypeInfo={ACTIVITY_TYPES_INFO.HINTS}
         getItemDetails={getHintDetails}
         itemsUpdated={itemsUpdated}
+        getItemById={getHintById}
+        duplicateItem={addHint}
       />
       {isOpen && (
         <CreateHintPage

diff --git a/frontend/src/scenes/links/LinksDefaultPage.jsx b/frontend/src/scenes/links/LinksDefaultPage.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { ACTIVITY_TYPES_INFO } from "../../data/guideMainPageData";
-import { deleteHelper, getHelpers } from "../../services/helperLinkService";
+import { createHelper, getHelperById, deleteHelper, getHelpers } from "../../services/helperLinkService";
 import HelperLinkProvider from "../../services/linksProvider";
 import DefaultPageTemplate from "../../templates/DefaultPageTemplate/DefaultPageTemplate";
 import { useDialog } from "../../templates/GuideTemplate/GuideTemplateContext";
@@ -41,6 +41,8 @@ const LinksDefaultPage = () => {
           itemType={ACTIVITY_TYPES_INFO.HELPERLINKS}
           itemTypeInfo={ACTIVITY_TYPES_INFO.HELPERLINKS}
           getItemDetails={getItemDetails}
+          getItemById={getHelperById}
+          duplicateItem={createHelper}
         />
       </div>
     </HelperLinkProvider>

diff --git a/frontend/src/scenes/popup/PopupDefaultPage.jsx b/frontend/src/scenes/popup/PopupDefaultPage.jsx
@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import {useLocation} from "react-router-dom"
 import DefaultPageTemplate from '../../templates/DefaultPageTemplate/DefaultPageTemplate';
 import CreatePopupPage from './CreatePopupPage';
-import { getPopups, deletePopup } from '../../services/popupServices';
+import { addPopup, getPopupById, getPopups, deletePopup } from '../../services/popupServices';
 import { ACTIVITY_TYPES_INFO } from '../../data/guideMainPageData';
 import { useDialog } from '../../templates/GuideTemplate/GuideTemplateContext';
 
@@ -30,6 +30,8 @@ const PopupDefaultPage = () => {
         itemTypeInfo={ACTIVITY_TYPES_INFO.POPUPS}
         getItemDetails={getPopupDetails}
         itemsUpdated={itemsUpdated}
+        getItemById={getPopupById}
+        duplicateItem={addPopup}
       />
       {isOpen && (
         <CreatePopupPage

diff --git a/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx b/frontend/src/templates/DefaultPageTemplate/DefaultPageTemplate.jsx
@@ -10,11 +10,12 @@ import { renderIfAuthorized } from '../../utils/generalHelper';
 import { useDialog } from "../GuideTemplate/GuideTemplateContext";
 
 
-const DefaultPageTemplate = ({ getItems, deleteItem, setIsEdit, setItemId, itemType, itemTypeInfo, getItemDetails, itemsUpdated }) => {
+const DefaultPageTemplate = ({ getItems, deleteItem, setIsEdit, setItemId, itemType, itemTypeInfo, getItemDetails, itemsUpdated, getItemById, duplicateItem }) => {
     const [items, setItems] = useState([]);
     const [isPopupOpen, setPopupOpen] = useState(false);
     const [itemToDelete, setItemToDelete] = useState();
     const [itemDeleted, setItemDeleted] = useState(false);
+    const [itemsDuplicated, setItemsDuplicated] = useState(false);
     const [loading, setLoading] = useState(true);
     const [load, setLoad] = useState(true)
     const { userInfo } = useAuth();
@@ -33,6 +34,7 @@ const DefaultPageTemplate = ({ getItems, deleteItem, setIsEdit, setItemId, itemT
         setItemId(null);
         openDialog();
     };
+
     const handleDelete = async () => {
         try {
             await deleteItem(itemToDelete);
@@ -47,6 +49,30 @@ const DefaultPageTemplate = ({ getItems, deleteItem, setIsEdit, setItemId, itemT
         }
     };
 
+    const duplicateHandler = async (id) => {
+        try {
+          if (itemType === 'helper links') {
+            const { createdBy, id: fetchedId, links, ...helper } = await getItemById(id);
+            const updatedLinks = links.map(({ id, ...data }) => data);
+
+            await duplicateItem(helper, updatedLinks);
+
+        } else {
+            const { createdBy, id: fetchedId, ...data } = await getItemById(id);
+            await duplicateItem(data);
+          }
+
+          toastEmitter.emit(TOAST_EMITTER_KEY, `${itemType.charAt(0).toUpperCase() + itemType.slice(1, -1)} duplicated successfully`);
+
+          setItemsDuplicated((prev) => !prev);
+        } catch (error) {
+          const errorMessage = error.response?.data?.message
+            ? `Error: ${error.response.data.message}`
+            : 'An unexpected error occurred. Please try again.';
+          toastEmitter.emit(TOAST_EMITTER_KEY, errorMessage);
+        }
+      };
+
     const handleOpenPopup = (id) => {
         setItemToDelete(id);
         setPopupOpen(true);
@@ -74,14 +100,15 @@ const DefaultPageTemplate = ({ getItems, deleteItem, setIsEdit, setItemId, itemT
             }
         };
         fetchData();
-    }, [itemDeleted, itemsUpdated]);
+    }, [itemDeleted, itemsUpdated, itemsDuplicated]);
 
     const mappedItems = useMemo(() => items.map(item => ({
         idItem: item.id,
         ...getItemDetails(item),
         onDelete: () => handleOpenPopup(item.id),
         onEdit: () => openEditPopupDialog(item.id),
-    })), [items, getItemDetails, handleOpenPopup, openNewPopupDialog]);
+        onDuplicate: () => duplicateHandler(item.id)
+    })), [items, getItemDetails, handleOpenPopup, openNewPopupDialog, duplicateHandler]);
 
     return (
         <>
@@ -118,6 +145,7 @@ DefaultPageTemplate.propTypes = {
     itemType: PropTypes.string.isRequired, 
     itemTypeInfo: PropTypes.string.isRequired, 
     getItemDetails: PropTypes.func.isRequired, 
+    duplicateItem: PropTypes.func.isRequired,
 };
 
 export default DefaultPageTemplate;
diff --git a/frontend/src/templates/GuideMainPageTemplate/GuideMainPageComponents/List/List.jsx b/frontend/src/templates/GuideMainPageTemplate/GuideMainPageComponents/List/List.jsx
@@ -14,6 +14,7 @@ const List = ({ items }) => {
           onClick={() => {}}
           onDelete={item.onDelete}
           onEdit={item.onEdit}
+          onDuplicate={item.onDuplicate}
         />
       ))}
     </>

diff --git a/...nd/src/templates/GuideMainPageTemplate/GuideMainPageComponents/List/ListItem/ListItem.jsx b/...nd/src/templates/GuideMainPageTemplate/GuideMainPageComponents/List/ListItem/ListItem.jsx
@@ -1,14 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { IconButton, useTheme } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import CircleIcon from '@mui/icons-material/Circle';
+import ContentCopyTwoToneIcon from '@mui/icons-material/ContentCopyTwoTone';
 import './ListItem.css';
 import { useAuth } from '../../../../../services/authProvider';
 import { renderIfAuthorized } from '../../../../../utils/generalHelper';
 
-const ListItem = ({ title, text, id, onClick, onDelete, onEdit }) => {
+const ListItem = ({ title, text, id, onClick, onDelete, onEdit, onDuplicate }) => {
   const theme = useTheme();
   const { userInfo } = useAuth();
   const role =  userInfo.role;
@@ -26,16 +27,20 @@ const ListItem = ({ title, text, id, onClick, onDelete, onEdit }) => {
         {text && <p>{text}</p>}
         {id && <p className="item-id">ID: {id}</p>}
       </div>
+
       <div className="list-item-actions">
         {renderIfAuthorized(role, 'admin',
+        <>
+          <IconButton onClick={onDuplicate}>
+            <ContentCopyTwoToneIcon sx={{ color: 'var(--main-text-color)' }} />
+          </IconButton>
           <IconButton onClick={onEdit}>
             <EditIcon />
           </IconButton>
-        )}
-        {renderIfAuthorized(role, 'admin',
           <IconButton onClick={onDelete}>
             <DeleteIcon />
           </IconButton>
+        </>
         )}
       </div>
     </div>
@@ -49,6 +54,7 @@ ListItem.propTypes = {
   onClick: PropTypes.func,
   onDelete: PropTypes.func,
   onEdit: PropTypes.func,
+  onDuplicate: PropTypes.func,
 };
 
 export default ListItem;