[Frontend] Integrate Delete Contact Us API Fixed

frontend/src/pages/Admin/Components/Contact/Card/Card.jsx

@@ -1,6 +1,6 @@
 import style from "./card.module.scss";
 
-export function Card({ content: { email, message, name, subject } }) {
+export function Card({ content: { email, message, name, subject }, id , handleDelete }) {
   return (
     <div className={style["card-item"]}>
       <div className={style["card-info"]}>
@@ -12,7 +12,7 @@ export function Card({ content: { email, message, name, subject } }) {
           <a href={`mailto:${email}`}>
             <button className={style["button-edit"]}>Reply</button>
           </a>
-          <button className={style["button-delete"]}>Delete</button>
+          <button name={`${id}`} onClick={(e)=>handleDelete(e.currentTarget.name)} className={style["button-delete"]}>Delete</button>
         </div>
       </div>
     </div>

frontend/src/pages/Admin/Components/Contact/Contact.jsx

@@ -5,12 +5,18 @@ import Grid from "@material-ui/core/Grid";
 import { Card } from "./Card/index.js";
 import style from "./contactus.module.scss";
 import Loader from "../../../../components/util/Loader";
+import { SimpleToast } from "../../../../components/util/Toast/Toast.jsx";
 
 export function Contact() {
   const [contactUsData, setContactUsData] = useState([]);
   const [isLoaded, setIsLoaded] = useState(false);
+  const [toast, setToast] = useState({
+    toastStatus: false,
+    toastType: "",
+    toastMessage: "",
+  });
   const fetchJoinUs = async () => {
-    const response = await fetch(`${END_POINT}/getContactUs`, {
+    const response = await fetch(`${END_POINT}/contactus/getcontactus`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -21,24 +27,68 @@ export function Contact() {
     setContactUsData(data.ContactUs);
     setIsLoaded(false);
   };
+  const handleCloseToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setToast({ ...toast, toastStatus: false });
+  };
+  const handleDelete = async (id) => {
+    try {
+      const url = `${END_POINT}/contactus/deleteContactUs`;
+      const response = await fetch(url, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${localStorage.getItem("token")}`,
+        },
+        body: JSON.stringify({ contactUsId: id }),
+      });
+
+      const data = await response.json();
+      setToast({
+        ...toast,
+        toastMessage: "Successfully deleted!",
+        toastStatus: true,
+        toastType: "success",
+      });
+      fetchJoinUs()
+    } catch (error) {
+      console.log(error);
+      setToast({
+        ...toast,
+        toastMessage: "Unable to delete!",
+        toastStatus: true,
+        toastType: "error",
+      });
+    }
+  };
   useEffect(() => {
     setIsLoaded(true);
     fetchJoinUs();
   }, []);
   return (
     <div>
       <h1 style={{ textAlign: "center" }}> Contact Us </h1>
-      <div className={style["data-loader"]}>{isLoaded ? <Loader /> : null}</div>
+      {isLoaded ? <div className={style["data-loader"]}><Loader /></div>:
       <div className={style["card-container"]}>
         <Grid container spacing={2}>
           <Grid item>
             {contactUsData &&
               contactUsData.map((data) => {
-                return <Card key={data._id} content={data} />;
+                return <Card key={data._id} id={data._id} handleDelete={handleDelete} content={data} />;
               })}
           </Grid>
         </Grid>
-      </div>
+      </div>}
+      {toast.toastStatus && (
+        <SimpleToast
+          open={toast.toastStatus}
+          message={toast.toastMessage}
+          handleCloseToast={handleCloseToast}
+          severity={toast.toastType}
+        />
+      )}
     </div>
   );
 }