From 05e0a47d77ffcd751f2ba570023c2a231aece89a Mon Sep 17 00:00:00 2001
From: Nora Kauczor <n.kauczor@web.de>
Date: Fri, 15 Nov 2024 18:31:46 +0100
Subject: [PATCH] prevent several requests of activation, deactivation or
 deletion for the same vocab by user incl. preventing displaying the toast
 message twice

---
 frontend/src/App.tsx                            | 15 ++++++++++++---
 frontend/src/components/VocabList/VocabList.tsx |  3 ---
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 7e084366..08851eb9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -125,10 +125,13 @@ function App() {
     }
 
     function activateVocab(id: string): void {
+        if (toast.isActive(`activate-vocab-${id}`)) {
+            return;
+        }
         axios.put(`api/vocab/activate/${id}`)
             .then(() => {
                 console.log(`Successfully activated vocab with ID ${id}.`)
-                toast.success("Vocab successfully activated.")
+                toast.success("Vocab successfully activated.", { toastId: `activate-vocab-${id}` })
                 getAllVocabsOfLanguage()
             })
             .catch(error => {
@@ -138,10 +141,13 @@ function App() {
     }
 
     function deactivateVocab(id: string): void {
+        if (toast.isActive(`deactivate-vocab-${id}`)) {
+            return;
+        }
         axios.put(`api/vocab/deactivate/${id}`)
             .then(() => {
                 console.log(`Successfully deactivated vocab with ID ${id}.`)
-                toast.success("Vocab successfully deactivated.")
+                toast.success("Vocab successfully deactivated.", { toastId: `deactivate-vocab-${id}` })
                 getAllVocabsOfLanguage()
             })
             .catch(error => {
@@ -167,10 +173,13 @@ function App() {
     }
 
     function deleteVocab(id: string): void {
+        if (toast.isActive(`delete-vocab-${id}`)) {
+            return;
+        }
         axios.delete(`api/vocab/${id}`)
             .then(() => {
                 console.log(`Successfully deleted vocab with ID ${id}.`)
-                toast.success("Vocab successfully deleted")
+                toast.success("Vocab successfully deleted", { toastId: `delete-vocab-${id}` })
                 getAllVocabsOfLanguage()
             })
             .catch(error => {
diff --git a/frontend/src/components/VocabList/VocabList.tsx b/frontend/src/components/VocabList/VocabList.tsx
index 3f373688..e9c84b0d 100644
--- a/frontend/src/components/VocabList/VocabList.tsx
+++ b/frontend/src/components/VocabList/VocabList.tsx
@@ -18,7 +18,6 @@ export default function VocabList(props: Readonly<Props>) {
     const navigate = useNavigate()
 
     function handleClickActivate(id: string | null): void {
-        //  TODO falls gerade toast gezeigt wird, return
         if (!id || !props.activateVocab) {
             return
         }
@@ -27,7 +26,6 @@ export default function VocabList(props: Readonly<Props>) {
     }
 
     function handleClickDeactivate(id: string | null): void {
-        //  TODO falls gerade toast gezeigt wird, return
         if (!id || !props.deactivateVocab) {
             return
         }
@@ -45,7 +43,6 @@ export default function VocabList(props: Readonly<Props>) {
     }
 
     function handleClickDelete(id: string | null) {
-        //  TODO falls gerade toast gezeigt wird, return
         if (!id || !props.deleteVocab) {
             return
         }