Use guest for login and RSVP update

9 files changed, 57 insertions, 46 deletions

diff --git a/src/App.tsx b/src/App.tsx
index bdc170d..11540b1 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,5 @@
 import { Outlet } from 'react-router-dom';
 import CssBaseline from '@mui/material/CssBaseline';
-
 import NavBar from './components/NavBar';
 
 function App() {
diff --git a/src/apiSlice.ts b/src/apiSlice.ts
index ab46822..808806f 100644
--- a/src/apiSlice.ts
+++ b/src/apiSlice.ts
@@ -1,29 +1,25 @@
 import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
 import { RootState } from './store'
 
-export interface User {
+export interface LoginRequest {
   firstName: string
   lastName: string
-  id: number
 }
 
-export interface UserResponse {
-  user: User
+export interface LoginResponse {
+  guest: Guest
   token: string
 }
 
-export interface LoginRequest {
-  firstName: string
-  lastName: string
-}
-
 export interface Guest {
   id: number
+  firstName: string
+  lastName: string
   attendance: string
-  mealPreference: string
-  dietaryRestrictions: string
+  meal: string
+  restrictions: string
   plusOne: string
-  marriageAdvice: string
+  advice: string
 }
 
 export const apiSlice = createApi({
@@ -46,13 +42,13 @@ export const apiSlice = createApi({
     }),
     updateGuest: builder.mutation<Guest, Guest>({
       query: guest => ({
-        url: `/guests/${guest.id}`,
+        url: `/guests/${guest?.id}`,
         method: 'PATCH',
         body: guest,
         providesTags: ['Guests']
       })
     }),
-    login: builder.mutation<UserResponse, LoginRequest>({
+    login: builder.mutation<LoginResponse, LoginRequest>({
       query: credentials => ({
         url: '/guest-login',
         method: 'POST',
diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx
index 76bf486..11fbc22 100644
--- a/src/components/Admin.tsx
+++ b/src/components/Admin.tsx
@@ -13,7 +13,7 @@ function Admin() {
   let content;
 
   if (isLoading) {
-    content = <Typography variant="h6">Loading...</Typography>
+    content = <Typography>Loading...</Typography>
   } else if (isSuccess) {
     content = JSON.stringify(guests);
   } else if (isError) {
diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx
index 1b26e2d..104196f 100644
--- a/src/components/Rsvp.tsx
+++ b/src/components/Rsvp.tsx
@@ -3,22 +3,22 @@ import { useLocation, Navigate, Outlet } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import CssBaseline from '@mui/material/CssBaseline';
 import NavBar from './NavBar';
-import { selectCurrentUser } from '../features/auth/authSlice';
+import { selectCurrentGuest } from '../features/auth/authSlice';
 
 const authenticate = () => {
-  const user = useSelector(selectCurrentUser);
-  return useMemo(() => ({ user }), [user]);
+  const guest = useSelector(selectCurrentGuest);
+  return useMemo(() => ({ guest }), [guest]);
 };
 
 function Rsvp() {
   const auth = authenticate();
   const location = useLocation();
 
-  return auth.user ? (
+  return auth?.guest ? (
     <>
       <CssBaseline />
       <NavBar />
-      <Outlet context={auth} />
+      <Outlet context={auth?.guest} />
     </>
   ) : (
     <Navigate to="/guest-login" state={{ from: location }} replace />
diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx
index 11ed376..7beb21a 100644
--- a/src/components/RsvpForm.tsx
+++ b/src/components/RsvpForm.tsx
@@ -11,26 +11,27 @@ import {
 } from '@mui/material';
 import { useForm, Controller } from 'react-hook-form';
 import { useOutletContext } from "react-router-dom";
-import { useUpdateGuestMutation, Guest, User } from '../apiSlice';
+import { useUpdateGuestMutation, Guest } from '../apiSlice';
 
 function RsvpForm() {
   const [updateGuest] = useUpdateGuestMutation();
-  const user: User = useOutletContext();
+  const guest: Guest = useOutletContext();
 
   const { register, handleSubmit, control,
   formState: { errors } } = useForm({
     defaultValues: {
-      id: user.id,
+      id: guest?.id,
+      firstName: guest?.firstName,
+      lastName: guest?.lastName,
       attendance: '',
-      mealPreference: '',
-      dietaryRestrictions: '',
+      meal: '',
+      restrictions: '',
       plusOne: '',
-      marriageAdvice: ''
+      advice: ''
     }
   });
 
   const onSubmit = async (data: Guest) => {
-    console.log(data);
     updateGuest({...data});
   };
 
@@ -73,10 +74,10 @@ function RsvpForm() {
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
           <FormControl>
-            { errors && <Typography>{errors.mealPreference?.message}</Typography> }
+            { errors && <Typography>{errors.meal?.message}</Typography> }
             <FormLabel>Meal Preference</FormLabel>
             <Controller
-              name="mealPreference"
+              name="meal"
               control={control}
               rules={{ required: "What would you like to eat?" }}
               render={({ field }) => (
@@ -100,7 +101,7 @@ function RsvpForm() {
           <TextField
             label="Dietary Restrictions"
             variant="outlined"
-            {...register("dietaryRestrictions")}
+            {...register("restrictions")}
           />
         </Grid>
         <Grid item xs={12} md={4} lg={4}>
@@ -114,7 +115,7 @@ function RsvpForm() {
           <TextField
             label="Marriage Advice"
             variant="outlined"
-            {...register("marriageAdvice")}
+            {...register("advice")}
           />
         </Grid>
         <Grid item>
diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index 8585e61..61a8fa1 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -20,8 +20,7 @@ function GuestLogin() {
 
   const onSubmit = async (data: LoginRequest) => {
       try {
-        const user = await login(data).unwrap();
-        dispatch(setCredentials(user));
+        dispatch(setCredentials(await login(data).unwrap()));
         navigate('/rsvp');
       } catch (e) {
         console.log(e);
diff --git a/src/features/auth/authSlice.ts b/src/features/auth/authSlice.ts
index 04be93f..d5b294c 100644
--- a/src/features/auth/authSlice.ts
+++ b/src/features/auth/authSlice.ts
@@ -1,21 +1,19 @@
 import { createSlice } from '@reduxjs/toolkit';
 import type { RootState } from '../../store';
-import { User } from '../../apiSlice';
+import { Guest } from '../../apiSlice';
 
 type AuthState = {
-  user: User | null
-  id: number | null
+  guest: Guest | null
   token: string | null
 }
 
 const authSlice = createSlice({
   name: 'auth',
-  initialState: { user: null, token: null, id: null } as AuthState,
+  initialState: { guest: null, token: null } as AuthState,
   reducers: {
     setCredentials: (state, action) => {
-      const { user, token, id } = action.payload;
-      state.user = user;
-      state.id = id;
+      const { guest, token } = action.payload;
+      state.guest = guest;
       state.token = token;
     }
   }
@@ -25,4 +23,4 @@ export const { setCredentials } = authSlice.actions;
 
 export default authSlice.reducer;
 
-export const selectCurrentUser = (state: RootState) => state.auth.user;
+export const selectCurrentGuest = (state: RootState) => state.auth.guest;
diff --git a/src/main.tsx b/src/main.tsx
index 32ba349..3125ede 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Provider } from 'react-redux';
-
 import App from './App';
 import store from './store';
 import ThemeContextProvider from './ThemeContextProvider'
diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts
index a05e370..63b1a9a 100644
--- a/src/mocks/handlers.ts
+++ b/src/mocks/handlers.ts
@@ -7,12 +7,31 @@ export const handlers = [
   http.post('/guest-login', () => {
     return HttpResponse.json(
       {
-        user: {
+        guest: {
+          id: 1,
           firstName: 'Michael',
-          lastName: 'Hunteman'
+          lastName: 'Hunteman',
+          attendance: 'false',
+          meal: '',
+          restrictions: '',
+          plusOne: '',
+          advice: ''
         },
         token,
-        id: 1
+      }
+    )
+  }),
+  http.patch('/guests/1', () => {
+    return HttpResponse.json(
+      {
+        id: 1,
+        firstName: 'Michael',
+        lastName: 'Hunteman',
+        attendance: 'true',
+        meal: 'beef',
+        restrictions: '',
+        plusOne: '',
+        advice: ''
       }
     )
   })