ref:#187 15 adding context form validation

Author: lokeeto

hooks/15_Context/package.json

@@ -39,9 +39,11 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "@lemoncode/fonk": "^1.3.0",
+    "@lemoncode/fonk-formik": "^4.0.1",
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
-    "lc-form-validation": "^2.0.0",
+    "formik": "^2.1.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.2.0"

hooks/15_Context/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/15_Context/src/app.tsx

@@ -1,6 +1,6 @@
 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";
 import { SessionProvider } from "./common";
 
@@ -10,7 +10,7 @@ export const App = () => {
       <SessionProvider>
         <HashRouter>
           <Switch>
-            <Route exact={true} path="/" component={LoginPage} />
+            <Route exact={true} path="/" component={LoginContainer} />
             <Route path="/pageB" component={PageB} />
           </Switch>
         </HashRouter>

hooks/15_Context/src/common/index.ts

@@ -1,3 +1,3 @@
 export * from "./notification";
-export * from "./textFieldForm";
+export * from "./textField.component";
 export * from "./sessionContext";

hooks/15_Context/src/common/notification.tsx

@@ -26,8 +26,8 @@ export const NotificationComponent: React.FC<Props> = (props) => {
   return (
     <Snackbar
       anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "left",
+        vertical: "top",
+        horizontal: "right",
       }}
       open={show}
       autoHideDuration={3000}

hooks/15_Context/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/15_Context/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/15_Context/src/pages/login.component.tsx

@@ -0,0 +1,39 @@
+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, SessionContext } from "../common";
+import { light } from "@material-ui/core/styles/createPalette";
+
+interface Props {}
+
+export const LoginContainer: React.FC<Props> = (props) => {
+  const loginContext = React.useContext(SessionContext);
+  const history = useHistory();
+  const [isShowAlert, setShowAlert] = React.useState(false);
+
+  const loginSucceeded = (isValid: boolean, login: LoginEntity) => {
+    if (isValid) {
+      history.push("/pageB");
+      loginContext.updateLogin(login.login);
+    } else {
+      setShowAlert(true);
+    }
+  };
+
+  const handleLogin = (login: LoginEntity) => {
+    isValidLogin(login).then((isValid) => loginSucceeded(isValid, login));
+  };
+
+  return (
+    <>
+      <LoginComponent onLogin={handleLogin} />
+      <NotificationComponent
+        show={isShowAlert}
+        message="Invalid Form"
+        onClose={() => setShowAlert(false)}
+      />
+    </>
+  );
+};

hooks/15_Context/src/pages/login.container.tsx

@@ -0,0 +1,11 @@
+import { ValidationSchema, Validators } from "@lemoncode/fonk";
+import { createFormikValidation } from "@lemoncode/fonk-formik";
+
+const validationSchema: ValidationSchema = {
+  field: {
+    login: [Validators.required],
+    password: [Validators.required],
+  },
+};
+
+export const loginFormValidation = createFormikValidation(validationSchema);