feature(database-connection): Refactor UserList.tsx to functional components

frontend/src/components/UserList/UserList.tsx

@@ -4,65 +4,41 @@ import './UserList.scss';
 import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
 import UserStatsResponse from "../../models/UserStatsResponse";
 
-// const UserList: React.FC = () => (
+const createTableEntries = (entries: TableEntry[]) =>
-//   <div className="UserList" data-testid="UserList">
+    entries.map((entry, index) => {
-//     UserList Component
+        const placement = index + 1;
-//   </div>
+        const placementClassName = placement === 1 ? "first-place"
-// );
+            : (placement === 2 ? "second-place"
-
+                : (placement === 3 ? "third-place"
-export default class UserList extends React.Component<IUserListProperties, IUserListState> {
+                    : undefined))
-
+        return (
-    private createTableEntries(entries: TableEntry[]) {
+            <tr key={index} className={placementClassName}>
-    return entries.map((entry, index) => {
+                <td>{placement}</td>
-      const placement = index + 1;
+                <td>{entry.name}</td>
-      const placementClassName = placement === 1 ? "first-place"
+                <td>{entry.rank}</td>
-        : (placement === 2 ? "second-place"
+                <td>{entry.onlineTime}</td>
-          : (placement === 3 ? "third-place"
+            </tr>
-            : 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 UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
-  //   // const { error, isLoaded, users, mock } = this.state;
+    <div className="UserList" data-testid="UserList">
-  //   // if (users != null && isLoaded && error == null) {
+        <SeasonSwitch onSeasonIdChange={props.onSeasonIdChange} userStats={props.userStats}/>
-  //   //   return this.createTableEntries(users);
+        <table>
-  //   // } else if (isLoaded && error != null && mock != null) {
+            <thead>
-  //   //   return this.createTableEntries(mock);
+            <tr>
-  //   // } else if (mock != null) {
+                <th>Placement</th>
-  //   //   return this.createTableEntries(mock);
+                <th>Name</th>
-  //   // }
+                <th>Rank</th>
-  //   return this.createTableEntries();
+                <th>Online time</th>
-  // }
+            </tr>
-
+            </thead>
-  render() {
+            <tbody>
-    return (
+            {createTableEntries(props.userStats.stats)}
-      <div className="UserList" data-testid="UserList">
+            </tbody>
-          <SeasonSwitch onSeasonIdChange={this.props.onSeasonIdChange} userStats={this.props.userStats} />
-         <table>
-          <thead>
-          <tr>
-            <th>Placement</th>
-            <th>Name</th>
-            <th>Rank</th>
-            <th>Online time</th>
-          </tr>
-          </thead>
-          <tbody>
-            {this.createTableEntries(this.props.userStats.stats)}
-          </tbody>
         </table>
-      </div>
+    </div>
-    )
+)
-  }
-}
 
 export interface IUserListProperties {
     userStats: UserStatsResponse
@@ -70,6 +46,4 @@ export interface IUserListProperties {
     onSeasonIdChange: any
 }
 
-interface IUserListState {
+export default UserList;
-    mocked: boolean
-}