Add confirm dialogs

jaaimino · Oct 29, 2024 · 4bdd4cb · 4bdd4cb
1 parent ad26c72
commit 4bdd4cb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 8 deletions.
diff --git a/src/pages/roster/index.js b/src/pages/roster/index.js
@@ -9,6 +9,7 @@ import { useAppContext } from "../../hooks/app-context";
 import { useLocalStorage } from "@mantine/hooks";
 import { OperativeModal, UpdateRosterModal } from "./modals";
 import { modals } from "@mantine/modals";
+import { notifications } from "@mantine/notifications";
 
 export default function Roster() {
     const { user: userData } = useAuth();
@@ -47,6 +48,10 @@ export default function Roster() {
             body: JSON.stringify(newOperative)
         }).then((data) => {
             if (data?.rosteropid) {
+                notifications.show({
+                    title: 'Added',
+                    message: `Successfully added ${operative.opname}.`,
+                  })
                 setRoster({
                     ...roster,
                     operatives: [...roster?.operatives, data]
@@ -74,6 +79,10 @@ export default function Roster() {
             body: JSON.stringify(updatedOperative)
         }).then((data) => {
             if (data?.rosteropid) {
+                notifications.show({
+                    title: 'Updated',
+                    message: `Successfully updated ${operative.opname}.`,
+                  })
                 setRoster({
                     ...roster,
                     operatives: roster.operatives?.map((op) => op.rosteropid === data.rosteropid ? data : op)
@@ -90,14 +99,18 @@ export default function Roster() {
             children: <OperativeModal roster={roster} operative={operative} onClose={handleEditOperative} />
         });
     };
-    const handleDeleteOperative = (rosteropid) => {
-        api.request(`/rosteroperative.php?roid=${rosteropid}`, {
+    const handleDeleteOperative = (operative) => {
+        api.request(`/rosteroperative.php?roid=${operative.rosteropid}`, {
             method: "DELETE"
         }).then((data) => {
             if (data?.success) {
+                notifications.show({
+                    title: 'Deleted',
+                    message: `Successfully deleted ${operative.opname}.`,
+                  })
                 setRoster({
                     ...roster,
-                    operatives: [...roster?.operatives?.filter((op) => op.rosteropid !== rosteropid)]
+                    operatives: [...roster?.operatives?.filter((op) => op.rosteropid !== operative.rosteropid)]
                 });
             }
         })
@@ -111,7 +124,7 @@ export default function Roster() {
                 </Text>
             ),
             labels: { confirm: 'Confirm', cancel: 'Cancel' },
-            onConfirm: () => handleDeleteOperative(operative.rosteropid),
+            onConfirm: () => handleDeleteOperative(operative),
         });
     };
     const handleDeleteRoster = () => {

diff --git a/src/pages/rosters/index.js b/src/pages/rosters/index.js
@@ -10,6 +10,7 @@ import { modals } from "@mantine/modals";
 import { AddRosterModal } from "./modals";
 import useAuth from "../../hooks/use-auth";
 import { useLocalStorage } from "@mantine/hooks";
+import { notifications } from "@mantine/notifications";
 
 export default function Rosters() {
     const api = useAPI();
@@ -29,18 +30,26 @@ export default function Rosters() {
         }).then((data) => {
             if (data?.rosterid) {
                 navigate(`/r/${data?.rosterid}`)
+                notifications.show({
+                    title: 'Created',
+                    message: `Successfully create ${roster.rostername}.`,
+                  })
             }
         })
     }
 
-    const handleDeleteRoster = (rosterid) => {
-        api.request(`/roster.php?rid=${rosterid}`, {
+    const handleDeleteRoster = (roster) => {
+        api.request(`/roster.php?rid=${roster.rosterid}`, {
             method: "DELETE"
         }).then((data) => {
             if (data?.success) {
+                notifications.show({
+                    title: 'Deleted',
+                    message: `Successfully deleted ${roster.rostername}.`,
+                  })
                 setUser({
                     ...user,
-                    rosters: rosters?.filter((roster) => roster.rosterid !== rosterid)
+                    rosters: rosters?.filter((ros) => ros.rosterid !== roster.rosterid)
                 })
             }
         })
@@ -55,7 +64,7 @@ export default function Rosters() {
                 </Text>
             ),
             labels: { confirm: 'Confirm', cancel: 'Cancel' },
-            onConfirm: () => handleDeleteRoster(roster.rosterid),
+            onConfirm: () => handleDeleteRoster(roster),
         });
     };