Re-implement Node API example in React app

mars · Dec 16, 2018 · 65fd0a3 · 65fd0a3
1 parent d261bdf
commit 65fd0a3
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 22 deletions.
diff --git a/react-ui/package.json b/react-ui/package.json
@@ -21,5 +21,6 @@
     "not dead",
     "not ie <= 11",
     "not op_mini all"
-  ]
+  ],
+  "proxy": "http://localhost:5000"
 }
diff --git a/react-ui/src/App.js b/react-ui/src/App.js
@@ -3,39 +3,67 @@ import logo from './logo.svg';
 import './App.css';
 
 class App extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: null,
+      fetching: true
+    };
+  }
+
+  componentDidMount() {
+    fetch('/api')
+      .then(response => {
+        if (!response.ok) {
+          throw new Error(`status ${response.status}`);
+        }
+        return response.json();
+      })
+      .then(json => {
+        this.setState({
+          message: json.message,
+          fetching: false
+        });
+      }).catch(e => {
+        this.setState({
+          message: `API call failed: ${e}`,
+          fetching: false
+        });
+      })
+  }
+
   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
-                <br/>
-                <br/>
-                <a
-                  className="App-link"
-                  href="https://github.com/mars/heroku-cra-node"
-                >
-                  React + Node deployment on Heroku
-                </a>
+                This is a production build from create-react-app.
               </p>
-
             : <p>
                 Edit <code>src/App.js</code> and save to reload.
-                <br/>
-                <br/>
-                <a
-                  className="App-link"
-                  href="https://reactjs.org"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  Learn React
-                </a>
               </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>
     );

diff --git a/react-ui/src/index.css b/react-ui/src/index.css
@@ -12,3 +12,7 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+p + p {
+  margin-top: 0;
+}