From 2b3d32a641da19c9d807f1877efcbe1a130c5e23 Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Fri, 1 Mar 2024 07:44:28 -0800 Subject: Use guest for login and RSVP update --- src/App.tsx | 1 - src/apiSlice.ts | 24 ++++++++++-------------- src/components/Admin.tsx | 2 +- src/components/Rsvp.tsx | 10 +++++----- src/components/RsvpForm.tsx | 23 ++++++++++++----------- src/features/auth/GuestLogin.tsx | 3 +-- src/features/auth/authSlice.ts | 14 ++++++-------- src/main.tsx | 1 - src/mocks/handlers.ts | 25 ++++++++++++++++++++++--- 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({ query: guest => ({ - url: `/guests/${guest.id}`, + url: `/guests/${guest?.id}`, method: 'PATCH', body: guest, providesTags: ['Guests'] }) }), - login: builder.mutation({ + login: builder.mutation({ 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 = Loading... + content = Loading... } 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 ? ( <> - + ) : ( 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() { - { errors && {errors.mealPreference?.message} } + { errors && {errors.meal?.message} } Meal Preference ( @@ -100,7 +101,7 @@ function RsvpForm() { @@ -114,7 +115,7 @@ function RsvpForm() { 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: '' } ) }) -- cgit v1.2.3