From d557bfd7a6d52485807a1f574fc2dd91029fd7b8 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 2 Aug 2024 11:53:10 -0400 Subject: [PATCH 1/6] setup snackbarprovider --- submit-web/src/App.tsx | 2 + .../Shared/Popups/ConfirmationDialog.tsx | 32 ++++++++---- .../Shared/Popups/SnackBarMessage.tsx | 44 ----------------- .../Shared/Popups/SnackBarProvider.tsx | 27 ++++++++++ .../components/Shared/Popups/snackbarStore.ts | 31 ++++++++++++ .../src/routes/_authenticated/users/index.tsx | 49 ++++++------------- 6 files changed, 97 insertions(+), 88 deletions(-) delete mode 100644 submit-web/src/components/Shared/Popups/SnackBarMessage.tsx create mode 100644 submit-web/src/components/Shared/Popups/SnackBarProvider.tsx create mode 100644 submit-web/src/components/Shared/Popups/snackbarStore.ts diff --git a/submit-web/src/App.tsx b/submit-web/src/App.tsx index c3433dda..c98d2d2b 100644 --- a/submit-web/src/App.tsx +++ b/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() { + diff --git a/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx b/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx index c8e0685c..94a8942c 100644 --- a/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx +++ b/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx @@ -1,25 +1,39 @@ -import { Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Button } from '@mui/material'; +import { + DialogActions, + DialogContent, + DialogContentText, + DialogTitle, + Button, +} from "@mui/material"; +import { useModal } from "../Modals/modalStore"; type ConfirmationDialogProps = { - isOpen: boolean; title: string; description: string; onConfirm: () => void; - onCancel: () => void; }; -const ConfirmationDialog: React.FC = ({ isOpen, title, description, onConfirm, onCancel }) => { +const ConfirmationDialog: React.FC = ({ + title, + description, + onConfirm, +}) => { + const { setClose } = useModal(); return ( - + <> {title} {description} - - - + + + - + ); }; diff --git a/submit-web/src/components/Shared/Popups/SnackBarMessage.tsx b/submit-web/src/components/Shared/Popups/SnackBarMessage.tsx deleted file mode 100644 index db3e6167..00000000 --- a/submit-web/src/components/Shared/Popups/SnackBarMessage.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { useState, useEffect } from "react"; -import { Snackbar, Alert } from "@mui/material"; - -export type SnackBarMessageProps = { - message: string; - severity?: "success" | "info" | "warning" | "error"; -}; - -const SnackBarMessage: React.FC = ({ - message, - severity = "success", -}) => { - const [isOpen, setIsOpen] = useState(false); - - useEffect(() => { - if (message) { - setIsOpen(true); - } - }, [message]); - - const handleClose = () => { - setIsOpen(false); - }; - - return ( - - - {message} - - - ); -}; - -export default SnackBarMessage; diff --git a/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx b/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx new file mode 100644 index 00000000..e2b85ed1 --- /dev/null +++ b/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 ( + + + {message} + + + ); +}; + +export default SnackBarProvider; diff --git a/submit-web/src/components/Shared/Popups/snackbarStore.ts b/submit-web/src/components/Shared/Popups/snackbarStore.ts new file mode 100644 index 00000000..88dd702d --- /dev/null +++ b/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((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"), +}; diff --git a/submit-web/src/routes/_authenticated/users/index.tsx b/submit-web/src/routes/_authenticated/users/index.tsx index fd7bd44a..dadc98f7 100644 --- a/submit-web/src/routes/_authenticated/users/index.tsx +++ b/submit-web/src/routes/_authenticated/users/index.tsx @@ -19,11 +19,9 @@ 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"; export const Route = createFileRoute("/_authenticated/users/")({ component: UsersPage, @@ -33,19 +31,15 @@ function UsersPage() { const queryClient = useQueryClient(); const { setOpen } = useModal(); const [selectedUser, setSelectedUser] = useState(null); - const [isConfirmationOpen, setIsConfirmationOpen] = useState(false); const [userIdToDelete, setUserIdToDelete] = useState(null); - const [snackbarConfig, setSnackbarConfig] = - useState(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 @@ function UsersPage() { /** 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("Error deleting user"); }; 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) => { setUserIdToDelete(userId); - setIsConfirmationOpen(true); - }; - - const handleCloseConfirmationDialog = () => { - setIsConfirmationOpen(false); - setUserIdToDelete(null); + setOpen( + + ); }; /** Delete user END */ @@ -165,19 +157,6 @@ function UsersPage() { - - {snackbarConfig?.message && ( - - )} ); } From 56f464f963fb18111edcf4899872d6e2ff7d4974 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Fri, 2 Aug 2024 11:58:27 -0400 Subject: [PATCH 2/6] fix error message --- submit-web/src/routes/_authenticated/users/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/submit-web/src/routes/_authenticated/users/index.tsx b/submit-web/src/routes/_authenticated/users/index.tsx index dadc98f7..a62d58ab 100644 --- a/submit-web/src/routes/_authenticated/users/index.tsx +++ b/submit-web/src/routes/_authenticated/users/index.tsx @@ -58,7 +58,7 @@ function UsersPage() { }; const onDeleteError = (error: AxiosError) => { - notify.error("Error deleting user"); + notify.error(`User deletion failed! ${error.message}`); }; const { mutate: deleteUser } = useDeleteUser(onDeleteSuccess, onDeleteError); From 43610a9f3da4cd84800e0483cf2decf39e499f4e Mon Sep 17 00:00:00 2001 From: David Nunez Date: Tue, 6 Aug 2024 12:44:40 -0400 Subject: [PATCH 3/6] move confirmation modal --- .../components/Shared/{Popups => Modals}/ConfirmationDialog.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename submit-web/src/components/Shared/{Popups => Modals}/ConfirmationDialog.tsx (94%) diff --git a/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx b/submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx similarity index 94% rename from submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx rename to submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx index 94a8942c..2eb5d4dc 100644 --- a/submit-web/src/components/Shared/Popups/ConfirmationDialog.tsx +++ b/submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx @@ -5,7 +5,7 @@ import { DialogTitle, Button, } from "@mui/material"; -import { useModal } from "../Modals/modalStore"; +import { useModal } from "./modalStore"; type ConfirmationDialogProps = { title: string; From a5fa836d6ab5f05be7d185d96823f0eb8b3e46c9 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Tue, 6 Aug 2024 12:45:12 -0400 Subject: [PATCH 4/6] rename to modal --- .../{ConfirmationDialog.tsx => ConfirmationModal.tsx} | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) rename submit-web/src/components/Shared/Modals/{ConfirmationDialog.tsx => ConfirmationModal.tsx} (84%) diff --git a/submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx b/submit-web/src/components/Shared/Modals/ConfirmationModal.tsx similarity index 84% rename from submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx rename to submit-web/src/components/Shared/Modals/ConfirmationModal.tsx index 2eb5d4dc..309b25e4 100644 --- a/submit-web/src/components/Shared/Modals/ConfirmationDialog.tsx +++ b/submit-web/src/components/Shared/Modals/ConfirmationModal.tsx @@ -7,13 +7,13 @@ import { } from "@mui/material"; import { useModal } from "./modalStore"; -type ConfirmationDialogProps = { +type ConfirmationModalProps = { title: string; description: string; onConfirm: () => void; }; -const ConfirmationDialog: React.FC = ({ +const ConfirmationModal: React.FC = ({ title, description, onConfirm, @@ -37,4 +37,4 @@ const ConfirmationDialog: React.FC = ({ ); }; -export default ConfirmationDialog; +export default ConfirmationModal; From 3d5d7ceb4b046837ef1af983f22c2d92065472b3 Mon Sep 17 00:00:00 2001 From: David Nunez Date: Tue, 6 Aug 2024 12:51:55 -0400 Subject: [PATCH 5/6] update import and update positioning of snackbar --- submit-web/src/components/Shared/Popups/SnackBarProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx b/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx index e2b85ed1..b32bdc6b 100644 --- a/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx +++ b/submit-web/src/components/Shared/Popups/SnackBarProvider.tsx @@ -10,7 +10,7 @@ const SnackBarProvider: React.FC = () => { open={isOpen} autoHideDuration={3000} onClose={setClose} - anchorOrigin={{ vertical: "bottom", horizontal: "center" }} + anchorOrigin={{ vertical: "bottom", horizontal: "left" }} > Date: Tue, 6 Aug 2024 12:52:09 -0400 Subject: [PATCH 6/6] update naming for modal --- submit-web/src/routes/_authenticated/users/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/submit-web/src/routes/_authenticated/users/index.tsx b/submit-web/src/routes/_authenticated/users/index.tsx index a62d58ab..23a2d0c3 100644 --- a/submit-web/src/routes/_authenticated/users/index.tsx +++ b/submit-web/src/routes/_authenticated/users/index.tsx @@ -18,10 +18,10 @@ import { User } from "@/models/User"; import { useDeleteUser, useUsersData } from "@/hooks/useUsers"; import { useState } from "react"; import { useQueryClient } from "@tanstack/react-query"; -import ConfirmationDialog from "@/components/Shared/Popups/ConfirmationDialog"; 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, @@ -71,10 +71,10 @@ function UsersPage() { } }; - const handleOpenConfirmationDialog = (userId: number) => { + const handleOpenConfirmationModal = (userId: number) => { setUserIdToDelete(userId); setOpen( - handleOpenConfirmationDialog(row.id)} + onClick={() => handleOpenConfirmationModal(row.id)} >