Merge pull request #47 from Lemoncode/#45-hooks-implementation

#45 hooks implementation

Author: brauliodiez

.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;
+}