feature(database-connection): Restructure frontend

frontend/src/components/UserList/UserList.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import TableEntry from '../../models/TableEntry';
+import './UserList.scss';
+
+// const UserList: React.FC = () => (
+//   <div className="UserList" data-testid="UserList">
+//     UserList Component
+//   </div>
+// );
+
+interface UserListProperties {
+  users: TableEntry[]
+}
+
+class UserList extends React.Component<UserListProperties> {
+
+  constructor(props: Readonly<UserListProperties>) {
+    super(props);
+  }
+
+  private 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);
+  //   // }
+  //   return this.createTableEntries();
+  // }
+
+  render() {
+    return (
+      <div className="UserList" data-testid="UserList">
+         <table>
+          <thead>
+          <tr>
+            <th>Placement</th>
+            <th>Name</th>
+            <th>Rank</th>
+            <th>Online time</th>
+          </tr>
+          </thead>
+          <tbody>
+            {this.createTableEntries(this.props.users)}
+          </tbody>
+        </table>
+      </div> 
+    )
+  }
+}
+
+export default UserList;