Setup Snackbar Provider

submit-web/src/App.tsx

@@ -7,6 +7,7 @@ import { OidcConfig } from "@/utils/config";
 import { theme } from "@/styles/theme";
 import RouterProviderWithAuthContext from "@/router";
 import ModalProvider from "./components/Shared/Modals/ModalProvider";
+import SnackBarProvider from "./components/Shared/Popups/SnackBarProvider";
 const queryClient = new QueryClient();
 
 function App() {
@@ -16,6 +17,7 @@ function App() {
         <ThemeProvider theme={theme}>
           <AuthProvider {...OidcConfig}>
             <ModalProvider />
+            <SnackBarProvider />
             <RouterProviderWithAuthContext />
           </AuthProvider>
         </ThemeProvider>

submit-web/src/components/Shared/Modals/ConfirmationModal.tsx

@@ -0,0 +1,40 @@
+import {
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  Button,
+} from "@mui/material";
+import { useModal } from "./modalStore";
+
+type ConfirmationModalProps = {
+  title: string;
+  description: string;
+  onConfirm: () => void;
+};
+
+const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
+  title,
+  description,
+  onConfirm,
+}) => {
+  const { setClose } = useModal();
+  return (
+    <>
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText>{description}</DialogContentText>
+      </DialogContent>
+      <DialogActions sx={{ padding: "1rem" }}>
+        <Button onClick={setClose} color="primary">
+          Cancel
+        </Button>
+        <Button variant="contained" onClick={onConfirm} color="error">
+          Confirm
+        </Button>
+      </DialogActions>
+    </>
+  );
+};
+
+export default ConfirmationModal;

submit-web/src/components/Shared/Popups/SnackBarProvider.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { Snackbar, Alert } from "@mui/material";
+import { useSnackbar } from "./snackbarStore";
+
+const SnackBarProvider: React.FC = () => {
+  const { isOpen, setClose, severity, message } = useSnackbar();
+
+  return (
+    <Snackbar
+      open={isOpen}
+      autoHideDuration={3000}
+      onClose={setClose}
+      anchorOrigin={{ vertical: "bottom", horizontal: "left" }}
+    >
+      <Alert
+        onClose={setClose}
+        severity={severity}
+        variant="filled"
+        sx={{ width: "100%" }}
+      >
+        {message}
+      </Alert>
+    </Snackbar>
+  );
+};
+
+export default SnackBarProvider;

submit-web/src/components/Shared/Popups/snackbarStore.ts

@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+interface SnackbarState {
+  isOpen: boolean;
+  severity: "success" | "error" | "warning" | "info";
+  message: string;
+  setOpen: (
+    message: string,
+    severity?: "success" | "error" | "warning" | "info",
+  ) => void;
+  setClose: () => void;
+}
+
+export const useSnackbar = create<SnackbarState>((set) => ({
+  isOpen: false,
+  severity: "success", // default severity
+  message: "",
+  setOpen: (message, severity = "success") =>
+    set({ isOpen: true, message, severity }),
+  setClose: () => set({ isOpen: false }),
+}));
+
+// Helper function to notify with different severities
+export const notify = {
+  success: (message: string) =>
+    useSnackbar.getState().setOpen(message, "success"),
+  error: (message: string) => useSnackbar.getState().setOpen(message, "error"),
+  warning: (message: string) =>
+    useSnackbar.getState().setOpen(message, "warning"),
+  info: (message: string) => useSnackbar.getState().setOpen(message, "info"),
+};

submit-web/src/routes/_authenticated/users/index.tsx

@@ -18,12 +18,10 @@
 import { useDeleteUser, useUsersData } from "@/hooks/useUsers";
 import { useState } from "react";
 import { useQueryClient } from "@tanstack/react-query";
-import ConfirmationDialog from "@/components/Shared/Popups/ConfirmationDialog";
-import CustomSnackbar, {
-  SnackBarMessageProps,
-} from "@/components/Shared/Popups/SnackBarMessage";
 import UserModal from "@/components/App/Users/UserModal";
 import { useModal } from "@/components/Shared/Modals/modalStore";
+import { notify } from "@/components/Shared/Popups/snackbarStore";
+import ConfirmationModal from "@/components/Shared/Modals/ConfirmationModal";
 
 export const Route = createFileRoute("/_authenticated/users/")({
   component: UsersPage,
@@ -33,19 +31,15 @@
   const queryClient = useQueryClient();
   const { setOpen } = useModal();
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [isConfirmationOpen, setIsConfirmationOpen] = useState(false);
   const [userIdToDelete, setUserIdToDelete] = useState<number | null>(null);
-  const [snackbarConfig, setSnackbarConfig] =
-    useState<SnackBarMessageProps | null>(null);
-
   const { isLoading, data, isError, error } = useUsersData();
 
   const handleOnSubmit = () => {
     queryClient.invalidateQueries({ queryKey: ["users"] });
     if (selectedUser) {
-      setSnackbarConfig({ message: "User updated successfully!" });
+      notify.success("User updated successfully!");
     } else {
-      setSnackbarConfig({ message: "User added successfully!" });
+      notify.success("User created successfully!");
     }
   };
 
@@ -57,37 +51,35 @@
   /** Delete user START */
 
   const onDeleteSuccess = () => {
-    setSnackbarConfig({ message: "User deleted successfully!" });
+    notify.success("User deleted successfully!");
     queryClient.invalidateQueries({
       queryKey: ["users"],
     });
   };
 
   const onDeleteError = (error: AxiosError) => {
-    setSnackbarConfig({
-      message: `User deletion failed! ${error.message}`,
-      severity: "error",
-    });
+    notify.error(`User deletion failed! ${error.message}`);
   };
 
   const { mutate: deleteUser } = useDeleteUser(onDeleteSuccess, onDeleteError);
 
   const handleDeleteUser = () => {
-    setSnackbarConfig({ message: "" });
+    notify.success("User deleted successfully!");
     if (userIdToDelete !== null) {
       deleteUser(userIdToDelete);
-      setIsConfirmationOpen(false);
+      setUserIdToDelete(null);
     }
   };
 
-  const handleOpenConfirmationDialog = (userId: number) => {
+  const handleOpenConfirmationModal = (userId: number) => {
     setUserIdToDelete(userId);
-    setIsConfirmationOpen(true);
-  };
-
-  const handleCloseConfirmationDialog = () => {
-    setIsConfirmationOpen(false);
-    setUserIdToDelete(null);
+    setOpen(
+      <ConfirmationModal
+        title="Delete User"
+        description="Are you sure you want to delete this user?"
+        onConfirm={handleDeleteUser}
+      />
+    );
   };
 
   /** Delete user END */
@@ -155,7 +147,7 @@
                   <IconButton
                     aria-label="delete"
                     color="error"
-                    onClick={() => handleOpenConfirmationDialog(row.id)}
+                    onClick={() => handleOpenConfirmationModal(row.id)}
                   >
                     <Delete />
                   </IconButton>
@@ -165,19 +157,6 @@
           </TableBody>
         </Table>
       </TableContainer>
-      <ConfirmationDialog
-        isOpen={isConfirmationOpen}
-        title="Delete User"
-        description="Are you sure you want to delete this user?"
-        onConfirm={handleDeleteUser}
-        onCancel={handleCloseConfirmationDialog}
-      />
-      {snackbarConfig?.message && (
-        <CustomSnackbar
-          message={snackbarConfig.message}
-          severity={snackbarConfig.severity}
-        />
-      )}
     </>
   );
 }