diff --git a/frontend/.env b/frontend/.env
index ad1ac9f1..c0da241b 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1 +1 @@
-REACT_APP_API="https://community-website-backend.onrender.com"
+REACT_APP_API="https://community-website-backend.onrender.com"
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx
index a8198c8b..0d2dfad7 100644
--- a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx
+++ b/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(
{props.content.name}
@@ -13,13 +25,14 @@ export function Card(props) {
{props.content.contact}
{props.content.description}
{props.content.email}
-
Linkdin
-
-
-
-
+
LinkedIn
+
+ {isLoading ? (
) : (
+
+ )}
+
-
);
}
\ No newline at end of file
diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss b/frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss
index 95232246..427e0159 100644
--- a/frontend/src/pages/Admin/Components/JoinUs/Card/card.module.scss
+++ b/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;
+ }
+}
diff --git a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx
index 737e070c..b6ff9584 100644
--- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx
+++ b/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 (
Join Us
{isLoaded?:null}
-
+ {joinUsData &&
{
joinUsData.map((data) => {
return (
-
+
);
})
}
-
+
}
+
+
);
}