Use react-hook-form

1 files changed, 25 insertions, 18 deletions

diff --git a/src/features/auth/GuestLogin.tsx b/src/features/auth/GuestLogin.tsx
index fb305f7..2100a94 100644
--- a/src/features/auth/GuestLogin.tsx
+++ b/src/features/auth/GuestLogin.tsx
@@ -2,6 +2,7 @@ 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 { useForm } from 'react-hook-form';
 
 import { setCredentials } from './authSlice';
 import { useLoginMutation } from '../../apiSlice';
@@ -10,23 +11,19 @@ import type { LoginRequest } from './authSlice';
 function GuestLogin() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-
-  // TODO: use react-hook-form
-  const [formState, setFormState] = useState<LoginRequest>({
-    firstName: '',
-    lastName: ''
-  });
-
   const [login] = useLoginMutation();
 
-  const handleChange = ({
-    target: { name, value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
-    setFormState(prev => ({ ...prev, [name]: value }));
+  const { register, handleSubmit,
+  formState: { isDirty, isValid } } = useForm<LoginRequest>({
+    defaultValues: {
+      firstName: '',
+      lastName: ''
+    }
+  });
 
-  const handleSubmit = async () => {
+  const onSubmit = async (data: LoginRequest) => {
       try {
-        const user = await login(formState).unwrap();
+        const user = await login(data).unwrap();
         dispatch(setCredentials(user));
         navigate('/rsvp');
       } catch (e) {
@@ -35,7 +32,7 @@ function GuestLogin() {
   };
 
   return (
-    <Paper>
+    <form onSubmit={handleSubmit(onSubmit)}>
       <Grid container spacing={2}>
         <Grid item xs={12} md={12} lg={12}>
           <Typography variant="h6">
@@ -43,18 +40,28 @@ function GuestLogin() {
           </Typography>
         </Grid>
         <Grid item xs={12} md={6} lg={6}>
-          <TextField label="First Name" variant="outlined" onChange={handleChange} />
+          <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" onChange={handleChange} />
+          <TextField
+            label="Last Name"
+            variant="outlined"
+            required
+            {...register("lastName", { required: true })}
+          />
         </Grid>
         <Grid item>
-          <Button onClick={handleSubmit} variant="contained">
+          <Button type="submit" variant="contained" disabled={!isDirty || !isValid}>
             Login
           </Button>
         </Grid>
       </Grid>
-    </Paper>
+    </form>
   );
 }