Merge pull request #159 from bluewave-labs/edit-delete-banner-popups

Edit & delete popups
bluewave-labs · Aug 26, 2024 · 37b2eb2 · 37b2eb2
2 parents 7e4d58c + 5a12c0f
commit 37b2eb2
Show file tree

Hide file tree

Showing 7 changed files with 139 additions and 24 deletions.
diff --git a/backend/src/controllers/popupController.js b/backend/src/controllers/popupController.js
@@ -198,6 +198,34 @@ class PopupController {
       res.status(statusCode).json(payload);
     }
   }
+
+  async getPopupById(req, res) {
+    try {
+      const { id } = req.params;
+
+      if (isNaN(id) || id.trim() === "") {
+        return res.status(400).json({ errors: [{ msg: "Invalid popup ID" }] });
+      }
+
+      const popup = await popupService.getPopupById(id);
+
+      if (!popup) {
+        return res
+          .status(404)
+          .json({ errors: [{ msg: "Popup not found" }] });
+      }
+
+      res.status(200).json(popup);
+    } catch (err) {
+      const { statusCode, payload } = internalServerError(
+        "GET_POPUP_BY_ID_ERROR",
+        err.message,
+      );
+      res.status(statusCode).json(payload);
+    }
+  }
+
+
 }
 
 module.exports = new PopupController();
diff --git a/backend/src/routes/popup.routes.js b/backend/src/routes/popup.routes.js
@@ -9,5 +9,6 @@ router.delete("/delete_popup/:id", authenticateJWT, popupController.deletePopup)
 router.put("/edit_popup/:id", authenticateJWT, popupController.editPopup);
 router.get("/all_popups", authenticateJWT, popupController.getAllPopups);
 router.get("/popups", authenticateJWT, popupController.getPopups);
+router.get("/get_popup/:id", authenticateJWT, popupController.getPopupById);
 
 module.exports = router;
diff --git a/backend/src/service/popup.service.js b/backend/src/service/popup.service.js
@@ -43,6 +43,17 @@ class PopupService {
 
     return updatedPopups[0];
   }
+
+  async getPopupById(popupId) {
+    try {
+      return await Popup.findOne({
+        where: { id: popupId },
+        include: [{ model: db.User, as: "creator" }],
+      });
+    } catch (error) {
+      throw new Error("Error retrieving popup by ID");
+    }
+  }
 }
 
 module.exports = new PopupService();
diff --git a/frontend/src/components/Button/CreateActivityButton/CreateActivityButton.jsx b/frontend/src/components/Button/CreateActivityButton/CreateActivityButton.jsx
@@ -17,7 +17,7 @@ const CreateActivityButton = ({ type = ACTIVITY_TYPES.HINTS, onClick }) => {
           <ul>
             {listItem.map((item, index) => (
               <div className="list" key={index}>
-              <CheckIcon size='small' outline={true} color='var(--main-purple)'/>
+              <CheckIcon size='small' outline={true} color='purple'/>
               <li className="listText" key={index}>
                 {item}
               </li>

diff --git a/frontend/src/scenes/popup/CreatePopupPage.jsx b/frontend/src/scenes/popup/CreatePopupPage.jsx
@@ -1,14 +1,17 @@
 import HomePageTemplate from '../../templates/HomePageTemplate/HomePageTemplate';
 import GuideTemplate from '../../templates/GuideTemplate/GuideTemplate';
-import { React, useState } from 'react';
+import { React, useState, useEffect } from 'react';
 import RichTextEditor from '../../components/RichTextEditor/RichTextEditor';
 import PopupAppearance from '../../components/PopupPageComponents/PopupAppearance/PopupAppearance';
 import PopupContent from '../../components/PopupPageComponents/PopupContent/PopupContent';
-import { addPopup } from '../../services/popupServices';
-import { useNavigate } from 'react-router-dom';
+import { addPopup, getPopupById, editPopup } from '../../services/popupServices';
+import { useNavigate, useLocation } from 'react-router-dom';
+
 
 const CreatePopupPage = () => {
     const navigate = useNavigate();
+    const location = useLocation();
+
     const [activeButton, setActiveButton] = useState(0);
 
     const [headerBackgroundColor, setHeaderBackgroundColor] = useState('#F8F9F8');
@@ -34,8 +37,41 @@ const CreatePopupPage = () => {
         { stateName: 'Button Text Color', state: buttonTextColor, setState: setButtonTextColor },
     ];
 
+    useEffect(() => {
+        if (location.state?.isEdit) {
+            const fetchPopupData = async () => {
+                try {
+                    const popupData = await getPopupById(location.state.id);
+
+                    // Update the state with the fetched data
+                    setHeaderBackgroundColor(popupData.headerBackgroundColor || '#F8F9F8');
+                    setHeaderColor(popupData.headerColor || '#101828');
+                    setTextColor(popupData.textColor || '#344054');
+                    setButtonBackgroundColor(popupData.buttonBackgroundColor || '#7F56D9');
+                    setButtonTextColor(popupData.buttonTextColor || '#FFFFFF');
+                    setHeader(popupData.header || '');
+                    setContent(popupData.content || '');
+                    setActionButtonUrl(popupData.url || 'https://');
+                    setActionButtonText(popupData.actionButtonText || 'Take me to subscription page');
+                    setButtonAction(popupData.closeButtonAction || 'No action');
+                    setPopupSize(popupData.popupSize || 'Small');
+
+                    console.log('Get popup successful:', response);
+                } catch (error) {
+                    if (error.response && error.response.data) {
+                        console.error('An error occurred:', error.response.data.errors[0].msg);
+                    } else {
+                        console.log('An error occurred. Please check your network connection and try again.');
+                    }
+                }
+            };
+
+            fetchPopupData();
+        }
+    }, []);
+
     const onSave = async () => {
-        const popupData = { 
+        const popupData = {
             popupSize: popupSize.toLowerCase(),
             url: actionButtonUrl,
             actionButtonText: actionButtonText,
@@ -44,21 +80,24 @@ const CreatePopupPage = () => {
             textColor: textColor,
             buttonBackgroundColor: buttonBackgroundColor,
             buttonTextColor: buttonTextColor,
-            closeButtonAction:buttonAction.toLowerCase(),
-            header:header,
-            content:content
+            closeButtonAction: buttonAction.toLowerCase(),
+            header: header,
+            content: content
         };
         console.log(popupData)
         try {
-          const response = await addPopup(popupData);
-          console.log('Add popup successful:', response);
-          navigate('/popup');
+            const response = location.state?.isEdit
+            ? await editPopup(location.state?.id, popupData)
+            : await addPopup(popupData);
+
+            console.log('Add popup successful:', response);
+            navigate('/popup');
         } catch (error) {
-          if (error.response && error.response.data) {
-            console.error('An error occurred:', error.response.data.errors[0].msg);
-          } else {
-            console.log('An error occurred. Please check your network connection and try again.');
-          }
+            if (error.response && error.response.data) {
+                console.error('An error occurred:', error.response.data.errors[0].msg);
+            } else {
+                console.log('An error occurred. Please check your network connection and try again.');
+            }
         }
     }
 
@@ -86,7 +125,7 @@ const CreatePopupPage = () => {
                             textColor={textColor}
                             buttonBackgroundColor={buttonBackgroundColor}
                             buttonTextColor={buttonTextColor}
-                            sx={{width: "100%", maxWidth: '700px' , marginLeft: '2.5rem', marginTop: '1rem'}}
+                            sx={{ width: "100%", maxWidth: '700px', marginLeft: '2.5rem', marginTop: '1rem' }}
                         />}
                     leftContent={() =>
                         <PopupContent

diff --git a/frontend/src/scenes/popup/PopupDefaultPage.jsx b/frontend/src/scenes/popup/PopupDefaultPage.jsx
@@ -7,22 +7,28 @@ import { useNavigate } from 'react-router-dom';
 import GuideMainPageTemplate from "../../templates/GuideMainPageTemplate/GuideMainPageTemplate";
 import { getPopups } from "../../services/popupServices"; 
 import { ACTIVITY_TYPES_INFO } from '../../data/GuideMainPageData';
+import { deletePopup } from '../../services/popupServices';
 
 const PopupDefaultPage = () => {
     const navigate = useNavigate();
     const [popups, setPopups] = useState([]);
     const [selectedItem, setSelectedItem] = useState(null);
     const [isPopupOpen, setPopupOpen] = useState(false);
+    const [popupToDelete, setPopupToDelete] = useState();
+    const [popupDeleted, setPopupDeleted] = useState(false);
 
     const handleSelect = (idItem) => {
         setSelectedItem(idItem);
     };
 
-    const handleDelete = () => {
+    const handleDelete = async () => {
+        await deletePopup(popupToDelete)
         setPopupOpen(false);
+        setPopupDeleted(prevState => !prevState);
     };
 
-    const handleOpenPopup = () => {
+    const handleOpenPopup = (id) => {
+        setPopupToDelete(id)
         setPopupOpen(true);
     };
 
@@ -45,7 +51,7 @@ const PopupDefaultPage = () => {
         };
 
         fetchPopups();
-    }, []);
+    }, [popupDeleted]);
 
     const style = {
         display: "flex",
@@ -59,8 +65,8 @@ const PopupDefaultPage = () => {
         idItem: popups.id,
         title: `Popup ${popups.id}`,
         text: popups.header,
-        onDelete: () => console.log(`Delete banner ${popups.id}`), // Placeholder for delete function
-        onEdit: () => console.log(`Edit banner ${popups.id}`),     // Placeholder for edit function
+        onDelete: () => handleOpenPopup(popups.id), // Placeholder for delete function
+        onEdit: () => navigate('/popup/create', {state:{isEdit:true, id: popups.id}}), 
       }));
 
 

diff --git a/frontend/src/services/popupServices.js b/frontend/src/services/popupServices.js
@@ -1,4 +1,4 @@
-import {apiClient} from './apiClient'; 
+import { apiClient } from './apiClient';
 
 export const addPopup = async (popupData) => {
   try {
@@ -10,7 +10,7 @@ export const addPopup = async (popupData) => {
   }
 };
 
-export const getPopups= async () => {
+export const getPopups = async () => {
   try {
     const response = await apiClient.get('/popup/popups');
     console.log(response)
@@ -20,3 +20,33 @@ export const getPopups= async () => {
     throw error;
   }
 };
+
+export const getPopupById = async (popupId) => {
+  try {
+    const response = await apiClient.get(`/popup/get_popup/${popupId}`);
+    return response.data;
+  } catch (error) {
+    console.error(`Get Popup by ID (${popupId}) error:`, error);
+    throw error;
+  }
+};
+
+export const editPopup = async (popupId, popupData) => {
+  try {
+    const response = await apiClient.put(`/popup/edit_popup/${popupId}`, popupData);
+    return response.data;
+  } catch (error) {
+    console.error(`Edit Popup error for ID (${popupId}):`, error);
+    throw error;
+  }
+};
+
+export const deletePopup = async (popupId) => {
+  try {
+    const response = await apiClient.delete(`/popup/delete_popup/${popupId}`);
+    return response.data;
+  } catch (error) {
+    console.error(`Delete Popup error for ID (${popupId}):`, error);
+    throw error;
+  }
+};