Add error message if loading fails

frontend/src/App.scss

@@ -40,6 +40,11 @@
   color: #88c9db;
 }
 
+
+.error-message {
+  color: red;
+}
+
 footer {
   padding: 2rem;
 }

frontend/src/App.tsx

@@ -27,7 +27,10 @@ export default class App extends React.Component {
   componentDidMount() {
     this.setState({isLoaded: false})
     this.mockService.getStats()
-      .then(data => this.setState({mock: data}));
+      .then(data => this.setState({
+        data: data,
+        mock: data
+      }));
     this.apiService.getStats()
       .then(data => this.setState({
         isLoaded: true,
@@ -86,13 +89,14 @@ export default class App extends React.Component {
     return (
       <div className="App">
         <p className="title">Humenius' TeamSpeak 3-Ranking</p>
+        { this.state.error != null ? <p className="error-message">Data could not be loaded. Please try again later!</p> : null}
         <table>
           <thead>
-            <tr>
+          <tr>
-              <th>Placement</th>
+            <th>Placement</th>
-              <th>Name</th>
+            <th>Name</th>
-              <th>Online time</th>
+            <th>Online time</th>
-            </tr>
+          </tr>
           </thead>
           <tbody className={this.state.error != null ? "blurred" : undefined}>
             {this.renderTableData()}

frontend/src/services/UserStatsService.ts

@@ -13,6 +13,14 @@ export default class UserStatsService {
   async getStats(): Promise<TableEntry[]> {
     return fetch(this.apiURL, this.requestInit)
       .then(res => { console.log(res); return res; })
-      .then(res => res.json())
+      .then(res => this.checkResponse(res))
+      .then(data => data.json())
+  }
+
+  private checkResponse(response: any): any {
+    if (!response.ok) {
+      throw Error(response.statusText);
+    }
+    return response;
   }
 }