Feature/16 validation review

16 Validation/readme.md

@@ -1,10 +1,10 @@
-# 15 Login form Validation
+## 15 Login form Validation
 
 Let's add validation support to this form.
 
 For this we will use lc-form-validation library
 
-Summary steps:
+## Summary steps:
 
 - Install lc-form-validation library.
 - Refactor input component to a common component and include error validation info.
@@ -39,6 +39,7 @@ _./common/forms/textFieldForm.tsx_
 ```tsx
 import * as React from "react";
 import TextField from "@material-ui/core/TextField";
+import Typography from "@material-ui/core/Typography";
 
 interface Props {
   name: string;
@@ -58,7 +59,7 @@ const onTextFieldChange = (fieldId : string, onChange: (fieldId, value) => void)
 }
 
 export const TextFieldForm : React.StatelessComponent<Props> = (props) => {
-  const {name, label, onChange, value, error, type} = props;
+  const { name, label, onChange, value, error, type } = props;
   return (
     <>
         <TextField
@@ -77,7 +78,6 @@ export const TextFieldForm : React.StatelessComponent<Props> = (props) => {
     </>
   )
 }
-
 ```
 
 
@@ -130,7 +130,7 @@ _./src/pages/login/loginPage.tsx_
 
 ```diff
 import { isValidLogin } from '../../api/login';
-+ import {LoginFormErrors} from './viewmodel';
++ import { LoginFormErrors } from './viewmodel';
 
 interface State {
   loginInfo: LoginEntity;
@@ -146,11 +146,11 @@ _./src/pages/login/loginPage.tsx_
 // Adding imports
 ```diff
 import { isValidLogin } from '../../api/login';
-+ import {LoginFormErrors, createDefaultLoginFormErrors} from './viewmodel';
++ import { LoginFormErrors, createDefaultLoginFormErrors } from './viewmodel';
 + import { loginFormValidation } from './loginValidations';
 ```
 
-_./src/pages/login/loginPageContainer.tsx_
+_./src/pages/login/loginPage.tsx_
 
 ```diff
   constructor(props) {
@@ -183,7 +183,7 @@ _./src/pages/login/loginPageContainer.tsx_
 
 - We need to pass down dataFormErrors
 
-_./src/loginPageContainer.tsx_
+_./src/loginPage.tsx_
 
 ```diff
   public render() {
@@ -204,12 +204,12 @@ _./src/loginForm.tsx_
 
 ```diff
 import { LoginEntity } from "../../model/login";
-+ import {LoginFormErrors} from './viewmodel';
++ import { LoginFormErrors } from './viewmodel';
 
 interface Props {
   loginInfo: LoginEntity;
-  updateField: (string, any) => void;
-  doLogin: () => void;
+  onUpdateField: (string, any) => void;
+  onLogin: () => void;
 +  loginFormErrors : LoginFormErrors;
 }
 ```
@@ -221,7 +221,7 @@ _./src/common/pages/loginForm.tsx_
 
 ```diff
 import { LoginEntity } from "../../model/login";
-import {LoginFormErrors} from './viewmodel';
+import { LoginFormErrors } from './viewmodel';
 + import { TextFieldForm } from '../../common/forms/textFieldForm';
 ```
 
@@ -282,8 +282,7 @@ export const LoginForm = (props: Props) => {
 npm start
 ```
 
-- And let's add an alert (Excercise and a notification) when the user clicks and
-the form all the fields are valid.
+- And let's add an alert (Excercise and a notification) when the user clicks and the form all the fields are valid.
 
 _./src/pages/login/loginPageContainer.tsx_