diff options
Diffstat (limited to 'client/src')
-rw-r--r-- | client/src/components/Admin.tsx | 2 | ||||
-rw-r--r-- | client/src/components/GuestLogin.tsx (renamed from client/src/features/auth/GuestLogin.tsx) | 6 | ||||
-rw-r--r-- | client/src/components/Rsvp.tsx | 2 | ||||
-rw-r--r-- | client/src/components/RsvpForm.tsx | 23 | ||||
-rw-r--r-- | client/src/main.tsx | 2 | ||||
-rw-r--r-- | client/src/slices/apiSlice.ts (renamed from client/src/apiSlice.ts) | 2 | ||||
-rw-r--r-- | client/src/slices/authSlice.ts (renamed from client/src/features/auth/authSlice.ts) | 4 | ||||
-rw-r--r-- | client/src/store.ts | 4 |
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: { |