Add mock data and blur effect if error on API call occurs

frontend/src/App.scss

@@ -6,9 +6,18 @@
   align-items: center;
   text-align: center;
   color: whitesmoke;
+  min-height: 100vh;
   background-color: #282c34;
 }
 
+.blurred {
+  -webkit-filter: blur(5px);
+  -moz-filter: blur(5px);
+  -o-filter: blur(5px);
+  -ms-filter: blur(5px);
+  filter: blur(5px);
+}
+
 .first-place {
   font-size: xx-large;
   font-weight: bolder;

frontend/src/App.tsx

@@ -1,28 +1,33 @@
 import React from 'react';
 import './App.scss';
 import UserStatsMockService from "./mock/UserStatsMockService";
-import TableEntry from "./models/TableEntry";
+import UserStats from "./models/TableEntry";
 import UserStatsService from "./services/UserStatsService";
 import {findDOMNode} from "react-dom";
 
 interface State {
   error?: any,
   isLoaded: boolean,
-  users?: TableEntry[]
+  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
+    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,
@@ -42,8 +47,9 @@ export default class App extends React.Component {
   }
 
   renderTableData() {
-    const { error, isLoaded, users } = this.state;
+    const { error, isLoaded, users, mock } = this.state;
-    if (users != null && isLoaded) {
+    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"
@@ -58,6 +64,21 @@ export default class App extends React.Component {
           </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>
+        )
+      });
     }
   }
 
@@ -73,7 +94,7 @@ export default class App extends React.Component {
               <th>Online time</th>
             </tr>
           </thead>
-          <tbody>
+          <tbody className={this.state.error != null ? "blurred" : undefined}>
             {this.renderTableData()}
           </tbody>
         </table>