From c8b4d67b949cd7a55f91a87c330ef12947edf3ba Mon Sep 17 00:00:00 2001
From: Alberto Defendi <1369-ahl-berto@users.noreply.gitlab.inf.unibz.it>
Date: Mon, 5 Apr 2021 10:13:19 +0200
Subject: [PATCH] Move control to InputField to make component more reusable
---
.../AuthUser/SignInForm/InputField.tsx | 40 ++++++++------
.../AuthUser/SignInForm/SignInForm.tsx | 53 +++++--------------
2 files changed, 36 insertions(+), 57 deletions(-)
diff --git a/src/components/AuthUser/SignInForm/InputField.tsx b/src/components/AuthUser/SignInForm/InputField.tsx
index fc11e0a..57c8472 100644
--- a/src/components/AuthUser/SignInForm/InputField.tsx
+++ b/src/components/AuthUser/SignInForm/InputField.tsx
@@ -1,32 +1,40 @@
import React, { FC } from 'react';
import { TextField } from '@material-ui/core';
+import { Control, Controller, FieldValues } from 'react-hook-form';
type Props = {
id: string;
label: string;
error: boolean;
errorMessage: string;
- value: string;
- onChange: any;
+ control: Control<FieldValues> | undefined;
+ rules: Partial<unknown>;
};
export const InputField: FC<Props> = (props: Props) => {
- const { id, label, error, errorMessage, onChange, value } = props;
+ const { id, label, error, errorMessage, control, rules } = props;
return (
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
- id={id}
- label={label}
+ <Controller
name={id}
- onChange={onChange}
- value={value}
- autoComplete={id}
- autoFocus
- error={error}
- helperText={error && errorMessage}
+ control={control}
+ rules={rules}
+ render={({ onChange, value }) => (
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id={id}
+ label={label}
+ name={id}
+ onChange={onChange}
+ value={value}
+ autoComplete={id}
+ autoFocus
+ error={error}
+ helperText={error && errorMessage}
+ />
+ )}
/>
);
};
diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx
index 5aae7b9..48f3111 100644
--- a/src/components/AuthUser/SignInForm/SignInForm.tsx
+++ b/src/components/AuthUser/SignInForm/SignInForm.tsx
@@ -1,9 +1,9 @@
import React, { FC } from 'react';
import axios from 'axios';
-import { useForm, Controller, appendErrors } from 'react-hook-form';
+import { SubmitHandler, useForm } from 'react-hook-form';
import { useIntl } from 'react-intl';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-import { TextField, Button } from '@material-ui/core';
+import { Button } from '@material-ui/core';
import { DevTool } from '@hookform/devtools';
import { InputField } from './InputField';
@@ -36,21 +36,20 @@ export const SignInForm: FC = () => {
password: '',
};
- const { control, register, errors, handleSubmit } = useForm<FormData>({
+ const { control, errors, handleSubmit } = useForm<FormData>({
defaultValues,
});
- const onSubmit: any = (values: FormData) => {
+ const onSubmit: SubmitHandler<FormData> = (values: FormData) => {
axios
.post('/api/web/login', {
values,
- token: sessionStorage.getItem('CSRF_TOKEN'),
})
.then((response) => {
- console.log(response);
+ // Handle server reponse
})
.catch((error) => {
- console.log(error);
+ // Handle error
});
};
const intl = useIntl();
@@ -62,48 +61,20 @@ export const SignInForm: FC = () => {
onSubmit={handleSubmit(onSubmit)}
data-testid="Form"
>
- <Controller
- name="email"
+ <InputField
+ id="email"
control={control}
- defaultValues
rules={{
- validate: (value) =>
+ validate: (value: string) =>
/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(value),
required: {
value: true,
message: intl.formatMessage({ id: 'email' }),
},
}}
- render={({ onChange, value }) => (
- <InputField
- id="email"
- value={value}
- onChange={onChange}
- label={intl.formatMessage({ id: 'email' })}
- error={!!errors.email}
- errorMessage={intl.formatMessage({ id: 'error' })}
- />
- )}
- />
-
- <Controller
- name="password"
- control={control}
- rules={{
- minLength: 8,
- maxLength: 60,
- required: { value: true, message: 'You must enter your name' },
- }}
- render={({ onChange, value }) => (
- <InputField
- id="password"
- value={value}
- onChange={onChange}
- label="Password"
- error={!!errors.password}
- errorMessage="Incorrect entry."
- />
- )}
+ label={intl.formatMessage({ id: 'email' })}
+ error={!!errors.email}
+ errorMessage={intl.formatMessage({ id: 'error' })}
/>
<Button
--
GitLab