🍁 Integrated Delete Faq with Backend #679 (#973)

* Integrated Delete Faq with Backend #679 * Integrated Delete Faq with Backend #679
HITK-TECH-Community · May 26, 2024 · 61b3455 · 61b3455
1 parent 0072b98
commit 61b3455
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 18 deletions.
diff --git a/frontend/src/pages/Admin/Components/Faq/Faq.jsx b/frontend/src/pages/Admin/Components/Faq/Faq.jsx
@@ -2,8 +2,6 @@ import React from "react";
 import style from "./faq.module.scss";
 import { AiFillEdit } from "react-icons/ai";
 import { AiOutlinePlus } from "react-icons/ai";
-import { Link } from "react-router-dom";
-
 export function Faq(props) {
   return (
     <div className={style["faq"]}>
@@ -12,17 +10,17 @@ export function Faq(props) {
         <div className={style["card-item"]}>
           <div className={style["clickable-card"]}>
             <div className={style["card-title"]}>
-              <Link onClick={() => props.setTab(10)} style={{ color: "white" }}>
+              <p onClick={() => props.setTab(10)} style={{ color: "white" }}>
                 ADD FAQ
-              </Link>
+              </p>
               <AiOutlinePlus className={style["add"]} />
             </div>
             <div className={style["card-content"]}>
               <p style={{ textAlign: "left" }}>To add a new faq</p>
               <p style={{ color: "red", cursor: "pointer", textAlign: "left" }}>
-                <Link onClick={() => props.setTab(10)} style={{ color: "red" }}>
+                <span onClick={() => props.setTab(10)} style={{ color: "red" }}>
                   CLICK HERE
-                </Link>
+                </span>
               </p>
             </div>
           </div>
@@ -34,9 +32,9 @@ export function Faq(props) {
               <AiFillEdit className={style["editt"]} />
             </div>
             <div className={style["card-content"]}>
-              <Link onClick={()=>props.setTab(17)} className={style["main-btn"]}>
+              <p onClick={() => props.setTab(17)} className={style["main-btn"]}>
                 Manage here
-              </Link>
+              </p>
             </div>
           </div>
         </div>
@@ -47,7 +45,10 @@ export function Faq(props) {
               <AiFillEdit className={style["editt"]} />
             </div>
             <div className={style["card-content"]}>
-              <div onClick={()=>props.setTab(18)} className={style["main-btn"]}>
+              <div
+                onClick={() => props.setTab(18)}
+                className={style["main-btn"]}
+              >
                 Manage here
               </div>
             </div>

diff --git a/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx b/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx
@@ -10,10 +10,21 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { END_POINT } from "../../../../../config/api";
 import Loader from "../../../../../components/util/Loader";
 import style from "./manage-faq.module.scss";
+import { SimpleToast } from "../../../../../components/util/Toast";
+
 export function ManageFaq() {
   const [faqs, setFaqs] = useState([]);
-  const [expanded, setExpanded] = React.useState(false);
-  const [isFetching, setIsFetching] = useState(false);
+  const [expanded, setExpanded] = useState(false);
+  const [isFetching, setIsFetching] = useState(true);
+  const [open, setOpenToast] = useState(false);
+  const [toastMessage, setToastMessage] = useState("");
+  const [severity, setSeverity] = useState("success");
+  const [reload, setReload] = useState(true);
+  const handleCloseToast = () => {
+    setTimeout(() => {
+      setOpenToast(false);
+    }, 500);
+  };
   const handleChange = (panel) => (event, isExpanded) => {
     setExpanded(isExpanded ? panel : false);
   };
@@ -26,20 +37,53 @@ export function ManageFaq() {
       setIsFetching(false);
     } catch (err) {
       console.log(err.message);
+      setIsFetching(false);
     }
   }
-  useEffect(() => {
+
+  const deleteFaq = async (faqId) => {
     setIsFetching(true);
+    const url = `${END_POINT}/faq/deleteFaq`;
+    const body = {
+      faqId: faqId,
+    };
+    const headers = {
+      "Content-Type": "application/json",
+      authorization: `Bearer ${localStorage.getItem("token")}`,
+    };
+    try {
+      const response = await fetch(url, {
+        method: "PUT",
+        headers: headers,
+        body: JSON.stringify(body),
+      });
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const data = await response.json();
+      setToastMessage(data.message);
+      setOpenToast(true);
+      setSeverity("success");
+      setReload(!reload);
+    } catch (error) {
+      setToastMessage("Failed to delete Faq");
+      setOpenToast(true);
+      setSeverity("error");
+    } finally {
+      setIsFetching(false);
+    }
+  };
+  useEffect(() => {
     fetchAllFaq();
-  }, []);
+  }, [reload]);
 
   return (
     <div>
       <h1 style={{ textAlign: "center" }}>Manage FAQ</h1>
       <div className={style["faq"]}>
         <div className={`${style["faq-block"]}`}>
           {isFetching ? (
-            <Loader></Loader>
+            <Loader />
           ) : (
             faqs.map((faq) => (
               <Accordion
@@ -58,10 +102,22 @@ export function ManageFaq() {
                   aria-controls="panel1a-content"
                   id="panel1a-header"
                 >
-                  <h3 className={style["faq-question"]}>
-                    <i className="fa fa-question-circle" aria-hidden="true"></i>
-                    &nbsp; &nbsp;{faq.question}
-                  </h3>
+                  <div
+                    style={{
+                      display: "flex",
+                      justifyContent: "space-between",
+                      alignItems: "center",
+                      width: "100%",
+                    }}
+                  >
+                    <h3 className={style["faq-question"]}>
+                      <i
+                        className="fa fa-question-circle"
+                        aria-hidden="true"
+                      ></i>
+                      &nbsp; &nbsp;{faq.question}
+                    </h3>
+                  </div>
                 </AccordionSummary>
                 <AccordionDetails className={style["accord-details"]}>
                   <Typography style={{ color: "white" }}>
@@ -81,6 +137,7 @@ export function ManageFaq() {
                       className={style["btns"]}
                       variant="contained"
                       endIcon={<Delete />}
+                      onClick={() => deleteFaq(faq._id)}
                     >
                       DELETE
                     </Button>
@@ -91,6 +148,12 @@ export function ManageFaq() {
           )}
         </div>
       </div>
+      <SimpleToast
+        open={open}
+        message={toastMessage}
+        severity={severity}
+        handleCloseToast={handleCloseToast}
+      />
     </div>
   );
 }