From 07752babb4e692452e1cd7f2133c4d8dde1b3b1c Mon Sep 17 00:00:00 2001
From: Michael Hunteman <michael@huntm.net>
Date: Sun, 23 Jun 2024 13:55:42 -0700
Subject: Authenticate UI users

---
 client/src/apiSlice.ts                | 10 +++++-----
 client/src/components/Rsvp.tsx        |  2 +-
 client/src/components/RsvpForm.tsx    | 17 ++---------------
 client/src/features/auth/authSlice.ts |  9 +++++++--
 client/src/main.tsx                   | 27 ++++++++++-----------------
 client/src/mocks/handlers.ts          |  2 +-
 client/src/pages.ts                   |  2 +-
 7 files changed, 27 insertions(+), 42 deletions(-)

(limited to 'client')

diff --git a/client/src/apiSlice.ts b/client/src/apiSlice.ts
index 5d987f9..7842da8 100644
--- a/client/src/apiSlice.ts
+++ b/client/src/apiSlice.ts
@@ -30,7 +30,7 @@ export interface PartyGuest {
 export const apiSlice = createApi({
   reducerPath: 'api',
   baseQuery: fetchBaseQuery({
-    baseUrl: '/',
+    baseUrl: 'http://localhost:8080/',
     prepareHeaders: (headers, { getState }) => {
       const token = (getState() as RootState).auth.token;
       if (token) {
@@ -42,20 +42,20 @@ export const apiSlice = createApi({
   tagTypes: ['Guests'],
   endpoints: (builder) => ({
     getGuests: builder.query<void, void>({
-      query: () => '/guests',
+      query: () => 'guests',
       providesTags: ['Guests'],
     }),
     updateGuest: builder.mutation<Guest, Guest>({
       query: (guest) => ({
-        url: `/guests/${guest?.id}`,
-        method: 'PATCH',
+        url: `guests/${guest?.id}`,
+        method: 'PUT',
         body: guest,
         providesTags: ['Guests'],
       }),
     }),
     login: builder.mutation<LoginResponse, LoginRequest>({
       query: (credentials) => ({
-        url: '/guest-login',
+        url: 'guests/login',
         method: 'POST',
         body: credentials,
       }),
diff --git a/client/src/components/Rsvp.tsx b/client/src/components/Rsvp.tsx
index dad7213..fbcaf4a 100644
--- a/client/src/components/Rsvp.tsx
+++ b/client/src/components/Rsvp.tsx
@@ -22,7 +22,7 @@ function Rsvp() {
       <Outlet context={auth?.guest} />
     </>
   ) : (
-    <Navigate to="/guest-login" state={{ from: location }} replace />
+    <Navigate to="/guests/login" state={{ from: location }} replace />
   );
 }
 
diff --git a/client/src/components/RsvpForm.tsx b/client/src/components/RsvpForm.tsx
index 71db0d8..9ac2d53 100644
--- a/client/src/components/RsvpForm.tsx
+++ b/client/src/components/RsvpForm.tsx
@@ -16,20 +16,6 @@ import { useForm, Controller, useFieldArray } from 'react-hook-form';
 import { useUpdateGuestMutation } from '../apiSlice';
 import type { Guest } from '../apiSlice';
 
-type FormValues = {
-  id: number;
-  firstName: string;
-  lastName: string;
-  attendance: string;
-  email: string;
-  partySize: number;
-  message: string;
-  partyList: {
-    firstName: string;
-    lastName: string;
-  }[];
-};
-
 function RsvpForm() {
   const [updateGuest] = useUpdateGuestMutation();
   const guest: Guest = useOutletContext();
@@ -41,7 +27,7 @@ function RsvpForm() {
     control,
     watch,
     formState: { errors },
-  } = useForm<FormValues>({
+  } = useForm<Guest>({
     defaultValues: {
       id: guest?.id,
       firstName: guest?.firstName,
@@ -163,6 +149,7 @@ function RsvpForm() {
             helperText={errors.partySize?.message}
             required
             {...register('partySize', {
+              valueAsNumber: true,
               onChange: handleParty,
               required: 'This field is required',
               min: { value: 1, message: 'Please enter a positive integer' },
diff --git a/client/src/features/auth/authSlice.ts b/client/src/features/auth/authSlice.ts
index bff2bdd..878de0c 100644
--- a/client/src/features/auth/authSlice.ts
+++ b/client/src/features/auth/authSlice.ts
@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import type { PayloadAction } from '@reduxjs/toolkit';
 import type { RootState } from '../../store';
 import type { Guest } from '../../apiSlice';
 
@@ -11,8 +12,12 @@ const authSlice = createSlice({
   name: 'auth',
   initialState: { guest: undefined, token: undefined } as AuthState,
   reducers: {
-    setCredentials: (state, action) => {
-      const { guest, token } = action.payload;
+    setCredentials: (
+      state,
+      {
+        payload: { guest, token },
+      }: PayloadAction<{ guest: Guest; token: string }>
+    ) => {
       state.guest = guest;
       state.token = token;
     },
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 8ada188..88999f7 100644
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -31,7 +31,7 @@ const router = createBrowserRouter([
         element: <Registry />,
       },
       {
-        path: 'guest-login',
+        path: 'guests/login',
         element: <GuestLogin />,
       },
       {
@@ -51,19 +51,12 @@ const router = createBrowserRouter([
   },
 ]);
 
-const enableMocking = async () => {
-  const { worker } = await import('./mocks/browser');
-  return worker.start();
-};
-
-enableMocking().then(() => {
-  ReactDOM.createRoot(document.getElementById('root')!).render(
-    <React.StrictMode>
-      <Provider store={store}>
-        <ThemeContextProvider>
-          <RouterProvider router={router} />
-        </ThemeContextProvider>
-      </Provider>
-    </React.StrictMode>
-  );
-});
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <ThemeContextProvider>
+        <RouterProvider router={router} />
+      </ThemeContextProvider>
+    </Provider>
+  </React.StrictMode>
+);
diff --git a/client/src/mocks/handlers.ts b/client/src/mocks/handlers.ts
index 217a7d5..0e882ee 100644
--- a/client/src/mocks/handlers.ts
+++ b/client/src/mocks/handlers.ts
@@ -4,7 +4,7 @@ import { nanoid } from '@reduxjs/toolkit';
 const token = nanoid();
 
 export const handlers = [
-  http.post('/guest-login', () => {
+  http.post('/guests/login', () => {
     return HttpResponse.json({
       guest: {
         id: 1,
diff --git a/client/src/pages.ts b/client/src/pages.ts
index bad57f6..a1dbdfd 100644
--- a/client/src/pages.ts
+++ b/client/src/pages.ts
@@ -1,7 +1,7 @@
 const pages = [
   { name: 'Home', to: '/' },
   { name: 'Schedule', to: '/schedule' },
-  { name: 'RSVP', to: '/guest-login' },
+  { name: 'RSVP', to: '/guests/login' },
   { name: 'Registry', to: '/registry' },
 ];
 
-- 
cgit v1.2.3