Merge pull request #162 from Lemoncode/hooks

Hooks

Author: brauliodiez

hooks/14_FormValidation/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

hooks/14_FormValidation/Readme.md

@@ -0,0 +1,287 @@
+# 13 Login Form
+
+Let's add validation support to this form.
+
+For this we will use lc-form-validation library
+
+Summary steps:
+
+- Install lc-form-validation library.
+- Refactor input component to a common component and include error validation info.
+- Let's define the validation for the form.
+- Let's hook it.
+
+## Steps
+
+- Copy the content from _13 LoginForm_ and execute `npm install`.
+
+```bash
+npm install
+```
+
+- Let's install the _lc-form-validation-library_.
+
+```bash
+npm install lc-form-validation
+```
+
+- To avoid having too much repeated code let's move to common an input component, including it's
+  label plus validation text.
+
+_./common/textFieldForm.tsx_
+
+```tsx
+import * as React from "react";
+import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography/Typography";
+
+interface Props {
+  name: string;
+  label: string;
+  onChange: any;
+  value: string;
+  error?: string;
+  type?: string;
+}
+
+const defaultProps: Partial<Props> = {
+  type: "text"
+};
+
+const onTextFieldChange = (
+  fieldId: string,
+  onChange: (fieldId, value) => void
+) => e => {
+  onChange(fieldId, e.target.value);
+};
+
+export const TextFieldForm: React.StatelessComponent<Props> = props => {
+  const { name, label, onChange, value, error, type } = props;
+  return (
+    <>
+      <TextField
+        label={label}
+        margin="normal"
+        value={value}
+        type={type}
+        onChange={onTextFieldChange(name, onChange)}
+      />
+      <Typography variant="caption" color="error" gutterBottom>
+        {props.error}
+      </Typography>
+    </>
+  );
+};
+```
+
+- Let's add it to the common index file.
+
+_./src/common/index.ts_
+
+```diff
+export * from './notification';
++ export * from './textFieldForm';
+```
+
+- Now let's define a basic validation for the form, we want to ensure both fields are informed.
+
+_./src/pages/loginPage.validation.ts_
+
+```typescript
+import {
+  createFormValidation,
+  ValidationConstraints,
+  Validators
+} from "lc-form-validation";
+
+const loginFormValidationConstraints: ValidationConstraints = {
+  fields: {
+    login: [{ validator: Validators.required }],
+    password: [{ validator: Validators.required }]
+  }
+};
+
+export const loginFormValidation = createFormValidation(
+  loginFormValidationConstraints
+);
+```
+
+- Let's create now a class to hold the dataFormErrors.
+
+_./src/login/loginPage.viewmodel.ts_
+
+```typescript
+import { FieldValidationResult } from "lc-form-validation";
+
+export interface LoginFormErrors {
+  login: FieldValidationResult;
+  password: FieldValidationResult;
+}
+
+export const createDefaultLoginFormErrors = (): LoginFormErrors => ({
+  login: new FieldValidationResult(),
+  password: new FieldValidationResult()
+});
+```
+
+- Now let's go for the component side.
+
+- First let's add the dataFormErrors to the state of the component.
+
+_./src/pages/loginPage.tsx_
+
+```diff
+import { isValidLogin } from "../api/login";
+import { NotificationComponent } from "../common";
++ import {LoginFormErrors, createDefaultLoginFormErrors} from './loginPage.viewmodel';
+```
+
+_./src/pages/loginPage.tsx_
+
+```diff
+const LoginPageInner = (props: Props) => {
+  const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
+    createEmptyLogin()
+  );
++ const [loginFormErrors, setLoginFormErrors] = React.useState<LoginFormErrors>(createDefaultLoginFormErrors());
+  const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
+```
+
+- Let's fire the validation on viemodel update.
+
+_./src/pages/loginPage.tsx_
+
+```diff
++ import { loginFormValidation } from "./loginPage.validation";
+```
+
+_./src/pages/loginPage.tsx_
+
+```diff
+const onUpdateLoginField = (name, value) => {
+    setLoginInfo({
+      ...loginInfo,
+      [name]: value
+    });
+
++    loginFormValidation.validateField(loginInfo, name, value)
++    .then((fieldValidationResult) => {
+
++        setLoginFormErrors({
++          ...loginFormErrors,
++          [name]: fieldValidationResult,
++        });
++   });
+  }
+```
+
+- We need to pass down dataFormErrors
+
+_./src/pages/loginPage.tsx_
+
+```diff
+          <LoginForm
+            onLogin={onLogin}
+            onUpdateField={onUpdateLoginField}
+            loginInfo={loginInfo}
++       loginFormErrors={this.state.loginFormErrors}
+          />
+```
+
+_./src/pages/loginPage.tsx_
+
+```diff
+interface PropsForm {
+  onLogin: () => void;
+  onUpdateField: (string, any) => void;
+  loginInfo: LoginEntity;
++ loginFormErrors : LoginFormErrors;
+}
+```
+
+- Let's replace the _TextFieldForm_ entries with the wrapper we have created (includes
+  displaying validation errors).
+
+_./src/pages/loginPage.tsx_
+
+```diff
++ import { TextFieldForm } from '../common';
+```
+
+_./src/pages/loginPage.tsx_
+
+```diff
+const LoginForm = (props: PropsForm) => {
+-  const { onLogin, onUpdateField, loginInfo } = props;
++  const { onLogin, onUpdateField, loginInfo, loginFormErrors } = props;
+```
+
+```diff
+-      <TextField
++      <TextFieldForm
+        label="Name"
+        name="login"
+-        margin="normal"
+        value={loginInfo.login}
+-        onChange={onTexFieldChange("login")}
++        onChange={onUpdateField}
++        error={loginFormErrors.login.errorMessage}
+      />
+-      <TextField
++      <TextFieldForm
+        label="Password"
+        name="password"
+        type="password"
+-        margin="normal"
+        value={loginInfo.password}
+-        onChange={onTexFieldChange("password")}
++        onChange={onUpdateField}
++        error={loginFormErrors.password.errorMessage}
+      />
+```
+
+- let's give a try
+
+```
+npm start
+```
+
+- And let's add an alert (Excercise and a notification) when the user clicks and the form all the fields are valid.
+
+_./src/pages/loginPage.tsx_
+
+```diff
+const onLogin = () => {
++  loginFormValidation.validateForm(loginInfo)
++    .then((formValidationResult) => {
++        if(formValidationResult.succeeded) {
+            if (isValidLogin(loginInfo)) {
+              props.history.push("/pageB");
+            } else {
+              setShowLoginFailedMsg(true);
+            }
++        } else {
++            alert('error, review the fields');
++          const updatedLoginFormErrors = {
++             ...loginFormErrors,
++             ...formValidationResult.fieldErrors,
++          }
++          setLoginFormErrors(updatedLoginFormErrors);
++       }
+
+
++    });
+};
+```
+
+> Excercise, refactor this method following single abstraction level principle and single resposibility principle.
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

hooks/14_FormValidation/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-typescript-by-sample",
+  "version": "1.0.0",
+  "description": "React Typescript examples",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server  --mode development --inline --hot --open",
+    "build": "webpack  --mode development"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "hooks"
+  ],
+  "author": "Braulio Diez Botella",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.1",
+    "@material-ui/core": "^3.9.2",
+    "@material-ui/icons": "^3.0.2",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.1",
+    "@types/react-router-dom": "^4.3.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "style-loader": "^0.23.1",
+    "typescript": "^3.3.3",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "lc-form-validation": "^2.0.0",
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "react-router-dom": "^4.3.1"
+  }
+}

hooks/14_FormValidation/src/api/login.ts

@@ -0,0 +1,5 @@
+import {LoginEntity} from '../model/login';
+
+// Just a fake loginAPI
+export const isValidLogin = (loginInfo : LoginEntity) : boolean =>
+  (loginInfo.login === 'admin' && loginInfo.password === 'test');

hooks/14_FormValidation/src/app.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { HashRouter, Switch, Route } from "react-router-dom";
+import { LoginPage } from "./pages/loginPage";
+import { PageB } from "./pages/pageB";
+
+export const App = () => {
+  return (
+    <>
+      <HashRouter>
+        <Switch>
+          <Route exact={true} path="/" component={LoginPage} />
+          <Route path="/pageB" component={PageB} />
+        </Switch>
+      </HashRouter>
+    </>
+  );
+};

hooks/14_FormValidation/src/common/index.ts

@@ -0,0 +1,2 @@
+export * from './notification';
+export * from './textFieldForm';