summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/apiSlice.ts17
-rw-r--r--src/components/Admin.tsx1
-rw-r--r--src/components/NavBar.tsx5
-rw-r--r--src/components/Registry.tsx5
-rw-r--r--src/components/Rsvp.tsx4
-rw-r--r--src/components/RsvpForm.tsx23
-rw-r--r--src/features/auth/GuestLogin.tsx19
-rw-r--r--src/features/auth/authSlice.ts7
-rw-r--r--src/main.tsx2
-rw-r--r--src/mocks/handlers.ts3
-rw-r--r--src/store.ts3
11 files changed, 37 insertions, 52 deletions
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<void, void>({
query: () => '/guests',
providesTags: ['Guests']
}),
- updateGuest: builder.mutation({
+ updateGuest: builder.mutation<Guest, Guest>({
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
</Typography>
</Paper>
- )
+ );
}
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() {
<>
<CssBaseline />
<NavBar />
- <Outlet />
+ <Outlet context={auth} />
</>
) : (
<Navigate to="/guest-login" state={{ from: location }} replace />
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 (
<form onSubmit={handleSubmit(onSubmit)}>
- <Grid container spacing={2}>
- <Grid item xs={12} md={12} lg={12}>
+ <Stack spacing={2}>
<Typography variant="h6">
Guest Login
</Typography>
- </Grid>
- <Grid item xs={12} md={6} lg={6}>
<TextField
label="First Name"
variant="outlined"
required
{...register("firstName", { required: true })}
/>
- </Grid>
- <Grid item xs={12} md={6} lg={6}>
<TextField
label="Last Name"
variant="outlined"
required
{...register("lastName", { required: true })}
/>
- </Grid>
- <Grid item>
<Button type="submit" variant="contained" disabled={!isDirty || !isValid}>
Login
</Button>
- </Grid>
- </Grid>
+ </Stack>
</form>
);
}
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<typeof store.getState>
export type AppDispatch = typeof store.dispatch
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-06 18:25:33 +0000