From 2133253836de428e58b4ba1c9b7e863485b6b870 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sat, 21 Sep 2024 08:00:39 -0700
Subject: Use snackbar globally

---
 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 -----------------------------
 7 files changed, 37 insertions(+), 59 deletions(-)
 create mode 100644 client/src/components/GlobalSnackbar.tsx
 delete mode 100644 client/src/components/Status.tsx

(limited to 'client/src/components')

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 ? (
-    <>
-      <CssBaseline />
-      <NavBar />
-      <Outlet context={auth?.guests} />
-    </>
+    <Outlet context={auth?.guests} />
   ) : (
     <Navigate to="/admin/login" state={{ from: location }} replace />
   );
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
         </Button>
       </Paper>
-      <Status />
     </form>
   );
 }
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 (
+    <Snackbar open={open} onClose={handleClose} autoHideDuration={5000}>
+      <div>
+        <Alert severity={severity} onClose={handleClose}>
+          {message}
+        </Alert>
+      </div>
+    </Snackbar>
+  );
+}
+
+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() {
         <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
           Log in
         </Button>
-        <Status />
       </Paper>
     </form>
   );
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 ? (
-    <>
-      <CssBaseline />
-      <NavBar />
-      <Outlet context={auth?.guest} />
-    </>
+    <Outlet context={auth?.guest} />
   ) : (
     <Navigate to="/guests/login" state={{ from: location }} replace />
   );
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() {
               </Button>
             </div>
           </Grid>
-          <Status />
         </Grid>
       </Paper>
     </form>
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 (
-    <Snackbar
-      open={snackbarState.open}
-      onClose={closeSnackbar}
-      autoHideDuration={5000}
-    >
-      <div>
-        <Alert severity={snackbarState.severity} onClose={closeSnackbar}>
-          {snackbarState.message}
-        </Alert>
-      </div>
-    </Snackbar>
-  );
-};
-
-export default Status;
-- 
cgit v1.2.3