Merge pull request #160 from bluewave-labs/get-banner-by-id

Editing and Deleting Banners

backend/src/controllers/banner.controller.js

@@ -174,6 +174,31 @@ class BannerController {
       res.status(statusCode).json(payload);
     }
   }
+
+  async getBannerById(req, res) {
+    try {
+      const { id } = req.params;
+
+      if (isNaN(id) || id.trim() === "") {
+        return res.status(400).json({ errors: [{ msg: "Invalid id" }] });
+      }
+
+      const banner = await bannerService.getBannerById(id);
+
+      if (!banner) {
+        return res.status(404).json({ errors: [{ msg: "Banner not found" }] });
+      }
+
+      res.status(200).json(banner);
+    } catch (err) {
+      const { statusCode, payload } = internalServerError(
+        "GET_BANNER_BY_ID_ERROR",
+        err.message,
+      );
+      res.status(statusCode).json(payload);
+    }
+  }
+
 }
 
 module.exports = new BannerController();

backend/src/routes/banner.routes.js

@@ -9,5 +9,6 @@ router.delete("/delete_banner/:id", authenticateJWT, bannerController.deleteBann
 router.put("/edit_banner/:id", authenticateJWT, bannerController.editBanner);
 router.get("/all_banners", authenticateJWT, bannerController.getAllBanners);
 router.get("/banners", authenticateJWT, bannerController.getBanners);
+router.get("/get_banner/:id", authenticateJWT, bannerController.getBannerById);
 
 module.exports = router;

backend/src/service/banner.service.js

@@ -43,6 +43,16 @@ class BannerService {
 
     return updatedBanners[0];
   }
+
+  async getBannerById(bannerId) {
+    try {
+      return await Banner.findOne({
+        where: { id: bannerId },
+      });
+    } catch (error) {
+      throw new Error("Error retrieving banner by ID");
+    }
+  }
 }
 
 module.exports = new BannerService();

frontend/src/components/BannerPageComponents/BannerLeftContent/BannerLeftContent.jsx

@@ -16,7 +16,7 @@ const BannerLeftContent = ({ setIsTopPosition, url, setUrl, setButtonAction }) =
         <div className={styles.container}>
             <h2>Action</h2>
             <DropdownList 
-                actions={['No action', 'Open a URL', 'Open a URL in a new page']} 
+                actions={['No action', 'Open URL', 'Open URL in a new tab']} 
                 onActionChange={handleActionChange}
             />
             <h2>Position</h2>

frontend/src/components/TourComponents/List/List.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ListItem from './ListItem/ListItem';
 
-const List = ({ items, onSelectItem }) => {
+const List = ({ items }) => {
   return (
     <>
       {items.map(item => (
@@ -11,7 +11,7 @@ const List = ({ items, onSelectItem }) => {
           title={item.title}
           text={item.text}
           id={item.idItem}
-          onClick={() => onSelectItem(item.idItem)}
+          onClick={() => {}}
           onDelete={item.onDelete}
           onEdit={item.onEdit}
         />

frontend/src/scenes/bannerPage/BannerDefaultPage.jsx

@@ -1,87 +1,31 @@
-import React, { useState, useEffect } from 'react';
-import CreateActivityButton from "../../components/Button/CreateActivityButton/CreateActivityButton";
-import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
-import { ACTIVITY_TYPES } from "../../data/CreateActivityButtonData";
-import ParagraphCSS from "../../components/ParagraphCSS/ParagraphCSS";
+import React from 'react';
+import DefaultPageTemplate from '../../templates/DefaultPageTemplate/DefaultPageTemplate';
+import { getBanners, deleteBanner } from '../../services/bannerServices';
 import { useNavigate } from 'react-router-dom';
-import GuideMainPageTemplate from "../../templates/GuideMainPageTemplate/GuideMainPageTemplate";
-import { getBanners } from "../../services/bannerServices";
 import { ACTIVITY_TYPES_INFO } from '../../data/GuideMainPageData';
 
 const BannerDefaultPage = () => {
     const navigate = useNavigate();
-    const [banners, setBanners] = useState([]);
-    const [selectedItem, setSelectedItem] = useState(null);
-    const [isPopupOpen, setPopupOpen] = useState(false);
 
-    const handleSelect = (idItem) => {
-        setSelectedItem(idItem);
-    };
-
-    const handleDelete = () => {
-        setPopupOpen(false);
-    };
-
-    const handleOpenPopup = () => {
-        setPopupOpen(true);
-    };
-
-    const handleClosePopup = () => {
-        setPopupOpen(false);
-    };
+    const getBannerDetails = (banner) => ({
+        title: `Banner ${banner.id}`,
+        text: banner.bannerText,
+    });
 
-    const handleCreateItem = () => {
+    const navigateToCreate = (state) => {
+        navigate('/banner/create', state);
     };
 
-    const navigateToCreate = () => {navigate('/banner/create')}
-
-    useEffect(() => {
-        const fetchBanners = async () => {
-            try {
-                const bannerData = await getBanners();
-                setBanners(bannerData);
-            } catch (error) {
-                console.error("Failed to fetch banners:", error);
-            }
-        };
-
-        fetchBanners();
-    }, []);
-
-    const style = {
-        display: "flex",
-        flexDirection: "column",
-        width: "100%",
-        justifyContent: "center",
-        alignItems: "center",
-    };
-
-    const items = banners.map(banners => ({
-        idItem: banners.id,
-        title: `Banner ${banners.id}`,
-        text: banners.bannerText,
-        onDelete: () => console.log(`Delete banner ${banners.id}`), // Placeholder for delete function
-        onEdit: () => console.log(`Edit banner ${banners.id}`),     // Placeholder for edit function
-      }));
-
     return (
-        <HomePageTemplate>
-            {banners.length === 0 ? (
-                <div style={style}>
-                    <ParagraphCSS />
-                    <CreateActivityButton type={ACTIVITY_TYPES.BANNERS} onClick={navigateToCreate} />
-                </div>
-            ) : (
-                <GuideMainPageTemplate items={items}
-                    handleSelect={handleSelect}
-                    handleDelete={handleDelete}
-                    isPopupOpen={isPopupOpen}
-                    handleClosePopup={handleClosePopup} 
-                    type={ACTIVITY_TYPES_INFO.BANNERS}
-                    onClick={navigateToCreate}/>
-            )}
-        </HomePageTemplate>
+        <DefaultPageTemplate
+            getItems={getBanners}
+            deleteItem={deleteBanner}
+            navigateToCreate={navigateToCreate}
+            itemType={ACTIVITY_TYPES_INFO.BANNERS}
+            itemTypeInfo={ACTIVITY_TYPES_INFO.BANNERS}
+            getItemDetails={getBannerDetails}
+        />
     );
-}
+};
 
 export default BannerDefaultPage;

frontend/src/scenes/bannerPage/BannerPage.jsx

@@ -2,13 +2,15 @@ import HomePageTemplate from '../../templates/HomePageTemplate/HomePageTemplate'
 import GuideTemplate from '../../templates/GuideTemplate/GuideTemplate';
 import BannerLeftContent from '../../components/BannerPageComponents/BannerLeftContent/BannerLeftContent';
 import BannerLeftAppearance from '../../components/BannerPageComponents/BannerLeftAppearance/BannerLeftApperance';
-import { React, useState } from 'react';
+import { React, useState, useEffect } from 'react';
 import BannerPreview from '../../components/BannerPageComponents/BannerPreview/BannerPreview';
-import { addBanner } from '../../services/bannerServices';
-import { useNavigate } from 'react-router-dom';
+import { addBanner, getBannerById, editBanner } from '../../services/bannerServices';
+import { useNavigate, useLocation } from 'react-router-dom';
 
 const BannerPage = () => {
     const navigate = useNavigate();
+    const location = useLocation();
+
     const [backgroundColor, setBackgroundColor] = useState("#F9F5FF");
     const [fontColor, setFontColor] = useState("#344054");
     const [activeButton, setActiveButton] = useState(0);
@@ -21,25 +23,55 @@ const BannerPage = () => {
         setActiveButton(index);
     };
 
+    useEffect(() => {
+        if (location.state?.isEdit) {
+            const fetchBannerData = async () => {
+                try {
+                    const bannerData = await getBannerById(location.state.id);
+
+                    // Update the state with the fetched data
+                    setBackgroundColor(bannerData.backgroundColor || '#F9F5FF');
+                    setFontColor(bannerData.fontColor || '#344054');
+                    setBannerText(bannerData.bannerText || '');
+                    setUrl(bannerData.url || '');
+                    setButtonAction(bannerData.closeButtonAction || 'No action');
+                    setIsTopPosition(bannerData.position === 'top');
+
+                    console.log('Get banner successful:', bannerData);
+                } 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.');
+                    }
+                }
+            };
+
+            fetchBannerData();
+        }
+    }, [location.state?.isEdit, location.state?.id]);
+
     const onSave = async () => {
-        const bannerData = { 
-            backgroundColor:backgroundColor,
-            fontColor:fontColor,
-            url:url,
+        const bannerData = {
+            backgroundColor: backgroundColor,
+            fontColor: fontColor,
+            url: url,
             position: isTopPosition ? 'top' : 'bottom',
-            closeButtonAction:buttonAction.toLowerCase(),
+            closeButtonAction: buttonAction.toLowerCase(),
             bannerText: bannerText
         };
         try {
-          const response = await addBanner(bannerData);
-          console.log('Add banner successful:', response);
-          navigate('/banner');
+            const response = location.state?.isEdit
+            ? await editBanner(location.state?.id, bannerData)
+            : await addBanner(bannerData);
+            console.log('Add banner successful:', response);
+            navigate('/banner');
         } 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.');
+            }
         }
     }
 

frontend/src/scenes/hints/HintPage.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Button from "../../components/Button/Button";
-import List from "../../components/List/List";
+import List from "../../components/TourComponents/List/List";
 import HomePageTemplate from "../../templates/HomePageTemplate/HomePageTemplate";
 import HintDefaultPage from "./HintDefaultPage";
 import "./HintPage.css";