Split frontend and backend

frontend/src/App.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import './App.scss';
+import Mock from "./mock/Mock";
+import TableEntry from "./models/TableEntry";
+import {SinusBot} from "@support-pp/sinusbot-ts";
+import SinusBotService from "./services/SinusBotService";
+
+export default class App extends React.Component {
+
+  //private tableContent: TableEntry[] = Mock.tableContent;
+
+  state = {
+    error: null,
+    isLoaded: false,
+    users: [],
+  }
+
+  componentDidMount() {
+    fetch('https://sinusbot.humenius.me/api/v1/bot/i/51314e26-13a1-4779-b2ac-e36d493687d4/event/tunakill_rank_all_user')
+      .then(res => res.json())
+      .then((data) => SinusBotService.consumeTunakillResponse(data))
+      .then(
+        (result) => {
+          this.setState({
+            isLoaded: true,
+            users: result
+          });
+        },
+        (error) => {
+          this.setState({
+            isLoaded: true,
+            error: error
+          });
+        }
+      );
+  }
+
+  render() {
+    const { error, isLoaded, users } = this.state;
+    return (
+      <div className="App">
+        <p className="title">Humenius' TeamSpeak 3-Ranking</p>
+        <table>
+          <thead>
+            <tr>
+              <th>Placement</th>
+              <th>Name</th>
+              <th>Online time</th>
+            </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>
+                );
+              })
+            }
+          </tbody>
+        </table>
+        <footer>
+          Made by <a href="https://humenius.me"
+                     >Humenius</a>.
+          Powered by <a href="https://reactjs.org/"
+                      >React</a>.
+          <br />
+          <a href="ts3server://ts.humenius.me">
+            Click here to join my TeamSpeak server
+          </a>
+        </footer>
+      </div>
+    );
+  }
+}
+
+// const App = () => {
+//   return (
+//     <div className="App">
+//       <table>
+//         <tr>
+//           <th>Placement</th>
+//           <th>Name</th>
+//           <th>Online time</th>
+//         </tr>
+//         <tr className="first-place">
+//           <td>1</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr className="second-place">
+//           <td>2</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr className="third-place">
+//           <td>3</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr>
+//           <td>4</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//       </table>
+//     </div>
+//   );
+// }
+
+// function App() {
+//   return (
+//     <div className="App">
+//       <table>
+//         <tr>
+//           <th>Placement</th>
+//           <th>Name</th>
+//           <th>Online time</th>
+//         </tr>
+//         <tr className="first-place">
+//           <td>1</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr className="second-place">
+//           <td>2</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr className="third-place">
+//           <td>3</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//         <tr>
+//           <td>4</td>
+//           <td>Humen</td>
+//           <td>0d 1h 0m 0m</td>
+//         </tr>
+//       </table>
+//     </div>
+//   );
+// }
+
+// export default App;