feature(database-connection): Restructure frontend

frontend/src/App.tsx

@@ -4,12 +4,16 @@ import UserStatsMockService from "./mock/UserStatsMockService";
 import UserStatsService from "./services/UserStatsService";
 import {findDOMNode} from "react-dom";
 import TableEntry from "./models/TableEntry";
+import UserList from './components/UserList/UserList';
+import ErrorContainer from './components/ErrorContainer/ErrorContainer';
+import Footer from './components/Footer/Footer';
+import Header from './components/Header/Header';
 
 interface State {
   error?: string,
-  isLoaded: boolean,
-  users?: TableEntry[],
-  mock?: TableEntry[]
+  loading: boolean,
+  users: TableEntry[],
+  mock: TableEntry[]
 }
 
 export default class App extends React.Component {
@@ -17,36 +21,47 @@ export default class App extends React.Component {
   private apiService: UserStatsService = new UserStatsService();
   private mockService = new UserStatsMockService();
 
-  state: State = {
-    error: undefined,
-    isLoaded: false,
-    users: undefined,
-    mock: undefined
+  state: State;
+
+  constructor(props: Readonly<{}>) {
+    super(props);
+    this.state = {
+        error: undefined,
+        loading: false,
+        users: [],
+        mock: this.mockService.getStatsWithoutPromise()
+    }
   }
 
-  componentDidMount() {
-    this.setState({isLoaded: false, mock: this.mockService.getStatsWithoutPromise()});
-    // this.mockService.getStats()
-    //   .then(data => this.setState({
-    //     data: data,
-    //     mock: data
-    //   }))
-    //   .finally(() => {
-    //   });
-    this.apiService.getStats()
-      .then(data => this.setState({
-        isLoaded: true,
-        users: data
-      }))
-      .catch(error => {
-        error.response.json()
-          .then((err: any) => this.setState({
-            isLoaded: true,
-            error: err.error
-          }))
-      });
+  componentWillMount() {
+    this.fetchData();
   }
 
+  private fetchData() {
+    this.setState({ loading: true })
+    this.apiService.getStats()
+    .then(data => this.setState({
+      loading: false,
+      users: data
+    }))
+  }
+
+  // componentDidMount() {
+    // this.setState({loading: false, mock: this.mockService.getStatsWithoutPromise()});
+    // this.apiService.getStats()
+    //   .then(data => this.setState({
+    //     isLoaded: true,
+    //     users: data
+    //   }))
+    //   .catch(error => {
+    //     error.response.json()
+    //       .then((err: any) => this.setState({
+    //         isLoaded: true,
+    //         error: err.error
+    //       }))
+    //   });
+  // }
+
   componentDidUpdate() {
     const element = findDOMNode(this);
     if (element != null) {
@@ -54,63 +69,20 @@ export default class App extends React.Component {
     }
   }
 
-  createTableEntries(entries: TableEntry[]) {
-    return entries.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.rank}</td>
-          <td>{entry.onlineTime}</td>
-        </tr>
-      )
-    });
-  }
-
-  renderTableData() {
-    const { error, isLoaded, users, mock } = this.state;
-    if (users != null && isLoaded && error == null) {
-      return this.createTableEntries(users);
-    } else if (isLoaded && error != null && mock != null) {
-      return this.createTableEntries(mock);
-    } else if (mock != null) {
-      return this.createTableEntries(mock);
-    }
-  }
-
   render() {
     return (
       <div className="App">
-        <p className="title">Humenius' TeamSpeak 3-Ranking</p>
-        { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null}
-        <table>
-          <thead>
-          <tr>
-            <th>Placement</th>
-            <th>Name</th>
-            <th>Rank</th>
-            <th>Online time</th>
-          </tr>
-          </thead>
-          <tbody className={this.state.error != null || !this.state.isLoaded ? "blurred" : undefined}>
-            {this.renderTableData()}
-          </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>
+        <Header />
+        {/* { this.state.error != null ? <p className="error-message"> { this.state.error } Please try again later!</p> : null} */}
+        {
+          (!this.state.error && this.state.loading)
+          ? <UserList users={this.state.mock} />
+          : <UserList users={this.state.users} />
+        }
+        {
+          this.state.error && <ErrorContainer message={this.state.error} />
+        }
+        <Footer />
       </div>
     );
   }