add toast notifications

Johndev85 · Nov 22, 2023 · 3e387e3 · 3e387e3
1 parent fec6604
commit 3e387e3
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/src/app/dashboard/tournaments/page.jsx b/src/app/dashboard/tournaments/page.jsx
@@ -83,19 +83,26 @@ const TournamentPage = () => {
 
   //delete tournament
   async function deleteTournament(id) {
-    try {
-      const response = await fetch(`/api/tournaments/${id}`, {
-        method: "DELETE",
-      })
-      if (response.ok) {
-        setTournaments(
-          tournaments.filter((tournament) => tournament._id !== id)
-        )
-      } else {
-        console.error(`Error deleting tournament: ${response.statusText}`)
+    if (window.confirm("Are you sure you want to delete this tournament?")) {
+      try {
+        const response = await fetch(`/api/tournaments/${id}`, {
+          method: "DELETE",
+        })
+        if (response.ok) {
+          setTournaments(
+            tournaments.filter((tournament) => tournament._id !== id)
+          )
+          toast.success("Successfully deleted!")
+        } else {
+          const data = await response.json()
+          toast.error(`${data.message}`, {
+            duration: 2000,
+          })
+          console.error(`Error deleting tournament: ${response.statusText}`)
+        }
+      } catch (error) {
+        console.error(`Error deleting tournament: ${error}`)
       }
-    } catch (error) {
-      console.error(`Error deleting tournament: ${error}`)
     }
   }
 

diff --git a/src/app/dashboard/users-list/page.jsx b/src/app/dashboard/users-list/page.jsx
@@ -25,18 +25,20 @@ const UsersListPage = () => {
 
   //delete user
   const deleteUser = async (id) => {
-    try {
-      const response = await fetch(`/api/users/${id}`, {
-        method: "DELETE",
-      })
+    if (window.confirm("Are you sure you want to delete this user?")) {
+      try {
+        const response = await fetch(`/api/users/${id}`, {
+          method: "DELETE",
+        })
 
-      if (response.ok) {
-        setUsers(users.filter((user) => user._id !== id))
-      } else {
-        console.error(`Error deleting user: ${response.statusText}`)
+        if (response.ok) {
+          setUsers(users.filter((user) => user._id !== id))
+        } else {
+          console.error(`Error deleting user: ${response.statusText}`)
+        }
+      } catch (error) {
+        console.error(`Error deleting user: ${error}`)
       }
-    } catch (error) {
-      console.error(`Error deleting user: ${error}`)
     }
   }
 

diff --git a/src/components/ModalTournament/ModalTournament.jsx b/src/components/ModalTournament/ModalTournament.jsx
@@ -4,7 +4,7 @@
 import styles from "./modal.module.scss"
 
 import { useState } from "react"
-import ReactDOM from "react-dom"
+import toast, { Toaster } from "react-hot-toast"
 
 const ModalTournament = ({
   isModalOpen,
@@ -29,8 +29,17 @@ const ModalTournament = ({
         body: JSON.stringify(updateData),
       })
       if (!response.ok) {
+        if (response.status === 400) {
+          const data = await response.json()
+          toast.error(`${data.message}`, {
+            duration: 2000,
+          })
+        }
         throw new Error(`Error updating tournament: ${response.statusText}`)
+      } else {
+        toast.success("Successfully updated!")
       }
+
       fetchTournaments()
       setIsModalOpen(false)
       return await response.json()

diff --git a/src/components/ModalTournament/modal.module.scss b/src/components/ModalTournament/modal.module.scss
@@ -1,3 +1,5 @@
+@import "../../../src/app/mixins.scss";
+
 .modal {
   position: fixed;
   top: 0;
@@ -10,8 +12,8 @@
   justify-content: center;
   z-index: 1000;
   & .modalContent {
+    padding: 20px 40px 40px;
     background-color: white;
-    padding: 20px;
     border-radius: 10px;
     max-width: 500px;
     width: 100%;
@@ -57,6 +59,9 @@
           height: 35px;
           border-radius: 5px;
         }
+        & button {
+          @include btnStyles;
+        }
       }
     }
   }