Add success and error alerts

8 files changed, 28 insertions, 17 deletions

diff --git a/client/src/components/Admin.tsx b/client/src/components/Admin.tsx
index 1c941a5..f1845b4 100644
--- a/client/src/components/Admin.tsx
+++ b/client/src/components/Admin.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useGetGuestsQuery } from '../apiSlice';
+import { useGetGuestsQuery } from '../slices/apiSlice';
 
 function Admin() {
   const {
diff --git a/client/src/features/auth/GuestLogin.tsx b/client/src/components/GuestLogin.tsx
index 4da7e45..c06bc6e 100644
--- a/client/src/features/auth/GuestLogin.tsx
+++ b/client/src/components/GuestLogin.tsx
@@ -3,9 +3,9 @@ import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { Button, Container, TextField, Typography } from '@mui/material';
 import { useForm } from 'react-hook-form';
-import { setCredentials } from './authSlice';
-import { useLoginMutation } from '../../apiSlice';
-import type { LoginRequest } from '../../apiSlice';
+import { setCredentials } from '../slices/authSlice';
+import { useLoginMutation } from '../slices/apiSlice';
+import type { LoginRequest } from '../slices/apiSlice';
 
 function GuestLogin() {
   const dispatch = useDispatch();
diff --git a/client/src/components/Rsvp.tsx b/client/src/components/Rsvp.tsx
index d908f75..d3d9677 100644
--- a/client/src/components/Rsvp.tsx
+++ b/client/src/components/Rsvp.tsx
@@ -4,7 +4,7 @@ import { useLocation, Navigate, Outlet } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import CssBaseline from '@mui/material/CssBaseline';
 import NavBar from './NavBar';
-import { selectCurrentGuest } from '../features/auth/authSlice';
+import { selectCurrentGuest } from '../slices/authSlice';
 
 const authenticate = () => {
   const guest = useSelector(selectCurrentGuest);
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index f20d810..d981053 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { useRef } from 'react';
 import { useNavigate, useOutletContext } from 'react-router-dom';
 import {
+  Alert,
   Button,
   Container,
   FormControl,
@@ -13,11 +14,12 @@ import {
   TextField,
 } from '@mui/material';
 import { useForm, Controller, useFieldArray } from 'react-hook-form';
-import { useUpdateGuestMutation } from '../apiSlice';
-import type { Guest } from '../apiSlice';
+import { useUpdateGuestMutation } from '../slices/apiSlice';
+import type { Guest } from '../slices/apiSlice';
 
 function RsvpForm() {
-  const [updateGuest] = useUpdateGuestMutation();
+  const [updateGuest, { isSuccess: success, isError: error }] =
+    useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
   const previousPartySize = useRef(guest?.partySize - 1);
   const navigate = useNavigate();
@@ -43,7 +45,6 @@ function RsvpForm() {
 
   const onSubmit = async (data: Guest) => {
     updateGuest({ ...data });
-    navigate('/guest/login');
   };
 
   const { fields, append, remove } = useFieldArray({
@@ -120,7 +121,7 @@ function RsvpForm() {
             </FormControl>
           </div>
         </Grid>
-        <Grid item xs={9}>
+        <Grid item xs={8}>
           <TextField
             label="Email"
             type="email"
@@ -128,7 +129,9 @@ function RsvpForm() {
             fullWidth
             error={!!errors.email}
             helperText={errors.email?.message}
+            required
             {...register('email', {
+              required: 'This field is required',
               pattern: {
                 value: /\S+@\S+\.\S+/,
                 message: 'Please enter a valid email address',
@@ -136,7 +139,7 @@ function RsvpForm() {
             })}
           />
         </Grid>
-        <Grid item xs={3}>
+        <Grid item xs={4}>
           <TextField
             label="Party Size"
             type="number"
@@ -220,6 +223,14 @@ function RsvpForm() {
               RSVP
             </Button>
           </div>
+          <div
+            style={{ marginTop: 16, display: 'flex', justifyContent: 'center' }}
+          >
+            <div style={{ width: 180 }}>
+              {success && <Alert severity="success">RSVP updated</Alert>}
+              {error && <Alert severity="error">RSVP failed</Alert>}
+            </div>
+          </div>
         </Grid>
       </Grid>
     </Container>
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 45ff68b..2477c37 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -7,7 +7,7 @@ import store from './store';
 import ThemeContextProvider from './ThemeContextProvider';
 import Schedule from './components/Schedule';
 import Registry from './components/Registry';
-import GuestLogin from './features/auth/GuestLogin';
+import GuestLogin from './components/GuestLogin';
 import Rsvp from './components/Rsvp';
 import RsvpForm from './components/RsvpForm';
 import Admin from './components/Admin';
diff --git a/client/src/apiSlice.ts b/client/src/slices/apiSlice.ts
index 038615f..90cdc48 100644
--- a/client/src/apiSlice.ts
+++ b/client/src/slices/apiSlice.ts
@@ -1,5 +1,5 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
-import type { RootState } from './store';
+import type { RootState } from '../store';
 
 export interface LoginRequest {
   firstName: string;
diff --git a/client/src/features/auth/authSlice.ts b/client/src/slices/authSlice.ts
index 878de0c..e1fec78 100644
--- a/client/src/features/auth/authSlice.ts
+++ b/client/src/slices/authSlice.ts
@@ -1,7 +1,7 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { PayloadAction } from '@reduxjs/toolkit';
-import type { RootState } from '../../store';
-import type { Guest } from '../../apiSlice';
+import type { RootState } from '../store';
+import type { Guest } from './apiSlice';
 
 type AuthState = {
   guest?: Guest;
diff --git a/client/src/store.ts b/client/src/store.ts
index 264639e..18b3461 100644
--- a/client/src/store.ts
+++ b/client/src/store.ts
@@ -1,6 +1,6 @@
 import { configureStore } from '@reduxjs/toolkit';
-import { apiSlice } from './apiSlice';
-import authReducer from './features/auth/authSlice';
+import { apiSlice } from './slices/apiSlice';
+import authReducer from './slices/authSlice';
 
 const store = configureStore({
   reducer: {