Connect frontend to backend

frontend/package.json

@@ -2,6 +2,7 @@
   "name": "ts-onlinetime-ranks",
   "version": "0.1.0",
   "private": true,
+  "proxy": "http://localhost:3500",
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",

frontend/src/App.scss

@@ -5,7 +5,6 @@
   justify-content: center;
   align-items: center;
   text-align: center;
-  height: 100vh;
   color: whitesmoke;
   background-color: #282c34;
 }

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>

frontend/src/mock/Mock.ts

@@ -1,14 +0,0 @@
-import TableEntry from "../models/TableEntry";
-
-class Mock {
-    public static tableContent: TableEntry[] = [
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" },
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" },
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" },
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" },
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" },
-        { name: "Humen", onlineTime: "0d 1h 0m 0m" }
-    ];
-}
-
-export default Mock;

frontend/src/mock/UserStatsMockService.ts

@@ -0,0 +1,22 @@
+import TableEntry from "../models/TableEntry";
+import UserStatsService from "../services/UserStatsService";
+
+export default class UserStatsMockService extends UserStatsService {
+    private readonly entries: TableEntry[];
+
+    constructor() {
+        super();
+        this.entries = [
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" },
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" },
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" },
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" },
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" },
+            { name: "Humen", onlineTime: "0d 1h 0m 0s" }
+        ];
+    }
+
+    async getStats(): Promise<TableEntry[]> {
+        return Promise.resolve(this.entries);
+    }
+}

frontend/src/models/TableEntry.ts

@@ -1,6 +1,4 @@
-interface TableEntry {
+export default interface TableEntry {
     name: string;
     onlineTime: string;
 }
-
-export default TableEntry;

frontend/src/models/TunakillUser.ts

@@ -1,7 +0,0 @@
-interface TunakillUser {
-  name: string;
-  time: number;
-  uid: string;
-}
-
-export default TunakillUser;

frontend/src/services/UserStatsService.ts

@@ -0,0 +1,18 @@
+import TableEntry from "../models/TableEntry";
+
+export default class UserStatsService {
+
+  private apiURL = '/stats'
+
+  private requestInit: RequestInit = {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  };
+
+  async getStats(): Promise<TableEntry[]> {
+    return fetch(this.apiURL, this.requestInit)
+      .then(res => { console.log(res); return res; })
+      .then(res => res.json())
+  }
+}