🍁 [Frontend] Join US Enhancements (#864)

* delete join us cards functionality issue#790

* delete join us cards functionality issue#790

* Update .env

* Added loader in delete button

* Added loader in delete button issue#790

* Added loader in delete button issue#790

* Added loader in delete button issue#790

frontend/.env

@@ -1 +1 @@
-REACT_APP_API="https://community-website-backend.onrender.com"
+REACT_APP_API="https://community-website-backend.onrender.com"

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

@@ -1,8 +1,20 @@
+import { useState } from "react";
 import style from "./card.module.scss";
-
 export function Card(props) {
-    return (
 
+        const [isLoading, setIsLoading] = useState(false);
+        const handleDeleteClick = async () => {
+          setIsLoading(true);
+          try {
+            // Perform the delete API call
+            await props.OnClickDelete(props.content._id);
+          } catch (error) {
+            console.error("Error deleting:", error);
+          } finally {
+            setIsLoading(false);
+          }
+        };
+        return(
         <div className={style["card-item"]}>
             <div className={style["card-info"]}>
                 <h1>{props.content.name}</h1>
@@ -13,13 +25,14 @@ export function Card(props) {
                 <h3 className={style['card-detail']}>{props.content.contact}</h3>
                 <p>{props.content.description}</p>
                 <p>{props.content.email}</p>
-                <a className={style['card-link']} href={props.content.linkedin}>Linkdin</a>
-                 <div className={style["button-group"]}>
-                    <button className={style["button-edit"]}>URL</button>
-                    <button className={style["button-delete"]}>Delete</button>
-                  </div>
+                <a className={style['card-link']} href={props.content.linkdin} target="_blank" rel="noreferrer">LinkedIn</a>
+                <div className={style["button-group"]}>  
+                {isLoading ? (<div className={style["dot-loader"]}></div>) : (
+                <button className={style["button-delete"]} onClick={handleDeleteClick}>Delete
+                </button>
+                 )}
+                </div>
             </div>
-
         </div>
     );
 }

frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss

@@ -91,3 +91,77 @@
 .button-delete:hover {
   background-color: #fc3779;
 }
+
+.dot-loader {
+  position: relative;
+  margin:15px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #000000;
+  color: #000000;
+  animation: dotPulse 1s infinite linear; /* Added animation for main dot */
+  animation-delay: 0.25s;
+}
+
+.dot-loader::before,
+.dot-loader::after {
+  content: "";
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #000000;
+  color: #000000;
+}
+
+.dot-loader::before {
+  left: -15px;
+  box-shadow: 15px 0 0 -5px #000000;
+  animation: dotPulseBefore 1s infinite linear;
+  animation-delay: 0s;
+}
+
+.dot-loader::after {
+  left: 15px;
+  box-shadow: -15px 0 0 -5px #000000;
+  animation: dotPulseAfter 1s infinite linear;
+  animation-delay: 0.5s;
+}
+
+@keyframes dotPulseBefore {
+  0% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+  30% {
+    box-shadow: 0 0 0 2px #000000;
+  }
+  60%,
+  100% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+}
+@keyframes dotPulse {
+  0% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+  30% {
+    box-shadow: 0 0 0 2px #000000;
+  }
+  60%,
+  100% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+}
+@keyframes dotPulseAfter {
+  0% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+  30% {
+    box-shadow: 0 0 0 2px #000000;
+  }
+  60%,
+  100% {
+    box-shadow: 0 0 0 -5px #000000;
+  }
+}

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

@@ -5,11 +5,13 @@ import Grid from "@material-ui/core/Grid"
 import { Card } from './Card/index.js'
 import style from './joinus.module.scss'
 import Loader from "../../../../components/util/Loader";
+import axios from "axios";
+import { SimpleToast } from "../../../../components/util/Toast/Toast.jsx";
 export function JoinUs() {
   const [joinUsData, setJoinUsData] = useState([]);
   const [isLoaded,setIsLoaded] = useState(false);
-  const fetchJoinUs = async () => {
-    const response = await fetch(`${END_POINT}/joinUs`, {
+  const FetchJoinUs = async () => {
+  const response = await fetch(`${END_POINT}/joinUs`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -21,28 +23,85 @@ export function JoinUs() {
     setIsLoaded(false)
     console.log(data)
   }
+
+    /* card deleting functionality */
+
+  const HandleDeleteSuccess = (id) => {
+    setJoinUsData(prevData => prevData.filter(item => item._id !== id)); 
+  };
+
+  const [OpenDeleteToast, setDeleteToast] = useState(false);
+  const [OpenDeleteError, setDeleteError] = useState(false);
+
+  const OnClickDelete = async (id) => {
+  const token = localStorage.getItem("token");
+
+    try {
+      const response = await axios.delete(`${END_POINT}/joinUs/deleteJoinUs`, {
+        headers: { Authorization: `Bearer ${token}` },
+        data: { itemId: id },
+      });
+      const message = await response.data;
+      if (message.message === "Deleted successfully") {
+        setDeleteToast(true);
+        // update and set the joinUsData 
+        HandleDeleteSuccess(id);        
+      } else {
+        setDeleteError(true);
+      }
+    } catch (err) {
+      setDeleteError(true);   
+    }
+  };
+
+  const HandleDeleteToast = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setDeleteToast(false);
+  };
+
+  const HandleDeleteError = (event, reason) => {
+    if (reason === "clickaway") {
+      return;
+    }
+    setDeleteError(false);
+  };
+
   useEffect(() => {
     setIsLoaded(true)
-    fetchJoinUs()
+    FetchJoinUs()
   }, [])
-
+ 
   return (
     <div>
       <h1 style={{ textAlign: "center" }}> Join Us </h1>
       <div className={style["data-loader"]}>{isLoaded?<Loader/>:null}</div>
-      <div className={style["card-container"]}>
+      {joinUsData && <div className={style["card-container"]}>
         <Grid container spacing={2}>
           <Grid item>
             {
               joinUsData.map((data) => {
                 return (
-                  <Card key={data._id} content={data} />
+                  <Card key={data._id} content={data} OnClickDelete={OnClickDelete}/>
                 );
               })
             }
           </Grid>
         </Grid>
-      </div>
+      </div>}
+      <SimpleToast
+                open={OpenDeleteToast}
+                message="Resource deleted successfully!"
+                handleCloseToast={HandleDeleteToast}
+                severity="success"
+            />
+            <SimpleToast
+                open={OpenDeleteError}
+                message="Something went wrong. Try again!"
+                handleCloseToast={HandleDeleteError}
+                severity="error"
+            />
     </div>
   );
 }