ref:#187 14_FormValidation refactor

Author: lokeeto

hooks/14_FormValidation/Readme.md

@@ -2,7 +2,7 @@
 
 Let's add validation support to this form.
 
-For this we will use lc-form-validation library
+For this we will use formik, fonk and fonk-formik library
 
 Summary steps:
 
@@ -101,24 +101,6 @@ const validationSchema: ValidationSchema = {
 export const loginFormValidation = createFormikValidation(validationSchema);
 ```
 
-- Let's create now a class to hold the dataFormErrors.
-
-_./src/pages/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.
@@ -128,7 +110,6 @@ _./src/pages/loginPage.tsx_
 ```diff
 import { isValidLogin } from "../api/login";
 import { NotificationComponent } from "../common";
-+ import {LoginFormErrors, createDefaultLoginFormErrors} from './loginPage.viewmodel';
 ```
 
 _./src/pages/loginPage.tsx_

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

@@ -1,5 +1,10 @@
-import {LoginEntity} from '../model/login';
+import { LoginEntity } from "../model/login";
 
 // Just a fake loginAPI
-export const isValidLogin = (loginInfo : LoginEntity) : boolean =>
-  (loginInfo.login === 'admin' && loginInfo.password === 'test');
+export const isValidLogin = (loginInfo: LoginEntity): Promise<boolean> =>
+  new Promise((resolve) => {
+    setTimeout(() => {
+      // mock call
+      resolve(loginInfo.login === "admin" && loginInfo.password === "test");
+    }, 500);
+  });

hooks/14_FormValidation/src/app.tsx

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

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

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

hooks/14_FormValidation/src/common/textField.component.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useField } from "formik";
+import MuiTextField, { TextFieldProps } from "@material-ui/core/TextField";
+
+export const TextFieldComponent: React.FC<TextFieldProps> = (props) => {
+  const [field, meta] = useField(props.name);
+  const textFieldProps = Boolean(field) ? field : props;
+  const hasError = Boolean(meta && meta.touched && meta.error);
+
+  return (
+    <>
+      <MuiTextField
+        {...props}
+        name={textFieldProps.name}
+        onChange={textFieldProps.onChange}
+        onBlur={textFieldProps.onBlur}
+        value={textFieldProps.value}
+        error={hasError}
+        helperText={hasError ? meta.error : ""}
+        fullWidth={true}
+        margin="normal"
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { LoginEntity, createEmptyLogin } from "../model/login";
+import { TextFieldComponent } from "../common";
+import { Form } from "formik";
+import createStyles from "@material-ui/styles/createStyles";
+import makeStyles from "@material-ui/styles/makeStyles";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardHeader from "@material-ui/core/CardHeader";
+import CardContent from "@material-ui/core/CardContent";
+import { loginFormValidation } from "./login.validation";
+import { Formik } from "formik";
+
+interface PropsForm {
+  onLogin: (login: LoginEntity) => void;
+}
+
+// https://material-ui.com/styles/api/#makestyles-styles-options-hook
+const useFormStyles = makeStyles((theme) =>
+  createStyles({
+    formContainer: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+    },
+    card: {
+      maxWidth: 400,
+      margin: "0 auto",
+    },
+  })
+);
+
+export const LoginComponent: React.FC<PropsForm> = (props) => {
+  const classes = useFormStyles();
+  const { onLogin } = props;
+
+  return (
+    <Card className={classes.card}>
+      <CardHeader title="Login" />
+      <CardContent>
+        <Formik
+          onSubmit={onLogin}
+          initialValues={createEmptyLogin()}
+          validate={loginFormValidation.validateForm}
+        >
+          {() => (
+            <Form>
+              <div className={classes.formContainer}>
+                <TextFieldComponent label="Name" name="login" />
+                <TextFieldComponent
+                  label="Password"
+                  type="password"
+                  name="password"
+                />
+                <Button type="submit" variant="contained" color="primary">
+                  Login
+                </Button>
+              </div>
+            </Form>
+          )}
+        </Formik>
+      </CardContent>
+    </Card>
+  );
+};

hooks/14_FormValidation/src/pages/login.component.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { useHistory } from "react-router-dom";
+import { LoginEntity } from "../model/login";
+import { isValidLogin } from "../api/login";
+import { LoginComponent } from "./login.component";
+import { NotificationComponent } from "../common";
+
+interface Props {}
+
+export const LoginContainer: React.FC<Props> = (props) => {
+  const history = useHistory();
+  const [isShowAlert, setShowAlert] = React.useState(false);
+
+  const loginSucceeded = (isValid: boolean) => {
+    if (isValid) {
+      history.push("/pageB");
+    } else {
+      setShowAlert(true);
+    }
+  };
+
+  const handleLogin = (login: LoginEntity) => {
+    isValidLogin(login).then(loginSucceeded);
+  };
+
+  return (
+    <>
+      <LoginComponent onLogin={handleLogin} />
+      <NotificationComponent
+        show={isShowAlert}
+        message="Invalid Form"
+        onClose={() => setShowAlert(false)}
+      />
+      ;
+    </>
+  );
+};