summaryrefslogtreecommitdiff
path: root/client/src/components
diff options
context:
space:
mode:
authorMichael Hunteman <michael@huntm.net>2024-09-21 08:00:39 -0700
committerMichael Hunteman <michael@huntm.net>2024-09-21 11:39:18 -0700
commit2133253836de428e58b4ba1c9b7e863485b6b870 (patch)
tree9c175fd811975a21fcf60a5b14004443d32fe989 /client/src/components
parenta54a93b724a6104213b17271fc298e37adedc1c5 (diff)
Use snackbar globally
Diffstat (limited to 'client/src/components')
-rw-r--r--client/src/components/Admin.tsx8
-rw-r--r--client/src/components/AdminLogin.tsx8
-rw-r--r--client/src/components/GlobalSnackbar.tsx25
-rw-r--r--client/src/components/GuestLogin.tsx8
-rw-r--r--client/src/components/Rsvp.tsx8
-rw-r--r--client/src/components/RsvpForm.tsx10
-rw-r--r--client/src/components/Status.tsx29
7 files changed, 37 insertions, 59 deletions
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;