From a54a93b724a6104213b17271fc298e37adedc1c5 Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Fri, 20 Sep 2024 11:19:34 -0700
Subject: Use redux for updating snackbar

---
 client/src/components/AdminLogin.tsx | 41 +++++++++++---------
 client/src/components/GuestLogin.tsx | 41 +++++++++++---------
 client/src/components/Registry.tsx   |  1 -
 client/src/components/RsvpForm.tsx   | 73 ++++++++++++++++--------------------
 client/src/components/Schedule.tsx   |  1 -
 client/src/components/Status.tsx     | 36 +++++++++++-------
 6 files changed, 104 insertions(+), 89 deletions(-)

(limited to 'client/src/components')

diff --git a/client/src/components/AdminLogin.tsx b/client/src/components/AdminLogin.tsx
index 1881b6b..25f2063 100644
--- a/client/src/components/AdminLogin.tsx
+++ b/client/src/components/AdminLogin.tsx
@@ -1,18 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
+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 type { Credentials, StatusProps } from '../models';
 import Status from './Status';
+import { open } from '../slices/snackbarSlice';
+import { isFetchBaseQueryError } from '../error';
+import type { Credentials } from '../models';
+import type { Data } from '../error';
 
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [login, { isLoading, error }] = useLoginAdminMutation();
-  const [open, setOpen] = useState<boolean>(false);
+  const [login] = useLoginAdminMutation();
 
   const {
     register,
@@ -29,8 +31,22 @@ function GuestLogin() {
     try {
       dispatch(setAdmin(await login(data).unwrap()));
       navigate('/dashboard');
-    } catch (e) {
-      setOpen(true);
+    } catch (error) {
+      if (isFetchBaseQueryError(error)) {
+        dispatch(
+          open({
+            message: (error.data as Data).message,
+            severity: 'error',
+          })
+        );
+      } else {
+        dispatch(
+          open({
+            message: 'No response',
+            severity: 'error',
+          })
+        );
+      }
     }
   };
 
@@ -57,7 +73,6 @@ function GuestLogin() {
           alignItems: 'center',
           mt: 16,
           p: 2,
-          borderRadius: '8px',
         }}
       >
         <Typography variant="h6">Admin Login</Typography>
@@ -85,15 +100,7 @@ function GuestLogin() {
           Log in
         </Button>
       </Paper>
-      <Snackbar
-        open={!isLoading && open}
-        onClose={() => setOpen(false)}
-        autoHideDuration={5000}
-      >
-        <div>
-          <Status {...({ error, setOpen, type: 'Admin' } as StatusProps)} />
-        </div>
-      </Snackbar>
+      <Status />
     </form>
   );
 }
diff --git a/client/src/components/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index dca157a..0d3e8b1 100644
--- a/client/src/components/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -1,18 +1,20 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
-import { Button, Paper, Snackbar, TextField, Typography } from '@mui/material';
+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 type { Name, StatusProps } from '../models';
 import Status from './Status';
+import { open } from '../slices/snackbarSlice';
+import { isFetchBaseQueryError } from '../error';
+import type { Data } from '../error';
+import type { Name } from '../models';
 
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const [login, { isLoading, error }] = useLoginGuestMutation();
-  const [open, setOpen] = useState<boolean>(false);
+  const [login] = useLoginGuestMutation();
 
   const {
     register,
@@ -29,8 +31,22 @@ function GuestLogin() {
     try {
       dispatch(setGuest(await login(data).unwrap()));
       navigate('/rsvp');
-    } catch (e) {
-      setOpen(true);
+    } catch (error) {
+      if (isFetchBaseQueryError(error)) {
+        dispatch(
+          open({
+            message: (error.data as Data).message,
+            severity: 'error',
+          })
+        );
+      } else {
+        dispatch(
+          open({
+            message: 'No response',
+            severity: 'error',
+          })
+        );
+      }
     }
   };
 
@@ -57,7 +73,6 @@ function GuestLogin() {
           alignItems: 'center',
           mt: 16,
           p: 2,
-          borderRadius: '8px',
         }}
       >
         <Typography variant="h6">Guest Login</Typography>
@@ -84,15 +99,7 @@ function GuestLogin() {
         <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
           Log in
         </Button>
-        <Snackbar
-          open={!isLoading && open}
-          onClose={() => setOpen(false)}
-          autoHideDuration={5000}
-        >
-          <div>
-            <Status {...({ error, setOpen, type: 'Guest' } as StatusProps)} />
-          </div>
-        </Snackbar>
+        <Status />
       </Paper>
     </form>
   );
diff --git a/client/src/components/Registry.tsx b/client/src/components/Registry.tsx
index 8af4f4c..7a3d1ad 100644
--- a/client/src/components/Registry.tsx
+++ b/client/src/components/Registry.tsx
@@ -24,7 +24,6 @@ function Registry() {
           flexDirection: 'column',
           px: 1,
           pb: 2,
-          borderRadius: '8px',
         }}
       >
         <p style={{ textAlign: 'center' }}>
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index af2dcb1..fd7bcd5 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useRef } from 'react';
 import { useOutletContext } from 'react-router-dom';
+import { useDispatch } from 'react-redux';
 import {
-  Alert,
   Button,
   FormControl,
   FormControlLabel,
@@ -11,44 +11,22 @@ import {
   Paper,
   Radio,
   RadioGroup,
-  Snackbar,
   TextField,
 } from '@mui/material';
 import MailIcon from '@mui/icons-material/Mail';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../slices/api/guestSlice';
-import type { Guest, StatusProps } from '../models';
 import { isFetchBaseQueryError } from '../error';
+import Status from './Status';
+import { open } from '../slices/snackbarSlice';
 import type { Data } from '../error';
-
-const Status = ({ isError, error, setOpen }: StatusProps) => {
-  return isError ? (
-    isFetchBaseQueryError(error) ? (
-      <Alert severity="error" onClose={() => setOpen(false)}>
-        {(error.data as Data).message}
-      </Alert>
-    ) : (
-      <Alert severity="error" onClose={() => setOpen(false)}>
-        RSVP failed
-      </Alert>
-    )
-  ) : (
-    <Alert severity="success" onClose={() => setOpen(false)}>
-      RSVP updated
-    </Alert>
-  );
-};
+import type { Guest } from '../models';
 
 function RsvpForm() {
-  const [updateGuest, { isLoading, isSuccess, isError, error }] =
-    useUpdateGuestMutation();
+  const dispatch = useDispatch();
+  const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef((guest.partySize ?? 1) - 1);
-  const [open, setOpen] = useState<boolean>(false);
-
-  useEffect(() => {
-    setOpen(isSuccess || isError);
-  }, [isSuccess, isError]);
 
   const {
     register,
@@ -70,7 +48,31 @@ function RsvpForm() {
   });
 
   const onSubmit = async (data: Guest) => {
-    updateGuest({ ...data });
+    try {
+      await updateGuest({ ...data }).unwrap();
+      dispatch(
+        open({
+          message: 'RSVP updated',
+          severity: 'success',
+        })
+      );
+    } catch (error) {
+      if (isFetchBaseQueryError(error)) {
+        dispatch(
+          open({
+            message: (error.data as Data).message,
+            severity: 'error',
+          })
+        );
+      } else {
+        dispatch(
+          open({
+            message: 'RSVP failed',
+            severity: 'error',
+          })
+        );
+      }
+    }
   };
 
   const { fields, append, remove } = useFieldArray({
@@ -124,7 +126,6 @@ function RsvpForm() {
           px: 2,
           pb: 2,
           mt: { xs: 10, md: 16 },
-          borderRadius: '8px',
         }}
       >
         <Grid container spacing={2}>
@@ -275,15 +276,7 @@ function RsvpForm() {
               </Button>
             </div>
           </Grid>
-          <Snackbar
-            open={!isLoading && open}
-            onClose={() => setOpen(false)}
-            autoHideDuration={5000}
-          >
-            <div>
-              <Status {...({ isError, error, setOpen } as StatusProps)} />
-            </div>
-          </Snackbar>
+          <Status />
         </Grid>
       </Paper>
     </form>
diff --git a/client/src/components/Schedule.tsx b/client/src/components/Schedule.tsx
index a901060..c3651fd 100644
--- a/client/src/components/Schedule.tsx
+++ b/client/src/components/Schedule.tsx
@@ -21,7 +21,6 @@ function Schedule() {
         sx={{
           width: { xs: '90%', md: 512 },
           px: 2,
-          borderRadius: '8px',
         }}
       >
         <div style={{ display: 'flex', alignItems: 'center' }}>
diff --git a/client/src/components/Status.tsx b/client/src/components/Status.tsx
index 4bb60ff..bdd7fb2 100644
--- a/client/src/components/Status.tsx
+++ b/client/src/components/Status.tsx
@@ -1,18 +1,28 @@
 import React from 'react';
-import { Alert } from '@mui/material';
-import { isFetchBaseQueryError } from '../error';
-import type { StatusProps } from '../models';
-import type { Data } from '../error';
+import { useDispatch, useSelector } from 'react-redux';
+import { Alert, Snackbar } from '@mui/material';
+import { close, selectSnackbarState } from '../slices/snackbarSlice';
 
-const Status = ({ error, setOpen, type }: StatusProps) => {
-  return isFetchBaseQueryError(error) ? (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      {(error.data as Data).message}
-    </Alert>
-  ) : (
-    <Alert severity="error" onClose={() => setOpen(false)}>
-      {`${type} login failed`}
-    </Alert>
+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>
   );
 };
 
-- 
cgit v1.2.3