From 58411ab25d4050038ff9cfc26c0a48ec12abf732 Mon Sep 17 00:00:00 2001 From: Ashish Mukarne Date: Wed, 1 Jun 2022 18:52:38 +0530 Subject: [PATCH 01/17] Adds botstrap --- package.json | 1 + yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/package.json b/package.json index 9623fc7..1bc3b7d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "@types/node": "^16.11.36", "@types/react": "^18.0.9", "@types/react-dom": "^18.0.5", + "bootstrap": "^5.1.3", "formik": "^2.2.9", "react": "^18.1.0", "react-dom": "^18.1.0", diff --git a/yarn.lock b/yarn.lock index 3e20517..afa228d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2787,6 +2787,11 @@ boolbase@^1.0.0, boolbase@~1.0.0: resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" integrity sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww== +bootstrap@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/bootstrap/-/bootstrap-5.1.3.tgz#ba081b0c130f810fa70900acbc1c6d3c28fa8f34" + integrity sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q== + brace-expansion@^1.1.7: version "1.1.11" resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd" From ea6093effe5ebfaa47e000a8b92dc36466e8a0cd Mon Sep 17 00:00:00 2001 From: Ashish Mukarne Date: Wed, 1 Jun 2022 18:53:01 +0530 Subject: [PATCH 02/17] Updates dropdown --- src/App.tsx | 4 ++-- src/dropdown.tsx | 14 +++++++++++--- src/index.tsx | 1 + 3 files changed, 14 insertions(+), 5 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index bfadf32..6f9f52b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,7 +4,7 @@ import "./App.css"; import { Link } from "./link-tag"; import { FormFields } from "./form"; -import { Test } from "./dropdown"; +import { CustomDropdown } from "./dropdown"; const user = [ { @@ -23,7 +23,7 @@ function App() { return (
- + {/* logo */} {/* */} {/*

diff --git a/src/dropdown.tsx b/src/dropdown.tsx index 542fe1b..bb9cf67 100644 --- a/src/dropdown.tsx +++ b/src/dropdown.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { Dropdown, DropdownToggle, @@ -6,10 +6,18 @@ import { DropdownItem, } from "reactstrap"; -export const Test = (props: any) => { +export const CustomDropdown = (props: any) => { + const [isOpen, setIsOpen] = useState(true); + return (

- + {`isOpen=${isOpen}`} + { + setIsOpen(!isOpen); + }} + > Dropdown Header diff --git a/src/index.tsx b/src/index.tsx index 032464f..b0739cd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; +import 'bootstrap/dist/css/bootstrap.min.css'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement From e7f6a6b7ab371d3d3b9925d575aa8f06cda6eeed Mon Sep 17 00:00:00 2001 From: RuchetaG <70937081+RuchetaG@users.noreply.github.com> Date: Fri, 3 Jun 2022 11:43:48 +0530 Subject: [PATCH 03/17] adding validations --- src/App.tsx | 3 +- src/dropdown.tsx | 16 ++++------- src/form.tsx | 72 +++++++++++++++++++++++++++--------------------- 3 files changed, 46 insertions(+), 45 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 6f9f52b..5f8b38d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -23,9 +23,8 @@ function App() { return (
- {/* logo */} - {/* */} + {/*

Edit src/App.tsx and save to reload.

diff --git a/src/dropdown.tsx b/src/dropdown.tsx index bb9cf67..234eaa7 100644 --- a/src/dropdown.tsx +++ b/src/dropdown.tsx @@ -7,27 +7,21 @@ import { } from "reactstrap"; export const CustomDropdown = (props: any) => { - const [isOpen, setIsOpen] = useState(true); + const [isOpen, setIsOpen] = useState(false); return (
- {`isOpen=${isOpen}`} { setIsOpen(!isOpen); }} > - Dropdown + Select Value - Header - Some Action - Dropdown Item Text - Action (disabled) - - Foo Action - Bar Action - Quo Action + Mr. + Mrs. + Miss
diff --git a/src/form.tsx b/src/form.tsx index fcc61e1..9271426 100644 --- a/src/form.tsx +++ b/src/form.tsx @@ -10,19 +10,19 @@ import { } from "reactstrap"; import { Formik, Form, Field } from "formik"; import * as Yup from "yup"; +import { CustomDropdown } from "./dropdown"; const SignupSchema = Yup.object().shape({ firstName: Yup.string() - .min(2, "Name should not be empty") + .min(1, "Name should be atleast 2 characters long") .max(64, "Specified name is too long"), lastName: Yup.string() - .min(1, "Name should not be empty") + .min(2, "Name should be atleast 2 characters long") .max(64, "Specified name is too long"), email: Yup.string().email("Email is invalid"), + dob: Yup.date().max(new Date("01-01-2000"), "Enter date before 01-01-2000"), }); -const values = ["Mr.", "Mrs", "Miss"]; - export const FormFields = (props: any) => { return ( { firstName: "", lastName: "", email: "", + dob: null, + picked: "", }} validationSchema={SignupSchema} onSubmit={(values) => { @@ -37,56 +39,62 @@ export const FormFields = (props: any) => { console.log(values); }} > - {({ errors, touched }) => ( + {({ errors, touched, values }) => (
-
- - Select - - Mr. - Mrs. - Miss - - -
+ {errors.firstName && touched.firstName ? (
{errors.firstName}
) : null} -   {errors.lastName && touched.lastName ? (
{errors.lastName}
) : null} -

+
{errors.email && touched.email ?
{errors.email}
: null} -   - -

+
-

- - - - - -

+
+
+ + +
Picked: {values.picked}
+
+
- -

- -   +
+ + + +
+
)} From 14bc232380ea5606b643f4b4650ab194c22475e3 Mon Sep 17 00:00:00 2001 From: Ashish Mukarne Date: Fri, 3 Jun 2022 12:09:55 +0530 Subject: [PATCH 04/17] Updates form validation --- src/App.css | 4 ++++ src/form.tsx | 56 +++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 53 insertions(+), 7 deletions(-) diff --git a/src/App.css b/src/App.css index 74b5e05..fe8b3c0 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,7 @@ transform: rotate(360deg); } } + +.color-black{ + color: black +} diff --git a/src/form.tsx b/src/form.tsx index 9271426..9cbcfaa 100644 --- a/src/form.tsx +++ b/src/form.tsx @@ -7,6 +7,16 @@ import { DropdownItem, DropdownToggle, DropdownMenu, + Card, + CardBody, + CardSubtitle, + CardText, + CardTitle, + Container, + Row, + Col, + CardHeader, + Alert, } from "reactstrap"; import { Formik, Form, Field } from "formik"; import * as Yup from "yup"; @@ -14,7 +24,7 @@ import { CustomDropdown } from "./dropdown"; const SignupSchema = Yup.object().shape({ firstName: Yup.string() - .min(1, "Name should be atleast 2 characters long") + .min(2, "Name should be at least 2 characters long") .max(64, "Specified name is too long"), lastName: Yup.string() .min(2, "Name should be atleast 2 characters long") @@ -41,13 +51,44 @@ export const FormFields = (props: any) => { > {({ errors, touched, values }) => (
- + + + +
+ + + + User Registration + + + + + + + + + + + + + {errors.firstName && touched.firstName ? ( +
{errors.firstName}
+ ) : null} + + + + + + + + +
+ + + - - - {errors.firstName && touched.firstName ? ( -
{errors.firstName}
- ) : null} {errors.lastName && touched.lastName ? ( @@ -64,6 +105,7 @@ export const FormFields = (props: any) => { placeholder="date placeholder" type="date" /> + {errors.dob && touched.dob ?
{errors.dob}
: null}

From 0f86a312b43cdb1c376791f2d83357628a260404 Mon Sep 17 00:00:00 2001 From: RuchetaG <70937081+RuchetaG@users.noreply.github.com> Date: Fri, 3 Jun 2022 13:39:24 +0530 Subject: [PATCH 05/17] adding validations --- package.json | 1 + src/dropdown.tsx | 48 +++++++----- src/form.tsx | 183 +++++++++++++++++++++++++++++++--------------- src/formInput.tsx | 33 +++++++++ yarn.lock | 146 ++++++++++++++++++++++++++++++++++-- 5 files changed, 326 insertions(+), 85 deletions(-) create mode 100644 src/formInput.tsx diff --git a/package.json b/package.json index 1bc3b7d..b8c942e 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", + "react-select": "^5.3.2", "reactstrap": "^9.0.3", "typescript": "^4.7.2", "web-vitals": "^2.1.4", diff --git a/src/dropdown.tsx b/src/dropdown.tsx index 234eaa7..92f852c 100644 --- a/src/dropdown.tsx +++ b/src/dropdown.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import Select from "react-select"; import { Dropdown, DropdownToggle, @@ -6,24 +7,33 @@ import { DropdownItem, } from "reactstrap"; -export const CustomDropdown = (props: any) => { - const [isOpen, setIsOpen] = useState(false); +const options = [ + { + value: "Mr.", + label: "Mr.", + }, + { value: "Mrs.", label: "Mrs." }, + { value: "Miss", label: "Miss" }, +]; - return ( -
- { - setIsOpen(!isOpen); - }} - > - Select Value - - Mr. - Mrs. - Miss - - -
- ); +export const CustomDropdown = (props: any) => { + return ; -}; - -//
-{ - /* { - setIsOpen(!isOpen); -}} -> -Select Value - - Mr. - Mrs. - Miss - - -
*/ -} +export const CustomDropdown = () => ( + + e.preventDefault()}> + + Click me + + + + +); diff --git a/src/form.tsx b/src/form.tsx index 03c0db0..482bbaf 100644 --- a/src/form.tsx +++ b/src/form.tsx @@ -2,7 +2,7 @@ import { Button, Card, Row, Col, Alert, Typography } from "antd"; import { Formik, Form, Field } from "formik"; import * as Yup from "yup"; import { CustomDropdown } from "./dropdown"; -import { FormInput } from "./FormInput"; +import { FormInput } from "./formInput"; import axios from "axios"; const { Title } = Typography; diff --git a/src/formInput.tsx b/src/formInput.tsx index 97cb42a..aad8e57 100644 --- a/src/formInput.tsx +++ b/src/formInput.tsx @@ -1,7 +1,9 @@ import React from "react"; -import { Row, Col, Label, Alert } from "reactstrap"; +import { Row, Col, Typography, Alert } from "antd"; import { Field } from "formik"; +const { Title } = Typography; + export const FormInput = (props: { labelText: string; name: string; @@ -12,16 +14,14 @@ export const FormInput = (props: { return ( - + {props.labelText} {props.errors[props?.name] && props.touched[props?.name] ? ( - {props.errors[props?.name]} + ) : null} diff --git a/src/signup.tsx b/src/signup.tsx index de5e847..68979a1 100644 --- a/src/signup.tsx +++ b/src/signup.tsx @@ -1,22 +1,13 @@ import React from "react"; -import { - Label, - Button, - Card, - CardBody, - CardTitle, - Container, - Row, - Col, - CardHeader, - Alert, -} from "reactstrap"; +import { Button, Card, Row, Col, Alert, Typography } from "antd"; import { Formik, Form, Field } from "formik"; import * as Yup from "yup"; import { CustomDropdown } from "./dropdown"; -import { FormInput } from "./FormInput"; +import { FormInput } from "./formInput"; import axios from "axios"; +const { Title } = Typography; + const signUpSchema = Yup.object().shape({ firstName: Yup.string() .min(2, "Name should be at least 2 characters long") @@ -75,83 +66,72 @@ export const SignUpForm = () => { > {({ errors, touched, values }) => ( - - - -
- - - - User Onboarding - - - - - - - - - - - - - - - - - - - - - - - - - - {errors.dob && touched.dob ? ( - {errors.dob} - ) : null} - - - - - -
- - - + + +
+ + + + Title: + + + + + + + + + + + + + + Date of Birth: + + + + + + {errors.dob && touched.dob ? ( + + ) : null} + + + + +
+ + )}
From b687d6fd398f2242978335c167ca9c4c0f4ccd96 Mon Sep 17 00:00:00 2001 From: RuchetaG <70937081+RuchetaG@users.noreply.github.com> Date: Thu, 16 Jun 2022 17:45:03 +0530 Subject: [PATCH 15/17] adding react hooks --- package.json | 3 +++ src/App.tsx | 7 ++++-- src/ReactHooks.tsx | 42 ++++++++++++++++++++++++++++++++++ yarn.lock | 56 ++++++++++++++-------------------------------- 4 files changed, 67 insertions(+), 41 deletions(-) create mode 100644 src/ReactHooks.tsx diff --git a/package.json b/package.json index 67f2bbb..391c058 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "version": "0.1.0", "private": true, "dependencies": { + "@hookform/resolvers": "^2.9.1", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", @@ -17,6 +18,8 @@ "formik": "^2.2.9", "react": "^18.1.0", "react-dom": "^18.1.0", + "react-hook-form": "^7.32.1", + "react-hooks": "^1.0.1", "react-scripts": "5.0.1", "react-select": "^5.3.2", "typescript": "^4.7.2", diff --git a/src/App.tsx b/src/App.tsx index 17667f5..35193e0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,6 +7,8 @@ import { Link } from "./link-tag"; import { FormFields } from "./form"; import { SignUpForm } from "./signup"; +import { ReactHooks } from "./ReactHooks"; + const { Step } = Steps; function App() { @@ -19,7 +21,8 @@ function App() { return (
-
); } diff --git a/src/ReactHooks.tsx b/src/ReactHooks.tsx new file mode 100644 index 0000000..caef799 --- /dev/null +++ b/src/ReactHooks.tsx @@ -0,0 +1,42 @@ +import React from "react"; +import { useForm } from "react-hook-form"; +import { yupResolver } from "@hookform/resolvers/yup"; +import * as yup from "yup"; + +const fieldMandatoryMessage = "This field is required"; + +export const ReactHooks = () => { + const schema = yup + .object({ + email: yup + .string() + .min(2, "Minimum 2 character are required") + .email("Email should be valid") + .required({ fieldMandatoryMessage }), + password: yup + .string() + .required({ fieldMandatoryMessage }) + .min(8, "Password should be 8 characters long") + .uppercase("One uppercase character required") + .lowercase("One uppercase character required"), + }) + .required(); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + const onSubmit = (data: any) => console.log(data); + return ( +
+ + {/*

{errors.email?.message}

*/} + + {/*

{errors.password?.message}

*/} + {console.log(errors)} + +
+ ); +}; diff --git a/yarn.lock b/yarn.lock index 1a0299f..51b44c4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1298,6 +1298,11 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" +"@hookform/resolvers@^2.9.1": + version "2.9.1" + resolved "https://registry.yarnpkg.com/@hookform/resolvers/-/resolvers-2.9.1.tgz#59121e38d8fc95d2fd1f41c9631393cd21e10b65" + integrity sha512-80lyFFcExEB7A09PFnl8k7A3obQyDF6MyO/FThtwetk+MTedYMs08Aqf7mgWnOawFGyz5QF+TZXJSYiIZW2tEg== + "@humanwhocodes/config-array@^0.9.2": version "0.9.5" resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.5.tgz#2cbaf9a89460da24b5ca6531b8bbfc23e1df50c7" @@ -1619,11 +1624,6 @@ schema-utils "^3.0.0" source-map "^0.7.3" -"@popperjs/core@^2.6.0": - version "2.11.5" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64" - integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw== - "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -6146,7 +6146,7 @@ lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0: +loose-envify@^1.1.0, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -7363,7 +7363,7 @@ prompts@^2.0.1, prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1: +prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7873,10 +7873,15 @@ react-fast-compare@^2.0.1: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-fast-compare@^3.0.1: - version "3.2.0" - resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" - integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-hook-form@^7.32.1: + version "7.32.1" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.32.1.tgz#103de7b7ef3a7d295264433e4464bd17c8e4bdc9" + integrity sha512-A0bsgZZUnGdG68sXLBNMN7zRYKbYc/ESjDkjrJZ8PZ8/96EQ0IwMfYY3wpopt+yn2+Mm3APEUkw+JdjYQSRVJA== + +react-hooks@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/react-hooks/-/react-hooks-1.0.1.tgz#e62197c38cd8d0703060f791234f7f4698aa7c44" + integrity sha512-PXU08tw4SvKwkW99qgnyV98x939RCmBC6aXqALPQXPjKq6+6EoH79Rz4KdUozzlpSyWmn2IiEm0vh3p+79aP5w== react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0: version "16.13.1" @@ -7893,14 +7898,6 @@ react-is@^18.0.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67" integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg== -react-popper@^2.2.4: - version "2.3.0" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-2.3.0.tgz#17891c620e1320dce318bad9fede46a5f71c70ba" - integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q== - dependencies: - react-fast-compare "^3.0.1" - warning "^4.0.2" - react-refresh@^0.11.0: version "0.11.0" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046" @@ -7974,7 +7971,7 @@ react-select@^5.3.2: prop-types "^15.6.0" react-transition-group "^4.3.0" -react-transition-group@^4.3.0, react-transition-group@^4.4.2: +react-transition-group@^4.3.0: version "4.4.2" resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== @@ -7991,18 +7988,6 @@ react@^18.1.0: dependencies: loose-envify "^1.1.0" -reactstrap@^9.0.3: - version "9.0.3" - resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-9.0.3.tgz#c5086576f466e23c59f534a0ec0eba9d179c0b8c" - integrity sha512-PoczGgSvx8a1X5vsdz92OgEuGnnFmcHOv1KwD/ELTC86vzBBnvhDOfU5t8eS4NSv1uFGeG1ERev2obpAZvsW8Q== - dependencies: - "@babel/runtime" "^7.12.5" - "@popperjs/core" "^2.6.0" - classnames "^2.2.3" - prop-types "^15.5.8" - react-popper "^2.2.4" - react-transition-group "^4.4.2" - readable-stream@^2.0.1: version "2.3.7" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57" @@ -9227,13 +9212,6 @@ walker@^1.0.7: dependencies: makeerror "1.0.12" -warning@^4.0.2: - version "4.0.3" - resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" - integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== - dependencies: - loose-envify "^1.0.0" - watchpack@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.3.1.tgz#4200d9447b401156eeca7767ee610f8809bc9d25" From bed9bddb5b8789b577dc6a9692d55c2d835b946e Mon Sep 17 00:00:00 2001 From: RuchetaG <70937081+RuchetaG@users.noreply.github.com> Date: Thu, 16 Jun 2022 17:50:41 +0530 Subject: [PATCH 16/17] react hook component --- src/ReactHooks.tsx | 77 +++++++++++++++++++++++++++++++++------------- 1 file changed, 56 insertions(+), 21 deletions(-) diff --git a/src/ReactHooks.tsx b/src/ReactHooks.tsx index caef799..98b86f5 100644 --- a/src/ReactHooks.tsx +++ b/src/ReactHooks.tsx @@ -1,26 +1,59 @@ +// import React from "react"; +// import { useForm } from "react-hook-form"; +// import { yupResolver } from "@hookform/resolvers/yup"; +// import * as yup from "yup"; + +// const fieldMandatoryMessage = "This field is required"; + +// export const ReactHooks = () => { +// const schema = yup +// .object({ +// email: yup +// .string() +// .min(2, "Minimum 2 character are required") +// .email("Email should be valid") +// .required({ fieldMandatoryMessage }), +// password: yup +// .string() +// .required({ fieldMandatoryMessage }) +// .min(8, "Password should be 8 characters long") +// .uppercase("One uppercase character required") +// .lowercase("One uppercase character required"), +// }) +// .required(); +// const { +// register, +// handleSubmit, +// formState: { errors }, +// } = useForm({ +// resolver: yupResolver(schema), +// }); +// const onSubmit = (data: any) => console.log(data); +// return ( +//
+// +// {/*

{errors.email?.message}

*/} +// +// {/*

{errors.password?.message}

*/} +// {console.log(errors)} +// +//
+// ); +// }; + import React from "react"; import { useForm } from "react-hook-form"; import { yupResolver } from "@hookform/resolvers/yup"; import * as yup from "yup"; -const fieldMandatoryMessage = "This field is required"; +const schema = yup + .object({ + firstName: yup.string().required(), + age: yup.number().positive().integer().required(), + }) + .required(); export const ReactHooks = () => { - const schema = yup - .object({ - email: yup - .string() - .min(2, "Minimum 2 character are required") - .email("Email should be valid") - .required({ fieldMandatoryMessage }), - password: yup - .string() - .required({ fieldMandatoryMessage }) - .min(8, "Password should be 8 characters long") - .uppercase("One uppercase character required") - .lowercase("One uppercase character required"), - }) - .required(); const { register, handleSubmit, @@ -29,13 +62,15 @@ export const ReactHooks = () => { resolver: yupResolver(schema), }); const onSubmit = (data: any) => console.log(data); + return (
- - {/*

{errors.email?.message}

*/} - - {/*

{errors.password?.message}

*/} - {console.log(errors)} + +

{errors.firstName?.message}

+ + +

{errors.age?.message}

+
); From 558d43af1b8b7b1cb942bc1f149d3603fd47c3c9 Mon Sep 17 00:00:00 2001 From: RuchetaG <70937081+RuchetaG@users.noreply.github.com> Date: Fri, 17 Jun 2022 15:44:13 +0530 Subject: [PATCH 17/17] adding redux --- package.json | 2 ++ yarn.lock | 27 +++++++++++++++++++++++++++ 2 files changed, 29 insertions(+) diff --git a/package.json b/package.json index 391c058..f0a0594 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@hookform/resolvers": "^2.9.1", + "@reduxjs/toolkit": "^1.8.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.2.0", "@testing-library/user-event": "^13.5.0", @@ -22,6 +23,7 @@ "react-hooks": "^1.0.1", "react-scripts": "5.0.1", "react-select": "^5.3.2", + "redux": "^4.2.0", "typescript": "^4.7.2", "web-vitals": "^2.1.4", "yup": "^0.32.11" diff --git a/yarn.lock b/yarn.lock index 51b44c4..37260fc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1624,6 +1624,16 @@ schema-utils "^3.0.0" source-map "^0.7.3" +"@reduxjs/toolkit@^1.8.2": + version "1.8.2" + resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.2.tgz#352fd17bc858af51d21ce8d28183a930cab9e638" + integrity sha512-CtPw5TkN1pHRigMFCOS/0qg3b/yfPV5qGCsltVnIz7bx4PKTJlGHYfIxm97qskLknMzuGfjExaYdXJ77QTL0vg== + dependencies: + immer "^9.0.7" + redux "^4.1.2" + redux-thunk "^2.4.1" + reselect "^4.1.5" + "@rollup/plugin-babel@^5.2.0": version "5.3.1" resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283" @@ -8032,6 +8042,18 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-thunk@^2.4.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.1.tgz#0dd8042cf47868f4b29699941de03c9301a75714" + integrity sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q== + +redux@^4.1.2, redux@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" + integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== + dependencies: + "@babel/runtime" "^7.9.2" + regenerate-unicode-properties@^10.0.1: version "10.0.1" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.0.1.tgz#7f442732aa7934a3740c779bb9b3340dccc1fb56" @@ -8130,6 +8152,11 @@ requires-port@^1.0.0: resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8= +reselect@^4.1.5: + version "4.1.6" + resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.6.tgz#19ca2d3d0b35373a74dc1c98692cdaffb6602656" + integrity sha512-ZovIuXqto7elwnxyXbBtCPo9YFEr3uJqj2rRbcOOog1bmu2Ag85M4hixSwFWyaBMKXNgvPaJ9OSu9SkBPIeJHQ== + resize-observer-polyfill@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"