Updated App to correctly populate data from the backend.

Author: Direside

example.yml

@@ -7,9 +7,11 @@ params:
   # Application config
 
   # production host name
-  productionHost: fe-test.commitzero.com
-  productionBucket: fe-test.commitzero.com
+  productionHostRoot: example.com
+  productionFrontendHost: example.com
+  productionBackendHost: api.example.com
 
   # staging host name
-  stagingHost: fe-test.commitzero.com
-  stagingBucket: fe-test.commitzero.com
+  stagingHostRoot: example.com
+  stagingFrontendHost: example.com
+  stagingBackendHost: api.example.com

src/App.js

@@ -1,46 +1,58 @@
 import React, { useEffect, useState } from "react";
-import logo from './commit-logo.png';
-import './App.css';
+import logo from "./commit-logo.png";
+import "./App.css";
 
-import './components/Info'
-import InfoPanel from './components/Info';
+import "./components/Info";
+import InfoPanel from "./components/Info";
 
 // Set config based on the environment variable the build was run under.
-let config = {}
-if (process.env.NODE_ENV === 'production') {
-  config = require('./config/production.json')
-} else if (process.env.NODE_ENV === 'staging') {
-    config = require('./config/staging.json')
+let config = {};
+if (process.env.NODE_ENV === "production") {
+  config = require("./config/production.json");
+} else if (process.env.NODE_ENV === "staging") {
+  config = require("./config/staging.json");
 } else {
-  config = require('./config/development.json')
+  config = require("./config/development.json");
 }
 
 function App() {
   const [data, setData] = useState({
     info: {},
-    status: "Checking...",
-    error: null
+    error: null,
   });
 
+  const [status, setStatus] = useState({
+    code: "Checking...",
+  })
+
   useEffect(() => {
-    fetch(`https://${config.backendURL}/status/about`)
-    .then(result => setData({
-      info: result.data,
-      status: result.status
-    }))
-    .catch(error => setData({
-      info: {},
-      status: "Failed.",
-      error: error.message
-    }))
+    fetch(`${config.backendURL}/status/about`)
+      .then(result => {
+        setStatus({
+          code: result.status,
+        })
+        return result.json()
+      })
+      .then(data => {
+        setData({
+          info: data,
+          error: null
+        })
+      })
+      .catch(error => {
+        setData({
+          info: {},
+          error: error
+        })
+      });
   }, []);
 
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <h1>zero</h1>
-        <InfoPanel data={data} config={config} />
+        <InfoPanel data={data} status={status} config={config} />
       </header>
     </div>
   );

src/components/Info.js

@@ -3,7 +3,7 @@ import React from 'react'
 
 import './Info.css'
 
-const InfoPanel = ({ data, config }) => {
+const InfoPanel = ({ data, status, config }) => {
   return (
     <div className="info">
       <h2>App Info</h2>
@@ -12,8 +12,8 @@ const InfoPanel = ({ data, config }) => {
         <strong>Application Name:</strong> {config.appName}<br />
         <strong>Environment:</strong> {config.environment}<br />
         { data.info !== undefined ? <span><strong>Pod Name:</strong> {data.info.podName}<br /></span> : null}
-        <strong>Status:</strong> {data.status}<br />
-        { data.error !== null ? <span className="error"><strong>Error:</strong> { data.error }</span> : null}
+        <strong>Status:</strong> {status.code}<br />
+        { data.error !== null ? <span className="error"><strong>Error:</strong> { status.error }</span> : null}
       </p>
     </div></div>
   )

src/config/production.json

@@ -1,5 +1,5 @@
 {
     "appName": "<% .Name %>",
     "environment": "production",
-    "backendURL": "<% index .Params `productionHost` %>"
+    "backendURL": "https://<% index .Params `productionHost` %>"
 }

src/config/staging.json

@@ -1,5 +1,5 @@
 {
     "appName": "<% .Name %>",
     "environment": "staging",
-    "backendURL": "<% index .Params `stagingHost` %>"
+    "backendURL": "https://<% index .Params `stagingHost` %>"
 }