ts-onlinetime-ranks/frontend/src/App.tsx

import React from 'react';
import './App.scss';
import UserStatsMockService from "./mock/UserStatsMockService";
import UserStats from "./models/TableEntry";
import UserStatsService from "./services/UserStatsService";
import {findDOMNode} from "react-dom";

interface State {
  error?: any,
  isLoaded: boolean,
  users?: UserStats[],
  mock?: UserStats[]
}

export default class App extends React.Component {

  private apiService: UserStatsService = new UserStatsService();
  private mockService: UserStatsService = new UserStatsMockService();

  state: State = {
    error: null,
    isLoaded: false,
    users: undefined,
    mock: undefined
  }

  componentDidMount() {
    this.setState({isLoaded: false})
    this.mockService.getStats()
      .then(data => this.setState({mock: data}));
    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, mock } = this.state;
    console.log(`${users} + ${isLoaded} + ${error}`)
    if (users != null && isLoaded && error == null) {
      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>
        )
      });
    } else if (isLoaded && error != null && mock != null) {
      return mock.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() {
    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 className={this.state.error != null ? "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>
      </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;