Connect frontend to backend

frontend/src/App.tsx

@@ -1,26 +1,67 @@
 import React from 'react';
 import './App.scss';
-import Mock from "./mock/Mock";
+import UserStatsMockService from "./mock/UserStatsMockService";
 import TableEntry from "./models/TableEntry";
-import {SinusBot} from "@support-pp/sinusbot-ts";
-import SinusBotService from "./services/SinusBotService";
+import UserStatsService from "./services/UserStatsService";
+import {findDOMNode} from "react-dom";
+
+interface State {
+  error?: any,
+  isLoaded: boolean,
+  users?: TableEntry[]
+}
 
 export default class App extends React.Component {
 
-  //private tableContent: TableEntry[] = Mock.tableContent;
+  private apiService: UserStatsService = new UserStatsService();
 
-  state = {
+  state: State = {
     error: null,
     isLoaded: false,
-    users: [],
+    users: undefined
   }
 
   componentDidMount() {
+    this.setState({isLoaded: false})
+    this.apiService.getStats()
+      .then(data => this.setState({
+        isLoaded: true,
+        users: data
+      }))
+      .catch(error => this.setState({
+        isLoaded: true,
+        error: error
+      }));
+  }
 
+  componentDidUpdate() {
+    const element = findDOMNode(this);
+    if (element != null) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  renderTableData() {
+    const { error, isLoaded, users } = this.state;
+    if (users != null && isLoaded) {
+      return users.map((entry, index) => {
+        const placement = index + 1;
+        const placementClassName = placement === 1 ? "first-place"
+          : (placement === 2 ? "second-place"
+            : (placement === 3 ? "third-place"
+              : undefined))
+        return (
+          <tr key={index} className={placementClassName}>
+            <td>{placement}</td>
+            <td>{entry.name}</td>
+            <td>{entry.onlineTime}</td>
+          </tr>
+        )
+      });
+    }
   }
 
   render() {
-    const { error, isLoaded, users } = this.state;
     return (
       <div className="App">
         <p className="title">Humenius' TeamSpeak 3-Ranking</p>
@@ -33,33 +74,15 @@ export default class App extends React.Component {
             </tr>
           </thead>
           <tbody>
-            {
-              users.map((tableEntry: TableEntry, i) => {
-                let className;
-                switch (i+1) {
-                  case 1: className = "first-place"; break;
-                  case 2: className = "second-place"; break;
-                  case 3: className = "third-place"; break;
-                  default: className = ""; break;
-                }
-
-                return (
-                  <tr key={i} className={className}>
-                    <td>{i+1}</td>
-                    <td>{tableEntry.name}</td>
-                    <td>{tableEntry.onlineTime}</td>
-                  </tr>
-                );
-              })
-            }
+            {this.renderTableData()}
           </tbody>
         </table>
         <footer>
           Made by <a href="https://humenius.me"
-                     >Humenius</a>.
+        >Humenius</a>.
           Powered by <a href="https://reactjs.org/"
-                      >React</a>.
-          <br />
+        >React</a>.
+          <br/>
           <a href="ts3server://ts.humenius.me">
             Click here to join my TeamSpeak server
           </a>