From 2133253836de428e58b4ba1c9b7e863485b6b870 Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Sat, 21 Sep 2024 08:00:39 -0700 Subject: Use snackbar globally --- client/src/App.tsx | 2 ++ client/src/components/Admin.tsx | 8 +------- client/src/components/AdminLogin.tsx | 8 +++----- client/src/components/GlobalSnackbar.tsx | 25 +++++++++++++++++++++++++ client/src/components/GuestLogin.tsx | 8 +++----- client/src/components/Rsvp.tsx | 8 +------- client/src/components/RsvpForm.tsx | 10 ++++------ client/src/components/Status.tsx | 29 ----------------------------- client/src/main.tsx | 28 ++++++++++++++-------------- client/src/models.ts | 10 ---------- client/src/slices/snackbarSlice.ts | 6 +++--- 11 files changed, 56 insertions(+), 86 deletions(-) create mode 100644 client/src/components/GlobalSnackbar.tsx delete mode 100644 client/src/components/Status.tsx (limited to 'client') diff --git a/client/src/App.tsx b/client/src/App.tsx index 27fc180..403882b 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -2,12 +2,14 @@ import React from 'react'; import { Outlet } from 'react-router-dom'; import CssBaseline from '@mui/material/CssBaseline'; import NavBar from './components/NavBar'; +import GlobalSnackbar from './components/GlobalSnackbar'; function App() { return ( <> + ); diff --git a/client/src/components/Admin.tsx b/client/src/components/Admin.tsx index 6e772ab..ab75976 100644 --- a/client/src/components/Admin.tsx +++ b/client/src/components/Admin.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { useMemo } from 'react'; import { useLocation, Navigate, Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; -import CssBaseline from '@mui/material/CssBaseline'; -import NavBar from './NavBar'; import { selectGuests } from '../slices/auth/adminSlice'; const authenticate = () => { @@ -16,11 +14,7 @@ function Rsvp() { const location = useLocation(); return auth?.guests ? ( - <> - - - - + ) : ( ); diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx index 25f2063..83b7de4 100644 --- a/client/src/components/AdminLogin.tsx +++ b/client/src/components/AdminLogin.tsx @@ -5,8 +5,7 @@ import { Button, Paper, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; import { setAdmin } from '../slices/auth/adminSlice'; import { useLoginAdminMutation } from '../slices/api/adminSlice'; -import Status from './Status'; -import { open } from '../slices/snackbarSlice'; +import { showSnackbar } from '../slices/snackbarSlice'; import { isFetchBaseQueryError } from '../error'; import type { Credentials } from '../models'; import type { Data } from '../error'; @@ -34,14 +33,14 @@ function GuestLogin() { } catch (error) { if (isFetchBaseQueryError(error)) { dispatch( - open({ + showSnackbar({ message: (error.data as Data).message, severity: 'error', }) ); } else { dispatch( - open({ + showSnackbar({ message: 'No response', severity: 'error', }) @@ -100,7 +99,6 @@ function GuestLogin() { Log in - ); } diff --git a/client/src/components/GlobalSnackbar.tsx b/client/src/components/GlobalSnackbar.tsx new file mode 100644 index 0000000..f0019fa --- /dev/null +++ b/client/src/components/GlobalSnackbar.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { Alert, Snackbar } from '@mui/material'; +import { hideSnackbar, selectSnackbarState } from '../slices/snackbarSlice'; + +function GlobalSnackbar() { + const dispatch = useDispatch(); + const { open, message, severity } = useSelector(selectSnackbarState); + + const handleClose = () => { + dispatch(hideSnackbar()); + }; + + return ( + +
+ + {message} + +
+ + ); +} + +export default GlobalSnackbar; diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx index 0d3e8b1..9a9bf8e 100644 --- a/client/src/components/GuestLogin.tsx +++ b/client/src/components/GuestLogin.tsx @@ -5,8 +5,7 @@ import { Button, Paper, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; import { setGuest } from '../slices/auth/guestSlice'; import { useLoginGuestMutation } from '../slices/api/guestSlice'; -import Status from './Status'; -import { open } from '../slices/snackbarSlice'; +import { showSnackbar } from '../slices/snackbarSlice'; import { isFetchBaseQueryError } from '../error'; import type { Data } from '../error'; import type { Name } from '../models'; @@ -34,14 +33,14 @@ function GuestLogin() { } catch (error) { if (isFetchBaseQueryError(error)) { dispatch( - open({ + showSnackbar({ message: (error.data as Data).message, severity: 'error', }) ); } else { dispatch( - open({ + showSnackbar({ message: 'No response', severity: 'error', }) @@ -99,7 +98,6 @@ function GuestLogin() { - ); diff --git a/client/src/components/Rsvp.tsx b/client/src/components/Rsvp.tsx index d694393..602f159 100644 --- a/client/src/components/Rsvp.tsx +++ b/client/src/components/Rsvp.tsx @@ -2,8 +2,6 @@ import React from 'react'; import { useMemo } from 'react'; import { useLocation, Navigate, Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; -import CssBaseline from '@mui/material/CssBaseline'; -import NavBar from './NavBar'; import { selectGuest } from '../slices/auth/guestSlice'; const authenticate = () => { @@ -16,11 +14,7 @@ function Rsvp() { const location = useLocation(); return auth?.guest ? ( - <> - - - - + ) : ( ); diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx index fd7bcd5..b3ff0db 100644 --- a/client/src/components/RsvpForm.tsx +++ b/client/src/components/RsvpForm.tsx @@ -17,8 +17,7 @@ import MailIcon from '@mui/icons-material/Mail'; import { useForm, Controller, useFieldArray } from 'react-hook-form'; import { useUpdateGuestMutation } from '../slices/api/guestSlice'; import { isFetchBaseQueryError } from '../error'; -import Status from './Status'; -import { open } from '../slices/snackbarSlice'; +import { showSnackbar } from '../slices/snackbarSlice'; import type { Data } from '../error'; import type { Guest } from '../models'; @@ -51,7 +50,7 @@ function RsvpForm() { try { await updateGuest({ ...data }).unwrap(); dispatch( - open({ + showSnackbar({ message: 'RSVP updated', severity: 'success', }) @@ -59,14 +58,14 @@ function RsvpForm() { } catch (error) { if (isFetchBaseQueryError(error)) { dispatch( - open({ + showSnackbar({ message: (error.data as Data).message, severity: 'error', }) ); } else { dispatch( - open({ + showSnackbar({ message: 'RSVP failed', severity: 'error', }) @@ -276,7 +275,6 @@ function RsvpForm() { - diff --git a/client/src/components/Status.tsx b/client/src/components/Status.tsx deleted file mode 100644 index bdd7fb2..0000000 --- a/client/src/components/Status.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { useDispatch, useSelector } from 'react-redux'; -import { Alert, Snackbar } from '@mui/material'; -import { close, selectSnackbarState } from '../slices/snackbarSlice'; - -const Status = () => { - const dispatch = useDispatch(); - const snackbarState = useSelector(selectSnackbarState); - - const closeSnackbar = () => { - dispatch(close()); - }; - - return ( - -
- - {snackbarState.message} - -
- - ); -}; - -export default Status; diff --git a/client/src/main.tsx b/client/src/main.tsx index fff9446..0e5a2f7 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -40,23 +40,23 @@ const router = createBrowserRouter([ path: 'admin/login', element: , }, - ], - }, - { - element: , - children: [ { - path: 'rsvp', - element: , + element: , + children: [ + { + path: 'rsvp', + element: , + }, + ], }, - ], - }, - { - element: , - children: [ { - path: 'dashboard', - element: , + element: , + children: [ + { + path: 'dashboard', + element: , + }, + ], }, ], }, diff --git a/client/src/models.ts b/client/src/models.ts index 38b48ad..6840a46 100644 --- a/client/src/models.ts +++ b/client/src/models.ts @@ -1,6 +1,3 @@ -import type { SerializedError } from '@reduxjs/toolkit'; -import type { FetchBaseQueryError } from '@reduxjs/toolkit/query'; - export interface Guest { id?: number; firstName: string; @@ -31,10 +28,3 @@ export interface AdminLogin { guests: Guest[]; token: string; } - -export interface StatusProps { - isError?: boolean; - error: FetchBaseQueryError | SerializedError | undefined; - setOpen: (open: boolean) => void; - type: string; -} diff --git a/client/src/slices/snackbarSlice.ts b/client/src/slices/snackbarSlice.ts index eca9575..f76b133 100644 --- a/client/src/slices/snackbarSlice.ts +++ b/client/src/slices/snackbarSlice.ts @@ -16,17 +16,17 @@ export const snackbarSlice = createSlice({ name: 'snackbar', initialState, reducers: { - open(state, action) { + showSnackbar: (state, action) => { state.open = true; state.message = action.payload.message; state.severity = action.payload.severity; }, - close(state) { + hideSnackbar: (state) => { state.open = false; }, }, }); -export const { open, close } = snackbarSlice.actions; +export const { showSnackbar, hideSnackbar } = snackbarSlice.actions; export const selectSnackbarState = (state: RootState) => state.snackbar; export default snackbarSlice.reducer; -- cgit v1.2.3