summaryrefslogtreecommitdiff
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/App.tsx2
-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
-rw-r--r--client/src/main.tsx28
-rw-r--r--client/src/models.ts10
-rw-r--r--client/src/slices/snackbarSlice.ts6
11 files changed, 56 insertions, 86 deletions
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 (
<>
<CssBaseline />
<NavBar />
+ <GlobalSnackbar />
<Outlet />
</>
);
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;
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: <AdminLogin />,
},
- ],
- },
- {
- element: <Rsvp />,
- children: [
{
- path: 'rsvp',
- element: <RsvpForm />,
+ element: <Rsvp />,
+ children: [
+ {
+ path: 'rsvp',
+ element: <RsvpForm />,
+ },
+ ],
},
- ],
- },
- {
- element: <Admin />,
- children: [
{
- path: 'dashboard',
- element: <Dashboard />,
+ element: <Admin />,
+ children: [
+ {
+ path: 'dashboard',
+ element: <Dashboard />,
+ },
+ ],
},
],
},
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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-06 18:31:51 +0000