diff --git a/README.md b/README.md
index 5a14922c2dcfce233562b1b292fdc162c061488a..39b360a1e7a8a396baf2b0b094867eaf1f0081a9 100644
--- a/README.md
+++ b/README.md
@@ -48,3 +48,4 @@ yarn start
[react calendar app](https://codesandbox.io/s/kkyvoj97pv?from-embed=&file=/src/index.js)
+[Typescript cheatsheet](https://github.com/typescript-cheatsheets/react/blob/main/README.md#hooks)
\ No newline at end of file
diff --git a/package.json b/package.json
index 64695ddb86d9dbb3848b396a7ace8c4e103ce647..abb1f096451196acb1e304f828b55ade781b56e4 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@hookform/devtools": "^2.2.1",
"@material-ui/core": "^4.11.3",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
diff --git a/src/components/AuthUser/SignInForm/SignInForm.tsx b/src/components/AuthUser/SignInForm/SignInForm.tsx
index 28c017ac8c7c85922ab8610cb3e37764bcf54d5c..866b5df7501ad014e5db4d4382992c9139d47bf4 100644
--- a/src/components/AuthUser/SignInForm/SignInForm.tsx
+++ b/src/components/AuthUser/SignInForm/SignInForm.tsx
@@ -1,9 +1,8 @@
import React, { FC } from 'react';
-import { useForm } from 'react-hook-form';
+import { useForm, Controller } from 'react-hook-form';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-
-import TextField from '@material-ui/core/TextField';
-import Button from '@material-ui/core/Button';
+import { TextField, Button } from '@material-ui/core';
+import { DevTool } from '@hookform/devtools';
const useStyles = makeStyles((theme: Theme) =>
createStyles({
@@ -21,75 +20,99 @@ const useStyles = makeStyles((theme: Theme) =>
},
}),
);
-
+// TODO: real time form validation
export const SignInForm: FC = () => {
- type FormData = {
+ interface FormData {
email: string;
password: string;
- };
+ }
const defaultValues: FormData = {
email: '',
password: '',
};
- const { register, errors, handleSubmit, getValues } = useForm({
+ const { control, register, errors, handleSubmit } = useForm<FormData>({
+ mode: 'onChange',
+ reValidateMode: 'onChange',
defaultValues,
});
- const onSubmit = handleSubmit((values: FormData) => {
+ const onSubmit: any = (values: FormData) => {
// Send data
- });
-
+ };
const classes = useStyles();
-
return (
- <form className={classes.form} onSubmit={onSubmit} data-testid="Form">
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
- id="email"
- label="Email Address"
- name="email"
- autoComplete="email"
- autoFocus
- inputRef={register({
- required: 'Required',
- validate: {
- emailEqual: (value) => value === getValues().email || 'Error',
- },
- })}
- />
- {errors.email && errors.email.message}
- <TextField
- variant="outlined"
- margin="normal"
- required
- fullWidth
- name="password"
- label="Password"
- type="password"
- id="password"
- autoComplete="current-password"
- inputRef={register({
- required: 'Required',
- min: 8,
- max: 60,
- })}
- />
-
- <Button
- type="submit"
- fullWidth
- variant="contained"
- color="primary"
- data-testid="Submit"
- className={classes.submit}
+ <>
+ <form
+ className={classes.form}
+ onSubmit={handleSubmit(onSubmit)}
+ data-testid="Form"
>
- Sign In
- </Button>
- </form>
+ <Controller
+ name="email"
+ control={control}
+ defaultValues
+ rules={{
+ required: true,
+ pattern: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
+ }}
+ render={() => (
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ id="email"
+ label="Email Address"
+ name="email"
+ autoComplete="email"
+ autoFocus
+ error={Boolean(errors.email)}
+ helperText={errors.email && 'Incorrect entry.'}
+ />
+ )}
+ />
+
+ <Controller
+ name="password"
+ control={control}
+ defaultValues
+ rules={{
+ required: true,
+ min: 8,
+ max: 60,
+ }}
+ render={() => (
+ <TextField
+ variant="outlined"
+ margin="normal"
+ required
+ fullWidth
+ name="password"
+ label="Password"
+ type="password"
+ id="password"
+ autoComplete="password"
+ autoFocus
+ error={Boolean(errors.password)}
+ helperText={errors.password && 'Incorrect entry.'}
+ />
+ )}
+ />
+
+ <Button
+ type="submit"
+ fullWidth
+ variant="contained"
+ color="primary"
+ data-testid="Submit"
+ className={classes.submit}
+ >
+ Sign In
+ </Button>
+ </form>
+ <DevTool control={control} /> {/* set up the dev tool */}
+ </>
);
};
diff --git a/yarn.lock b/yarn.lock
index ccc3081088d364c94a0ffe173eb193bcb77f717b..e7c9c40b88a418938ffeceadf8a7c415a7cc6727 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1512,7 +1512,7 @@
"@emotion/utils" "0.11.3"
"@emotion/weak-memoize" "0.2.5"
-"@emotion/core@^10.0.14", "@emotion/core@^10.0.16":
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.16", "@emotion/core@^10.0.28":
version "10.1.1"
resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.1.1.tgz#c956c1365f2f2481960064bcb8c4732e5fb612c3"
integrity sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==
@@ -1576,7 +1576,7 @@
"@emotion/serialize" "^0.11.15"
"@emotion/utils" "0.11.3"
-"@emotion/styled@^10.0.14":
+"@emotion/styled@^10.0.14", "@emotion/styled@^10.0.27":
version "10.0.27"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
@@ -1805,6 +1805,18 @@
dependencies:
"@hapi/hoek" "^9.0.0"
+"@hookform/devtools@^2.2.1":
+ version "2.2.1"
+ resolved "https://registry.yarnpkg.com/@hookform/devtools/-/devtools-2.2.1.tgz#2d88414d375199e193c2611b770b194b7752a623"
+ integrity sha512-VQh4kqwUOpz9LCDzIP0aJ4qnD/ob8Gp09L8gDy++9XtL66z6g8kbCynUvBrJm4qbCNdH0M7/Spm3AUjJqUuFlA==
+ dependencies:
+ "@emotion/core" "^10.0.28"
+ "@emotion/styled" "^10.0.27"
+ "@types/lodash" "^4.14.152"
+ little-state-machine "^3.0.1"
+ lodash "^4.17.15"
+ react-simple-animate "^3.3.8"
+
"@hutson/parse-repository-url@^3.0.0":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
@@ -2731,7 +2743,7 @@
dependencies:
"@types/node" "*"
-"@types/lodash@^4.14.92":
+"@types/lodash@^4.14.152", "@types/lodash@^4.14.92":
version "4.14.168"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008"
integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q==
@@ -11423,6 +11435,11 @@ listr2@^3.2.2:
through "^2.3.8"
wrap-ansi "^7.0.0"
+little-state-machine@^3.0.1:
+ version "3.1.4"
+ resolved "https://registry.yarnpkg.com/little-state-machine/-/little-state-machine-3.1.4.tgz#b29c396f732976cc327a612ef9a7a53f3f3520ab"
+ integrity sha512-gYlLCj6oUME0NG34/2O0Ljy52qYYyYDJ5yiAuq2ijbaRlBKIqtQQkKkEYn0KfjYXCE693j+bdY22EyZin25Bhw==
+
load-cfg@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/load-cfg/-/load-cfg-2.1.0.tgz#230ef6950466df59be934363988d35eee48ce8b9"
@@ -15293,6 +15310,11 @@ react-scripts@4.0.3:
optionalDependencies:
fsevents "^2.1.3"
+react-simple-animate@^3.3.8:
+ version "3.3.11"
+ resolved "https://registry.yarnpkg.com/react-simple-animate/-/react-simple-animate-3.3.11.tgz#04bb03ffe707e4e7cab4e22a03a93f20415b39de"
+ integrity sha512-kt2SKJ4Gw3klTmRbik/9R741fPiVRVlxkXvV0c3uu8NqOtdc5ITis62WcdiKH6U5QhCjXNfLW9lrbQ4cAYujyA==
+
react-simple-code-editor@^0.10.0:
version "0.10.0"
resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"