From d4c07f9395268453e27b85a9be661014fa6635f2 Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 14:07:10 +0530 Subject: [PATCH 1/7] delete join us cards functionality issue#790 --- frontend/.env | 2 + .../Admin/Components/JoinUs/Card/Card.jsx | 13 ++-- .../pages/Admin/Components/JoinUs/JoinUs.jsx | 76 ++++++++++++++++++- 3 files changed, 81 insertions(+), 10 deletions(-) diff --git a/frontend/.env b/frontend/.env index ad1ac9f1..21434a3b 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1 +1,3 @@ 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..f7288952 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx @@ -1,8 +1,10 @@ import style from "./card.module.scss"; export function Card(props) { - return ( + + return ( +

{props.content.name}

@@ -13,13 +15,12 @@ export function Card(props) {

{props.content.contact}

{props.content.description}

{props.content.email}

- Linkdin -
- - + LinkedIn +
+
- +
); } \ No newline at end of file diff --git a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx index 737e070c..729f98b5 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx @@ -5,6 +5,10 @@ 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 { useState } from "react"; +// import { END_POINT } from "../../../../../config/api"; +import axios from "axios"; +import { SimpleToast } from "../../../../components/util/Toast/Toast.jsx"; export function JoinUs() { const [joinUsData, setJoinUsData] = useState([]); const [isLoaded,setIsLoaded] = useState(false); @@ -21,28 +25,92 @@ export function JoinUs() { setIsLoaded(false) console.log(data) } + + /* card deleting functionality */ + + const handleDeleteSuccess = (id) => { + setJoinUsData(prevData => prevData.filter(item => item._id !== id)); + console.log(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() }, []) - + return (

Join Us

{isLoaded?:null}
-
+ {joinUsData &&
{ joinUsData.map((data) => { return ( - + ); }) } -
+
} + +
); } From 31e3d4ff7389e963e99654bb923bc1c9d290f08f Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 14:20:11 +0530 Subject: [PATCH 2/7] delete join us cards functionality issue#790 --- .../Admin/Components/JoinUs/Card/Card.jsx | 2 +- .../pages/Admin/Components/JoinUs/JoinUs.jsx | 28 +++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx index f7288952..30bdd224 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx @@ -17,7 +17,7 @@ export function Card(props) {

{props.content.email}

LinkedIn
- +
diff --git a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx index 729f98b5..7c31071f 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx @@ -12,7 +12,7 @@ import { SimpleToast } from "../../../../components/util/Toast/Toast.jsx"; export function JoinUs() { const [joinUsData, setJoinUsData] = useState([]); const [isLoaded,setIsLoaded] = useState(false); - const fetchJoinUs = async () => { + const FetchJoinUs = async () => { const response = await fetch(`${END_POINT}/joinUs`, { method: "GET", headers: { @@ -28,15 +28,15 @@ export function JoinUs() { /* card deleting functionality */ - const handleDeleteSuccess = (id) => { + const HandleDeleteSuccess = (id) => { setJoinUsData(prevData => prevData.filter(item => item._id !== id)); console.log(id); }; - const [openDeleteToast, setDeleteToast] = useState(false); - const [openDeleteError, setDeleteError] = useState(false); + const [OpenDeleteToast, setDeleteToast] = useState(false); + const [OpenDeleteError, setDeleteError] = useState(false); - const onClickDelete = async (id) => { + const OnClickDelete = async (id) => { const token = localStorage.getItem("token"); try { @@ -49,7 +49,7 @@ export function JoinUs() { if (message.message === "Deleted successfully") { setDeleteToast(true); // update and set the joinUsData - handleDeleteSuccess(id); + HandleDeleteSuccess(id); } else { @@ -62,14 +62,14 @@ export function JoinUs() { } }; - const handleDeleteToast = (event, reason) => { + const HandleDeleteToast = (event, reason) => { if (reason === "clickaway") { return; } setDeleteToast(false); }; - const handleDeleteError = (event, reason) => { + const HandleDeleteError = (event, reason) => { if (reason === "clickaway") { return; } @@ -79,7 +79,7 @@ export function JoinUs() { useEffect(() => { setIsLoaded(true) - fetchJoinUs() + FetchJoinUs() }, []) return ( @@ -92,7 +92,7 @@ export function JoinUs() { { joinUsData.map((data) => { return ( - + ); }) } @@ -100,15 +100,15 @@ export function JoinUs() { } From 59b88a783df94fd1117f76d275e95d54f408a518 Mon Sep 17 00:00:00 2001 From: Swayam Rana <122097724+SwayamRana808@users.noreply.github.com> Date: Sun, 12 May 2024 17:43:04 +0530 Subject: [PATCH 3/7] Update .env --- frontend/.env | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/.env b/frontend/.env index 21434a3b..ad1ac9f1 100644 --- a/frontend/.env +++ b/frontend/.env @@ -1,3 +1 @@ REACT_APP_API="https://community-website-backend.onrender.com" - - \ No newline at end of file From 94eed28e6a5ce6c31cc6b3b039c82e99e5044f92 Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 19:36:59 +0530 Subject: [PATCH 4/7] Added loader in delete button --- .../Admin/Components/JoinUs/Card/Card.jsx | 33 ++++++--- .../Components/JoinUs/Card/card.module.scss | 74 +++++++++++++++++++ .../pages/Admin/Components/JoinUs/JoinUs.jsx | 22 ++---- 3 files changed, 105 insertions(+), 24 deletions(-) diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx index 30bdd224..e06f63c2 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx @@ -1,10 +1,22 @@ +import { useState } from "react"; import style from "./card.module.scss"; - export function Card(props) { - - - return ( - + + const [isDelete, setIsDelete] = useState(true); + 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}

@@ -16,11 +28,14 @@ export function Card(props) {

{props.content.description}

{props.content.email}

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 7c31071f..81d7de54 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx @@ -5,15 +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 { useState } from "react"; -// import { END_POINT } from "../../../../../config/api"; 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 response = await fetch(`${END_POINT}/joinUs`, { method: "GET", headers: { "Content-Type": "application/json", @@ -29,36 +27,31 @@ export function JoinUs() { /* card deleting functionality */ const HandleDeleteSuccess = (id) => { - setJoinUsData(prevData => prevData.filter(item => item._id !== id)); - console.log(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"); + const token = localStorage.getItem("token"); try { - const response = await axios.delete(`${END_POINT}/joinUs/deleteJoinUs`, { + await new Promise(resolve => setTimeout(resolve, 5000)); + const response = await axios.delete(`${END_POINT}/joinU/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); - - + HandleDeleteSuccess(id); } else { setDeleteError(true); } } catch (err) { - setDeleteError(true); - - + setDeleteError(true); } }; @@ -76,7 +69,6 @@ export function JoinUs() { setDeleteError(false); }; - useEffect(() => { setIsLoaded(true) FetchJoinUs() From dd5134f78ff7943538cf786ea7b37fb4d48f97ca Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 19:39:29 +0530 Subject: [PATCH 5/7] Added loader in delete button issue#790 --- frontend/.env | 2 +- frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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/JoinUs.jsx b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx index 81d7de54..068aadcd 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx @@ -38,7 +38,7 @@ export function JoinUs() { try { await new Promise(resolve => setTimeout(resolve, 5000)); - const response = await axios.delete(`${END_POINT}/joinU/deleteJoinUs`, { + const response = await axios.delete(`${END_POINT}/joinUs/deleteJoinUs`, { headers: { Authorization: `Bearer ${token}` }, data: { itemId: id }, }); From be4758b59b750359ed56da060f5d6101da650fd3 Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 19:40:18 +0530 Subject: [PATCH 6/7] Added loader in delete button issue#790 --- frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx index 068aadcd..b6ff9584 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/JoinUs.jsx @@ -37,7 +37,6 @@ export function JoinUs() { const token = localStorage.getItem("token"); try { - await new Promise(resolve => setTimeout(resolve, 5000)); const response = await axios.delete(`${END_POINT}/joinUs/deleteJoinUs`, { headers: { Authorization: `Bearer ${token}` }, data: { itemId: id }, From fc222d783a86de35d2c24c96d75eebd41543183c Mon Sep 17 00:00:00 2001 From: swayamName1 Date: Sun, 12 May 2024 19:41:29 +0530 Subject: [PATCH 7/7] Added loader in delete button issue#790 --- frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx index e06f63c2..0d2dfad7 100644 --- a/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx +++ b/frontend/src/pages/Admin/Components/JoinUs/Card/Card.jsx @@ -1,10 +1,8 @@ import { useState } from "react"; import style from "./card.module.scss"; export function Card(props) { - - const [isDelete, setIsDelete] = useState(true); + const [isLoading, setIsLoading] = useState(false); - const handleDeleteClick = async () => { setIsLoading(true); try { @@ -33,7 +31,6 @@ export function Card(props) { )} -