From 3e387e3edd9781d566e4efca694daa220a5ab8ae Mon Sep 17 00:00:00 2001 From: JohnB Date: Wed, 22 Nov 2023 01:23:43 -0500 Subject: [PATCH] add toast notifications --- src/app/dashboard/tournaments/page.jsx | 31 ++++++++++++------- src/app/dashboard/users-list/page.jsx | 22 +++++++------ .../ModalTournament/ModalTournament.jsx | 11 ++++++- .../ModalTournament/modal.module.scss | 7 ++++- 4 files changed, 47 insertions(+), 24 deletions(-) diff --git a/src/app/dashboard/tournaments/page.jsx b/src/app/dashboard/tournaments/page.jsx index cc8bd9c..8bbc869 100644 --- 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 index 48ba239..5c08f0d 100644 --- 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 index 50f302f..75525de 100644 --- 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 index 76381eb..1b42b38 100644 --- 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; + } } } }