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

frontend/src/components/UserList/UserList.tsx

@@ -4,16 +4,8 @@ import './UserList.scss';
 import SeasonSwitch from "../SeasonSwitch/SeasonSwitch";
 import UserStatsResponse from "../../models/UserStatsResponse";
 
-// const UserList: React.FC = () => (
-//   <div className="UserList" data-testid="UserList">
-//     UserList Component
-//   </div>
-// );
-
-export default class UserList extends React.Component<IUserListProperties, IUserListState> {
-
-    private createTableEntries(entries: TableEntry[]) {
-    return entries.map((entry, index) => {
+const createTableEntries = (entries: TableEntry[]) =>
+    entries.map((entry, index) => {
         const placement = index + 1;
         const placementClassName = placement === 1 ? "first-place"
             : (placement === 2 ? "second-place"
@@ -28,24 +20,10 @@ export default class UserList extends React.Component<IUserListProperties, IUser
             </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);
-  //   // }
-  //   return this.createTableEntries();
-  // }
-
-  render() {
-    return (
+const UserList: React.FC<IUserListProperties> = (props: IUserListProperties) => (
     <div className="UserList" data-testid="UserList">
-          <SeasonSwitch onSeasonIdChange={this.props.onSeasonIdChange} userStats={this.props.userStats} />
+        <SeasonSwitch onSeasonIdChange={props.onSeasonIdChange} userStats={props.userStats}/>
         <table>
             <thead>
             <tr>
@@ -56,13 +34,11 @@ export default class UserList extends React.Component<IUserListProperties, IUser
             </tr>
             </thead>
             <tbody>
-            {this.createTableEntries(this.props.userStats.stats)}
+            {createTableEntries(props.userStats.stats)}
             </tbody>
         </table>
     </div>
 )
-  }
-}
 
 export interface IUserListProperties {
     userStats: UserStatsResponse
@@ -70,6 +46,4 @@ export interface IUserListProperties {
     onSeasonIdChange: any
 }
 
-interface IUserListState {
-    mocked: boolean
-}
+export default UserList;