14 form validation wip

Author: brauliodiez

hooks/14_FormValidation/.babelrc

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

hooks/14_FormValidation/Readme.md

@@ -0,0 +1,139 @@
+# 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.
+
+# 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';

hooks/14_FormValidation/src/common/notification.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import Button from "@material-ui/core/Button";
+import Snackbar from "@material-ui/core/Snackbar";
+import IconButton from "@material-ui/core/IconButton";
+import CloseIcon from "@material-ui/icons/Close";
+import { withStyles } from "@material-ui/core";
+
+interface Props {
+  classes?: any;
+  message: string;
+  show: boolean;
+  onClose: () => void;
+}
+
+const styles = theme => ({
+  close: {
+    padding: theme.spacing.unit / 2
+  }
+});
+
+const NotificationComponentInner = (props: Props) => {
+  const { classes, message, show, onClose } = props;
+
+  return (
+    <Snackbar
+      anchorOrigin={{
+        vertical: "bottom",
+        horizontal: "left"
+      }}
+      open={show}
+      autoHideDuration={3000}
+      onClose={onClose}
+      ContentProps={{
+        "aria-describedby": "message-id"
+      }}
+      message={<span id="message-id">{message}</span>}
+      action={[
+        <IconButton
+          key="close"
+          aria-label="Close"
+          color="inherit"
+          className={classes.close}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ]}
+    />
+  );
+};
+
+export const NotificationComponent = withStyles(styles)(
+  NotificationComponentInner
+);

hooks/14_FormValidation/src/common/textFieldForm.tsx

@@ -0,0 +1,41 @@
+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>
+    </>
+  );
+};

hooks/14_FormValidation/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div class="well">
+      <div id="root"></div>
+    </div>
+  </body>
+</html>

hooks/14_FormValidation/src/index.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { App } from "./app";
+
+ReactDOM.render(<App />, document.getElementById("root"));