diff --git a/src/App.js b/src/App.js
index dd7aeb4..bac7e24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,13 @@
import './App.css';
-import {ServiceTile} from "./components/ServiceTile";
+import {ServiceTileCollection} from "./components/ServiceTileCollection";
-const services = [
- 'git.aaronic.cc',
- 'jellyfin.aaronic.cc',
- 'portainer.aaronic.cc',
- 'dnd.aaronic.cc'
-]
-
-const API_URL = 'https://status.aaronic.cc';
+const API_URL = 'http://homelab01:9000';
function App() {
return (
{service}
@@ -51,5 +39,6 @@ ServiceTile.propTypes = {
service: PropTypes.string,
statusCode: PropTypes.number,
checkedAt: PropTypes.string,
- apiURL: PropTypes.string
+ apiURL: PropTypes.string,
+ isUp: PropTypes.bool
}
\ No newline at end of file
diff --git a/src/components/ServiceTileCollection.jsx b/src/components/ServiceTileCollection.jsx
new file mode 100644
index 0000000..3fccab4
--- /dev/null
+++ b/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
Loading...
;
+ if (this.state.error) return
{this.state.error}
;
+
+ return (
+
+ {this.state.statuses.map(service => (
+
+ ))}
+
+ )
+ }
+}
+
+ServiceTileCollection.propTypes = {
+ apiURL: PropTypes.string
+}
\ No newline at end of file