From 5dbac862b6f29562e1a72e49d341cfd0b078d3ea Mon Sep 17 00:00:00 2001 From: Shivam Gaur <128178418+shivamgaur99@users.noreply.github.com> Date: Fri, 31 May 2024 10:36:58 +0530 Subject: [PATCH] =?UTF-8?q?=E2=AC=86=EF=B8=8FupdateFaq=20functionality=20a?= =?UTF-8?q?nd=20Integrate=20it=20with=20Backend=20(#983)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * adding updateFaq functionality * fix updateFaq --- .../Components/Faq/ManageFaq/ManageFaq.jsx | 167 ++++++++++++++++-- .../Faq/ManageFaq/manage-faq.module.scss | 124 ++++++++++++- 2 files changed, 276 insertions(+), 15 deletions(-) diff --git a/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx b/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx index bba4f997..d63e5d37 100644 --- a/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx +++ b/frontend/src/pages/Admin/Components/Faq/ManageFaq/ManageFaq.jsx @@ -1,5 +1,4 @@ -import React from "react"; -import { useEffect, useState } from "react"; +import React, { useEffect, useState, useCallback } from "react"; import Accordion from "@material-ui/core/Accordion"; import AccordionDetails from "@material-ui/core/AccordionDetails"; import AccordionSummary from "@material-ui/core/AccordionSummary"; @@ -11,6 +10,7 @@ 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"; +import { Button2 } from "../../../../../components/util/Button/index"; export function ManageFaq() { const [faqs, setFaqs] = useState([]); @@ -19,34 +19,38 @@ export function ManageFaq() { const [open, setOpenToast] = useState(false); const [toastMessage, setToastMessage] = useState(""); const [severity, setSeverity] = useState("success"); - const [reload, setReload] = useState(true); - const handleCloseToast = () => { + const [reload, setReload] = useState(false); + const [faqObject, setFaqObject] = useState({}); + const [openEditDialog, setOpenEditDialog] = useState(false); + const [formErrors, setFormErrors] = useState({}); + + const handleCloseToast = useCallback(() => { setTimeout(() => { setOpenToast(false); }, 500); - }; + }, []); + const handleChange = (panel) => (event, isExpanded) => { setExpanded(isExpanded ? panel : false); }; - async function fetchAllFaq() { + + const fetchAllFaq = useCallback(async () => { + setIsFetching(true); try { const response = await fetch(`${END_POINT}/faq/getFaq`); const data = await response.json(); - console.log(data); setFaqs(data.Faq); setIsFetching(false); } catch (err) { console.log(err.message); setIsFetching(false); } - } + }, []); const deleteFaq = async (faqId) => { setIsFetching(true); const url = `${END_POINT}/faq/deleteFaq`; - const body = { - faqId: faqId, - }; + const body = { faqId: faqId }; const headers = { "Content-Type": "application/json", authorization: `Bearer ${localStorage.getItem("token")}`, @@ -73,9 +77,70 @@ export function ManageFaq() { setIsFetching(false); } }; + + const updateFaq = async (faqId, updatedFaqDetails) => { + try { + const response = await fetch(`${END_POINT}/faq/updateFaq`, { + method: "PATCH", + headers: { + "Content-Type": "application/json", + authorization: `Bearer ${localStorage.getItem("token")}`, + }, + body: JSON.stringify({ faqId, ...updatedFaqDetails }), + }); + + if (!response.ok) { + throw new Error("Failed to update FAQ"); + } + + const data = await response.json(); + setToastMessage(data.message); + setOpenToast(true); + setSeverity("success"); + setReload((prev) => !prev); + } catch (error) { + console.error("Failed to update FAQ:", error.message); + setToastMessage("Failed to update FAQ"); + setOpenToast(true); + setSeverity("error"); + } + }; + + const handleEdit = (faqId) => { + const editedFaq = faqs.find((faq) => faq._id === faqId); + setFaqObject(editedFaq); + setOpenEditDialog(true); + }; + + const handleSaveEdit = () => { + if (validateForm()) { + updateFaq(faqObject._id, faqObject); + setOpenEditDialog(false); + } + }; + + const handleCancelEdit = () => { + setOpenEditDialog(false); + }; + + const validateForm = () => { + const errors = {}; + if (!faqObject.question) { + errors.question = "* Question is required"; + } + if (!faqObject.answer) { + errors.answer = "* Answer is required"; + } + if (!faqObject.tags.length || faqObject.tags[0] === "") { + errors.tags = "* At least one tag is required"; + } + setFormErrors(errors); + return Object.keys(errors).length === 0; + }; + useEffect(() => { fetchAllFaq(); - }, [reload]); + }, [fetchAllFaq, reload]); return (
@@ -129,8 +194,9 @@ export function ManageFaq() { className={style["btns"]} variant="contained" endIcon={} + onClick={() => handleEdit(faq._id)} > - UPDATE + EDIT
+ {faqObject && openEditDialog && ( +
+
+

Edit FAQ

+
+ + + setFaqObject({ ...faqObject, question: e.target.value }) + } + className={style["faq-input"]} + /> + {formErrors.question && ( + {formErrors.question} + )} + + + setFaqObject({ ...faqObject, answer: e.target.value }) + } + className={style["faq-input"]} + /> + {formErrors.answer && ( + {formErrors.answer} + )} + + + setFaqObject({ ...faqObject, isActive: e.target.checked }) + } + className={style["checkbox"]} + /> + + + setFaqObject({ + ...faqObject, + tags: e.target.value.split(",").map(tag => tag.trim()), + }) + } + className={style["faq-input"]} + /> + {formErrors.tags && ( + {formErrors.tags} + )} +
+ + +
+
+
+
+ )}