From fa1409d205479e9943f7b7db96a4b56ff1d29d7d Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Wed, 28 Feb 2024 18:20:38 -0800 Subject: Resolve type errors --- src/apiSlice.ts | 17 +++++++++++++---- src/components/Admin.tsx | 1 - src/components/NavBar.tsx | 5 ++--- src/components/Registry.tsx | 5 ++--- src/components/Rsvp.tsx | 4 +--- src/components/RsvpForm.tsx | 23 ++++++----------------- src/features/auth/GuestLogin.tsx | 19 ++++--------------- src/features/auth/authSlice.ts | 7 +++++-- src/main.tsx | 2 -- src/mocks/handlers.ts | 3 ++- src/store.ts | 3 ++- 11 files changed, 37 insertions(+), 52 deletions(-) (limited to 'src') diff --git a/src/apiSlice.ts b/src/apiSlice.ts index fde9fff..ab46822 100644 --- a/src/apiSlice.ts +++ b/src/apiSlice.ts @@ -1,9 +1,10 @@ import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; -import { setCredentials, logOut } from './features/auth/authSlice'; +import { RootState } from './store' export interface User { firstName: string lastName: string + id: number } export interface UserResponse { @@ -16,10 +17,18 @@ export interface LoginRequest { lastName: string } +export interface Guest { + id: number + attendance: string + mealPreference: string + dietaryRestrictions: string + plusOne: string + marriageAdvice: string +} + export const apiSlice = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ - // baseUrl: 'http://localhost:3000', baseUrl: '/', prepareHeaders: (headers, { getState }) => { const token = (getState() as RootState).auth.token; @@ -31,11 +40,11 @@ export const apiSlice = createApi({ }), tagTypes: ['Guests'], endpoints: builder => ({ - getGuests: builder.query({ + getGuests: builder.query({ query: () => '/guests', providesTags: ['Guests'] }), - updateGuest: builder.mutation({ + updateGuest: builder.mutation({ query: guest => ({ url: `/guests/${guest.id}`, method: 'PATCH', diff --git a/src/components/Admin.tsx b/src/components/Admin.tsx index fac3306..76bf486 100644 --- a/src/components/Admin.tsx +++ b/src/components/Admin.tsx @@ -1,5 +1,4 @@ import { Paper, Typography } from '@mui/material'; - import { useGetGuestsQuery } from '../apiSlice'; function Admin() { diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx index 68fc706..de40b4f 100644 --- a/src/components/NavBar.tsx +++ b/src/components/NavBar.tsx @@ -1,13 +1,12 @@ import { useContext } from 'react'; import { Link } from 'react-router-dom'; -import { AppBar, Box, Button, IconButton, Stack, Toolbar, Typography } from '@mui/material'; +import { AppBar, Button, IconButton, Stack, Toolbar, Typography } from '@mui/material'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import { useTheme } from '@mui/material/styles'; - import { ThemeContext } from '../ThemeContextProvider'; -function NavBar({ mode }) { +function NavBar() { const theme = useTheme(); const { toggleColorMode } = useContext(ThemeContext); diff --git a/src/components/Registry.tsx b/src/components/Registry.tsx index 8d7fff4..e4f6398 100644 --- a/src/components/Registry.tsx +++ b/src/components/Registry.tsx @@ -1,5 +1,4 @@ -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; +import { Paper, Typography } from '@mui/material'; function Registry() { return ( @@ -8,7 +7,7 @@ function Registry() { Registry - ) + ); } export default Registry; diff --git a/src/components/Rsvp.tsx b/src/components/Rsvp.tsx index 466175e..1b26e2d 100644 --- a/src/components/Rsvp.tsx +++ b/src/components/Rsvp.tsx @@ -2,9 +2,7 @@ import { useMemo } from 'react'; import { useLocation, Navigate, Outlet } from 'react-router-dom'; import { useSelector } from 'react-redux'; import CssBaseline from '@mui/material/CssBaseline'; - import NavBar from './NavBar'; -import RsvpForm from './RsvpForm'; import { selectCurrentUser } from '../features/auth/authSlice'; const authenticate = () => { @@ -20,7 +18,7 @@ function Rsvp() { <> - + ) : ( diff --git a/src/components/RsvpForm.tsx b/src/components/RsvpForm.tsx index 5e0fb31..11ed376 100644 --- a/src/components/RsvpForm.tsx +++ b/src/components/RsvpForm.tsx @@ -1,37 +1,26 @@ -import { useState } from 'react'; -import { useSelector } from 'react-redux'; import { Button, FormControl, FormControlLabel, FormLabel, Grid, - MenuItem, - Select, Radio, RadioGroup, TextField, Typography } from '@mui/material'; import { useForm, Controller } from 'react-hook-form'; -import { DevTool } from '@hookform/devtools'; - -import { useGetGuestsQuery, useUpdateGuestMutation } from '../apiSlice'; +import { useOutletContext } from "react-router-dom"; +import { useUpdateGuestMutation, Guest, User } from '../apiSlice'; function RsvpForm() { - const { - data: guests, - isLoading, - isSuccess, - isError, - error - } = useGetGuestsQuery(); - const [updateGuest] = useUpdateGuestMutation(); + const user: User = useOutletContext(); const { register, handleSubmit, control, - formState: { isDirty, isValid, errors } } = useForm({ + formState: { errors } } = useForm({ defaultValues: { + id: user.id, attendance: '', mealPreference: '', dietaryRestrictions: '', @@ -40,7 +29,7 @@ function RsvpForm() { } }); - const onSubmit = async (data) => { + const onSubmit = async (data: Guest) => { console.log(data); updateGuest({...data}); }; diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx index 2100a94..8585e61 100644 --- a/src/features/auth/GuestLogin.tsx +++ b/src/features/auth/GuestLogin.tsx @@ -1,12 +1,9 @@ -import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useDispatch } from 'react-redux'; -import { Button, Grid, Paper, TextField, Typography } from '@mui/material'; +import { Button, Stack, TextField, Typography } from '@mui/material'; import { useForm } from 'react-hook-form'; - import { setCredentials } from './authSlice'; -import { useLoginMutation } from '../../apiSlice'; -import type { LoginRequest } from './authSlice'; +import { useLoginMutation, LoginRequest } from '../../apiSlice'; function GuestLogin() { const dispatch = useDispatch(); @@ -33,34 +30,26 @@ function GuestLogin() { return (
- - + Guest Login - - - - - - - - +
); } diff --git a/src/features/auth/authSlice.ts b/src/features/auth/authSlice.ts index 9716131..04be93f 100644 --- a/src/features/auth/authSlice.ts +++ b/src/features/auth/authSlice.ts @@ -1,18 +1,21 @@ import { createSlice } from '@reduxjs/toolkit'; import type { RootState } from '../../store'; +import { User } from '../../apiSlice'; type AuthState = { user: User | null + id: number | null token: string | null } const authSlice = createSlice({ name: 'auth', - initialState: { user: null, token: null } as AuthState, + initialState: { user: null, token: null, id: null } as AuthState, reducers: { setCredentials: (state, action) => { - const { user, token } = action.payload; + const { user, token, id } = action.payload; state.user = user; + state.id = id; state.token = token; } } diff --git a/src/main.tsx b/src/main.tsx index 1e7c31a..32ba349 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,12 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import { render } from 'react-dom'; import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { Provider } from 'react-redux'; import App from './App'; import store from './store'; -import { apiSlice } from './apiSlice'; import ThemeContextProvider from './ThemeContextProvider' import Schedule from './components/Schedule'; import Registry from './components/Registry'; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 483da83..a05e370 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -11,7 +11,8 @@ export const handlers = [ firstName: 'Michael', lastName: 'Hunteman' }, - token + token, + id: 1 } ) }) diff --git a/src/store.ts b/src/store.ts index 3465bff..d3e02d2 100644 --- a/src/store.ts +++ b/src/store.ts @@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit'; import { apiSlice } from './apiSlice'; import authReducer from './features/auth/authSlice'; -export default configureStore({ +const store = configureStore({ reducer: { [apiSlice.reducerPath]: apiSlice.reducer, auth: authReducer @@ -11,5 +11,6 @@ export default configureStore({ getDefaultMiddleware().concat(apiSlice.middleware) }); +export default store; export type RootState = ReturnType export type AppDispatch = typeof store.dispatch -- cgit v1.2.3