#45 hooks implementation

.vscode/launch.json

@@ -1,17 +1,33 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "Jest single run",
-      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
-      "args": [
-        "--verbose",
-        "-i"
-      ],
-      "console": "integratedTerminal",
-      "internalConsoleOptions": "neverOpen"
-    },
-  ]
-}
+
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest single run",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "--verbose",
+        "-i",
+        "--no-cache"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Jest watch run",
+      "program": "${workspaceRoot}/node_modules/jest/bin/jest.js",
+      "args": [
+        "--verbose",
+        "-i",
+        "--no-cache",
+        "--watchAll"
+      ],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen"
+    }
+  ]
+}

examples/00-example-basic/.babelrc

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

examples/00-example-basic/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "webpack-by-example",
+  "version": "1.0.0",
+  "description": "In this sample we are going to setup a web project that can be easily managed\r by webpack.",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open",
+    "build": "rimraf dist && webpack --mode development",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "rimraf": "^2.6.3",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "react-loader-spinner": "^2.3.0",
+    "react-promise-tracker": "file:../../"
+  }
+}

examples/00-example-basic/src/api/fetch.js

@@ -0,0 +1,12 @@
+export const fetchWithDelay = (url) => {
+  const promise = new Promise((resolve, reject) => {
+    setTimeout(() => {
+      resolve(fetch(url, {
+        method: 'GET',
+      })
+        .then((response) => response.json()));
+    }, 3000)
+  });
+
+  return promise;
+}

examples/00-example-basic/src/api/postAPI.js

@@ -0,0 +1,9 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/posts';
+
+const fetchPosts = () => fetchWithDelay(url)
+  .then((posts) => posts.slice(0, 10));
+
+export const postAPI = {
+  fetchPosts,
+};

examples/00-example-basic/src/api/userAPI.js

@@ -0,0 +1,8 @@
+import { fetchWithDelay } from './fetch';
+const url = 'https://jsonplaceholder.typicode.com/users';
+
+const fetchUsers = () => fetchWithDelay(url);
+
+export const userAPI = {
+  fetchUsers,
+};

examples/00-example-basic/src/app.css

@@ -0,0 +1,11 @@
+.tables {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+}
+
+.tables > div {
+  flex-basis: 50%;
+  margin-left: 1rem;
+  margin-right: 1rem;
+}

examples/00-example-basic/src/app.js

@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { trackPromise } from 'react-promise-tracker';
+import { userAPI } from './api/userAPI';
+import { postAPI } from './api/postAPI';
+import { UserTable, PostTable, LoadButton } from './components';
+import './app.css';
+
+export class App extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      users: [],
+      posts: [],
+    };
+
+    this.onLoadTables = this.onLoadTables.bind(this);
+  }
+
+  onLoadTables() {
+    this.setState({
+      users: [],
+      posts: [],
+    });
+
+    trackPromise(
+      userAPI.fetchUsers()
+        .then((users) => {
+          this.setState({
+            users,
+          })
+        })
+    );
+
+    trackPromise(
+      postAPI.fetchPosts()
+        .then((posts) => {
+          this.setState({
+            posts,
+          })
+        })
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        <LoadButton
+          onLoad={this.onLoadTables}
+          title="Load tables with delay"
+        />
+        <div className="tables">
+          <UserTable users={this.state.users} />
+          <PostTable posts={this.state.posts} />
+        </div>
+      </div>
+    );
+  }
+}

examples/00-example-basic/src/common/components/spinner/index.js

@@ -0,0 +1 @@
+export * from './spinner';

examples/00-example-basic/src/common/components/spinner/spinner.css

@@ -0,0 +1,10 @@
+.spinner {
+  width: 100%;
+  height: 100%;
+}
+
+.spinner > div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

examples/00-example-basic/src/common/components/spinner/spinner.js

@@ -0,0 +1,30 @@
+import React from "react";
+import { usePromiseTracker } from "react-promise-tracker";
+import Loader from "react-loader-spinner";
+import "./spinner.css";
+
+export const Spinner = (props) => {
+  const { promiseInProgress } = usePromiseTracker();
+
+  return (
+    promiseInProgress && (
+      <div className="spinner">
+        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
+      </div>
+    )
+  );
+};
+
+/*
+export const Spinner = () => {
+  const { promiseInProgress } = usePromiseTracker();
+
+  return (
+    <>
+      promiseInProgress &&
+      <div className="spinner">
+        <Loader type="ThreeDots" color="#2BAD60" height="100" width="100" />
+      </div>
+    </>
+  );
+};*/

examples/00-example-basic/src/common/components/table/index.js

@@ -0,0 +1 @@
+export * from './table'

examples/00-example-basic/src/common/components/table/table.css

@@ -0,0 +1,27 @@
+.title {
+  color: #000;
+}
+
+.table {
+  width: 100%;
+  max-width: 100%;
+  margin-bottom: 1rem;
+  background-color: transparent;
+  border-collapse: collapse;
+}
+
+.table thead th {
+  vertical-align: bottom;
+  border-bottom: 2px solid #248f4f;
+}
+
+.table td, .table th {
+  text-align: inherit;
+  padding: .75rem;
+  vertical-align: top;
+  border-top: 1px solid #248f4f;
+}
+
+.table tbody tr:nth-of-type(odd) {
+  background-color: rgba(43, 173, 96, .05);
+}

examples/00-example-basic/src/common/components/table/table.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import './table.css';
+
+export const Table = (props) => (
+  <div>
+    <h2 className="title">{props.title}</h2>
+    <table className="table">
+      <thead>
+        {props.headerRender()}
+      </thead>
+      <tbody>
+        {props.items.map(props.rowRender)}
+      </tbody>
+    </table>
+  </div>
+);

examples/00-example-basic/src/components/index.js

@@ -0,0 +1,3 @@
+export * from './userTable';
+export * from './postTable';
+export * from './loadButton';

examples/00-example-basic/src/components/loadButton/index.js

@@ -0,0 +1 @@
+export * from './loadButton';

examples/00-example-basic/src/components/loadButton/loadButton.css

@@ -0,0 +1,26 @@
+.load-button {
+  cursor: pointer;
+  margin: 1rem;
+  color: #fff;
+  text-shadow: 1px 1px 0 #888;
+  background-color: #2BAD60;
+  border-color: #14522d;
+  display: inline-block;
+  font-weight: 400;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  border: 1px solid transparent;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  line-height: 1.5;
+  border-radius: .25rem;
+  outline: none;
+}
+
+
+
+.load-button:hover {
+  background-color: #248f4f;
+  border-color: #1e7b43;
+}

examples/00-example-basic/src/components/loadButton/loadButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import './loadButton.css';
+
+export const LoadButton = (props) => (
+  <button
+    className="load-button"
+    onClick={props.onLoad}
+  >
+    {props.title}
+  </button>
+);

examples/00-example-basic/src/components/postTable/header.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Header = (props) => (
+  <tr>
+    <th>Id</th>
+    <th>Title</th>
+    <th>Body</th>
+  </tr>
+);

examples/00-example-basic/src/components/postTable/index.js

@@ -0,0 +1 @@
+export * from './table';

examples/00-example-basic/src/components/postTable/row.js

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Row = (post) => (
+  <tr key={post.id}>
+    <td>
+      <span>{post.id}</span>
+    </td>
+    <td>
+      <span>{post.title}</span>
+    </td>
+    <td>
+      <span>{post.body}</span>
+    </td>
+  </tr>
+);

examples/00-example-basic/src/components/postTable/table.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { Table } from '../../common/components/table';
+import { Header } from './header';
+import { Row } from './row';
+
+export const PostTable = (props) => (
+  <Table
+    title="Posts"
+    items={props.posts}
+    headerRender={Header}
+    rowRender={Row}
+  />
+);