prevent several requests of activation, deactivation or deletion for …

…the same vocab by user incl. preventing displaying the toast message twice
nora-kauczor · Nov 15, 2024 · 05e0a47 · 05e0a47
1 parent be777f5
commit 05e0a47
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git 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
@@ -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
         }