Switch to React functional component w/ hooks

2019-04-01 16:20:09 -07:00
parent d0478f2723
commit b65b1b2a2a
3 changed files with 68 additions and 72 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "heroku-cra-node",
-  "version": "1.0.0",
+  "version": "3.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -15,7 +15,7 @@
    },
    "array-flatten": {
      "version": "1.1.1",
-      "resolved": "http://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
      "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI="
    },
    "body-parser": {
@@ -190,7 +190,7 @@
    },
    "media-typer": {
      "version": "0.3.0",
-      "resolved": "http://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g="
    },
    "merge-descriptors": {
--- a/react-ui/package-lock.json
+++ b/react-ui/package-lock.json
@@ -1711,7 +1711,7 @@
        },
        "util": {
          "version": "0.10.3",
-          "resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
+          "resolved": "http://registry.npmjs.org/util/-/util-0.10.3.tgz",
          "integrity": "sha1-evsa/lCAUkZInj23/g7TeTNqwPk=",
          "requires": {
            "inherits": "2.0.1"
@@ -1857,7 +1857,7 @@
        },
        "supports-color": {
          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "resolved": "http://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
        }
      }
@@ -4020,12 +4020,12 @@
        },
        "regjsgen": {
          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
+          "resolved": "http://registry.npmjs.org/regjsgen/-/regjsgen-0.2.0.tgz",
          "integrity": "sha1-bAFq3qxVT3WCP+N6wFuS1aTtsfc="
        },
        "regjsparser": {
          "version": "0.1.5",
-          "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
+          "resolved": "http://registry.npmjs.org/regjsparser/-/regjsparser-0.1.5.tgz",
          "integrity": "sha1-fuj4Tcb6eS0/0K4ijSS9lJ6tIFw=",
          "requires": {
            "jsesc": "~0.5.0"
@@ -4428,7 +4428,7 @@
          "dependencies": {
            "pify": {
              "version": "2.3.0",
-              "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+              "resolved": "http://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
              "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw="
            }
          }
@@ -9386,7 +9386,7 @@
    },
    "minimist": {
      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+      "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
      "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
    },
    "mississippi": {
@@ -9451,7 +9451,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
        }
      }
@@ -9873,7 +9873,7 @@
      "dependencies": {
        "minimist": {
          "version": "0.0.10",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+          "resolved": "http://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
          "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
        },
        "wordwrap": {
@@ -13648,7 +13648,7 @@
    },
    "rgba-regex": {
      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM="
    },
    "rimraf": {
@@ -13704,7 +13704,7 @@
    },
    "safe-regex": {
      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
      "requires": {
        "ret": "~0.1.10"
@@ -14220,7 +14220,7 @@
    },
    "sha.js": {
      "version": "2.4.11",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
+      "resolved": "http://registry.npmjs.org/sha.js/-/sha.js-2.4.11.tgz",
      "integrity": "sha512-QMEp5B7cftE7APOjk5Y6xgrbWu+WkLVQwk8JNjZ8nKRciZaByEW6MubieAiToS7+dwvrjGhH8jRXz3MVd0AYqQ==",
      "requires": {
        "inherits": "^2.0.1",
@@ -15148,7 +15148,7 @@
    },
    "topo": {
      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
+      "resolved": "http://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
      "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
      "requires": {
        "hoek": "4.x.x"
@@ -16488,7 +16488,7 @@
    },
    "yargs": {
      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
+      "resolved": "http://registry.npmjs.org/yargs/-/yargs-11.1.0.tgz",
      "integrity": "sha512-NwW69J42EsCSanF8kyn5upxvjp5ds+t3+udGBeTbFnERA+lF541DDpMawzo4z6W/QrzNM18D+BPMiOBibnFV5A==",
      "requires": {
        "cliui": "^4.0.0",
--- a/react-ui/src/App.js
+++ b/react-ui/src/App.js
@@ -1,18 +1,14 @@
-import React, { Component } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import logo from './logo.svg';
 import './App.css';

-class App extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      message: null,
-      fetching: true
-    };
-  }
+function App() {
+  const [message, setMessage] = useState(null);
+  const [isFetching, setIsFetching] = useState(false);
+  const [url, setUrl] = useState('/api');

-  componentDidMount() {
-    fetch('/api')
+  const fetchData = useCallback(() => {
+    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error(`status ${response.status}`);
@@ -20,54 +16,54 @@ class App extends Component {
        return response.json();
      })
      .then(json => {
-        this.setState({
-          message: json.message,
-          fetching: false
-        });
+        setMessage(json.message);
+        setIsFetching(false);
      }).catch(e => {
-        this.setState({
-          message: `API call failed: ${e}`,
-          fetching: false
-        });
+        setMessage(`API call failed: ${e}`);
+        setIsFetching(false);
      })
-  }
+  }, [url]);
+
+  useEffect(() => {
+    setIsFetching(true);
+    fetchData();
+  }, [fetchData]);
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        { process.env.NODE_ENV === 'production' ?
+            <p>
+              This is a production build from create-react-app.
+            </p>
+          : <p>
+              Edit <code>src/App.js</code> and save to reload.
+            </p>
+        }
+        <p>{'« '}<strong>
+          {isFetching
+            ? 'Fetching message from API'
+            : message}
+        </strong>{' »'}</p>
+        <p><a
+          className="App-link"
+          href="https://github.com/mars/heroku-cra-node"
+        >
+          React + Node deployment on Heroku
+        </a></p>
+        <p><a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a></p>
+      </header>
+    </div>
+  );

-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          { process.env.NODE_ENV === 'production' ?
-              <p>
-                This is a production build from create-react-app.
-              </p>
-            : <p>
-                Edit <code>src/App.js</code> and save to reload.
-              </p>
-          }
-          <p>{'« '}<strong>
-            {this.state.fetching
-              ? 'Fetching message from API'
-              : this.state.message}
-          </strong>{' »'}</p>
-          <p><a
-            className="App-link"
-            href="https://github.com/mars/heroku-cra-node"
-          >
-            React + Node deployment on Heroku
-          </a></p>
-          <p><a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a></p>
-        </header>
-      </div>
-    );
-  }
 }

 export default App;