15 context ported

Author: brauliodiez

hooks/15_Context/.babelrc

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

hooks/15_Context/Readme.md

@@ -0,0 +1,176 @@
+# 15 Context
+
+In this sample we are going to learn how React 16 context api works.
+
+This will allow us to share information between components without having to go through props drilldown or having to add redux support to our project.
+
+We will take a startup point sample 15 Context:
+
+## Steps
+
+- We want to store just the _login_ field once the user logs in and display it in the page B (or in wathever page or component we need it), let's add a default value ('no user').
+
+- Let's start by creating a context, we will call it _sessionContext_, and add the proper typing
+
+_./src/common/sessionContext.tsx_
+
+```javascript
+import * as React from "react";
+
+export interface SessionContextProps {
+  login: string;
+  updateLogin: value => void;
+}
+
+export const createDefaultUser = (): SessionContextProps => ({
+  login: "no user",
+  updateLogin: value => {
+    console.warn(
+      "if you are reading this, likely you forgot to add the provider on top of your app"
+    );
+  }
+});
+
+export const SessionContext =
+  React.createContext < SessionContextProps > createDefaultUser();
+```
+
+- This session context will expose a _provider_ (it will serve us to set the login name in the context), and a _consumer_ (that will let us consume the login name from the context at any point of the application).
+  We will create a component (we will name it _SessionProvider_) that on one hand will store in the state the login name and bind it to the _SessionContext_ and on the other hand it will act as a wrapper (usually it will sit on top of the application and wrap the application).
+
+_./src/common/sessionContext.tsx_
+
+Append this to the bottom of the file.
+
+```typescript
+export const SessionProvider: React.StatelessComponent = props => {
+  const [login, setLogin] = React.useState<string>("");
+
+  return (
+    <SessionContext.Provider value={{ login, updateLogin: setLogin }}>
+      {props.children}
+    </SessionContext.Provider>
+  );
+};
+```
+
+- Let's import the _SessionProvider_ in the barrel _index_.
+
+_./src/common/index.ts_
+
+```diff
+export * from "./notification";
+export * from "./textFieldForm";
++ export * from "./sessionContext";
+```
+
+- Let's setup the _sessionProvider_ at the top of our application.
+
+_./src/app.tsx_
+
+```diff
+import * as React from "react";
+import { HashRouter, Switch, Route } from "react-router-dom";
+import { LoginPage } from "./pages/loginPage";
+import { PageB } from "./pages/pageB";
++ import { SessionProvider } from "./common";
+
+export const App = () => {
+  return (
+    <>
++      <SessionProvider>
+        <HashRouter>
+          <Switch>
+            <Route exact={true} path="/" component={LoginPage} />
+            <Route path="/pageB" component={PageB} />
+          </Switch>
+        </HashRouter>
++      </SessionProvider>
+    </>
+  );
+};
+
+```
+
+- Let's access the context in PageB using the _useContext_.
+
+_./src/pages/pageB.tsx_
+
+```diff
+import * as React from "react";
+import { Link } from "react-router-dom";
++ import { SessionContext } from '../common';
+
+- export const PageB = () => (
++ export const PageB = () => {
++
++ const loginContext = React.useContext(SessionContext);
++
++ return (
+  <div>
+    <h2>Hello from page B</h2>
++   <h3>User logged in: {loginContext.login}</h3>
+    <br />
+    <Link to="/">Navigate to Login</Link>
+  </div>
++ )
++}
+```
+
+- Let's update the loginPage.
+
+_./src/pages/loginPage.tsx_
+
+```diff
++ import { TextFieldForm } from "../common";
+import { TextFieldForm, SessionContext } from "../common";
+
+```
+
+_./src/pages/loginPage.tsx_
+
+```diff
+const LoginPageInner = (props: Props) => {
++   const loginContext = React.useContext(SessionContext);
+
+  const [loginInfo, setLoginInfo] = React.useState<LoginEntity>(
+    createEmptyLogin()
+  );
+  const [loginFormErrors, setLoginFormErrors] = React.useState<LoginFormErrors>(
+    createDefaultLoginFormErrors()
+  );
+  const [showLoginFailedMsg, setShowLoginFailedMsg] = React.useState(false);
+  const { classes } = props;
+
+  const onLogin = () => {
+    loginFormValidation.validateForm(loginInfo).then(formValidationResult => {
+      if (formValidationResult.succeeded) {
+        if (isValidLogin(loginInfo)) {
+          props.history.push("/pageB");
++         loginContext.updateLogin(loginInfo.login);
+        } else {
+          setShowLoginFailedMsg(true);
+        }
+      } else {
+        alert("error, review the fields");
+        const updatedLoginFormErrors = {
+          ...loginFormErrors,
+          ...formValidationResult.fieldErrors
+        };
+        setLoginFormErrors(updatedLoginFormErrors);
+      }
+    });
+  };
+```
+
+- Let's give a try.
+
+# 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/15_Context/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/15_Context/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/15_Context/src/app.tsx

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

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

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

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

@@ -0,0 +1,29 @@
+import * as React from "react";
+
+export interface SessionContextProps {
+  login: string;
+  updateLogin: (value) => void;
+}
+
+export const createDefaultUser = (): SessionContextProps => ({
+  login: "no user",
+  updateLogin: value => {
+    console.warn(
+      "if you are reading this, likely you forgot to add the provider on top of your app"
+    );
+  }
+});
+
+export const SessionContext = React.createContext<SessionContextProps>(
+  createDefaultUser()
+);
+
+export const SessionProvider: React.StatelessComponent = props => {
+  const [login, setLogin] = React.useState<string>("");
+
+  return (
+    <SessionContext.Provider value={{ login, updateLogin: setLogin }}>
+      {props.children}
+    </SessionContext.Provider>
+  );
+};

hooks/15_Context/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>
+    </>
+  );
+};