Integration w/Go API

src/App.js

@@ -1,24 +1,13 @@
 import './App.css';
-import {ServiceTile} from "./components/ServiceTile";
+import {ServiceTileCollection} from "./components/ServiceTileCollection";
 
-const services = [
+const API_URL = 'http://homelab01:9000';
-    'git.aaronic.cc',
-    'jellyfin.aaronic.cc',
-    'portainer.aaronic.cc',
-    'dnd.aaronic.cc'
-]
-
-const API_URL = 'https://status.aaronic.cc';
 
 function App() {
   return (
     <div className="App">
         <h1 className={"Title"}>Health Check</h1>
-        <div className={"ServiceTileCollection"}>
+        <ServiceTileCollection apiURL={API_URL}/>
-            {services.map(service => (
-                <ServiceTile service={service} apiURL={API_URL}/>
-            ))}
-        </div>
     </div>
   );
 }

src/components/ServiceTile.jsx

@@ -3,13 +3,6 @@ import {PropTypes} from "prop-types";
 
 export class ServiceTile extends Component {
 
-    constructor(props) {
-        super(props);
-        this.state = {
-            isUp: false
-        };
-    }
-
     // componentDidMount() {
     //     this.interval = setInterval(this.fetchStatus, 10000);
     // }
@@ -25,13 +18,8 @@ export class ServiceTile extends Component {
             });
     }
 
-    setIsUp(isUp) {
-        this.setState({isUp});
-    }
-
     render() {
-        const {isUp} = this.state;
+        const {isUp,service, statusCode, checkedAt} = this.props;
-        const {service, statusCode, checkedAt} = this.props;
         return (
             <div className={`ServiceTile ${isUp ? "up" : "down"}`}>
                 <h3>{service}</h3>
@@ -51,5 +39,6 @@ ServiceTile.propTypes = {
     service: PropTypes.string,
     statusCode: PropTypes.number,
     checkedAt: PropTypes.string,
-    apiURL: PropTypes.string
+    apiURL: PropTypes.string,
+    isUp: PropTypes.bool
 }

src/components/ServiceTileCollection.jsx

@@ -0,0 +1,52 @@
+import {ServiceTile} from "./ServiceTile";
+import {Component} from "react";
+import {PropTypes} from "prop-types";
+
+export class ServiceTileCollection extends Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            statuses: [],
+            loading: true,
+            error: null
+        };
+    }
+
+    fetchStatuses() {
+        fetch(this.props.apiURL + "/status")
+            .then(response => response.json())
+            .then(statuses => {
+                this.setState({statuses, loading: false});
+            })
+            .catch(error => {
+                this.setState({error});
+            });
+    }
+
+    componentDidMount() {
+        this.fetchStatuses();
+    }
+
+    render() {
+        if (this.state.loading) return <p>Loading...</p>;
+        if (this.state.error) return <p>{this.state.error}</p>;
+
+        return (
+            <div className={"ServiceTileCollection"}>
+                {this.state.statuses.map(service => (
+                    <ServiceTile service={service.url}
+                                 apiURL={this.props.apiURL}
+                                 statusCode={service.statusCode}
+                                 checkedAt={service.checkedAt}
+                                 isUp={service.isUp}
+                    />
+                ))}
+            </div>
+        )
+    }
+}
+
+ServiceTileCollection.propTypes = {
+    apiURL: PropTypes.string
+}