feature(database-connection): Restructure frontend

frontend/src/components/ErrorContainer/ErrorContainer.scss

@@ -0,0 +1,5 @@
+.ErrorContainer {
+    .error-message {
+        color: red;
+    }
+}

frontend/src/components/ErrorContainer/ErrorContainer.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ErrorContainer from './ErrorContainer';
+
+describe('<ErrorContainer />', () => {
+  test('it should mount', () => {
+    render(<ErrorContainer />);
+    
+    const errorContainer = screen.getByTestId('ErrorContainer');
+
+    expect(errorContainer).toBeInTheDocument();
+  });
+});

frontend/src/components/ErrorContainer/ErrorContainer.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import './ErrorContainer.scss';
+
+export interface ErrorContainerProperties {
+  message: string
+}
+
+class ErrorContainer extends React.Component<ErrorContainerProperties> {
+  constructor(props: Readonly<ErrorContainerProperties>) {
+    super(props)
+  }
+
+  render() {
+    return (
+      <div className="ErrorContainer" data-testid="ErrorContainer">
+        { this.props.message }
+      </div>
+    )
+  }
+}
+
+export default ErrorContainer;

frontend/src/components/Footer/Footer.scss

@@ -0,0 +1,5 @@
+.Footer {
+    footer {
+        padding: 2rem;
+    }
+}

frontend/src/components/Footer/Footer.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Footer from './Footer';
+
+describe('<Footer />', () => {
+  test('it should mount', () => {
+    render(<Footer />);
+    
+    const footer = screen.getByTestId('Footer');
+
+    expect(footer).toBeInTheDocument();
+  });
+});

frontend/src/components/Footer/Footer.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Footer.scss';
+
+const Footer: React.FC = () => (
+  <div className="Footer" data-testid="Footer">
+    <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>
+);
+
+export default Footer;

frontend/src/components/Header/Header.scss

@@ -0,0 +1,6 @@
+.Header {
+    .title {
+        font-size: 4vw;
+        color: #88c9db;
+    }
+}

frontend/src/components/Header/Header.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import Header from './Header';
+
+describe('<Header />', () => {
+  test('it should mount', () => {
+    render(<Header />);
+    
+    const header = screen.getByTestId('Header');
+
+    expect(header).toBeInTheDocument();
+  });
+});

frontend/src/components/Header/Header.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Header.scss';
+
+const Header: React.FC = () => (
+  <div className="Header" data-testid="Header">
+    <p className="title">Humenius' TeamSpeak 3-Ranking</p>
+  </div>
+);
+
+export default Header;

frontend/src/components/UserList/UserList.scss

@@ -0,0 +1,19 @@
+.UserList {
+    .first-place {
+        font-size: xx-large;
+        font-weight: bolder;
+        color: gold;
+    }
+    
+    .second-place {
+        font-size: x-large;
+        font-weight: bold;
+        color: silver;
+    }
+    
+    .third-place {
+        font-size: larger;
+        color: saddlebrown;
+    }
+}
+

frontend/src/components/UserList/UserList.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import UserList from './UserList';
+
+describe('<UserList />', () => {
+  test('it should mount', () => {
+    render(<UserList />);
+    
+    const userList = screen.getByTestId('UserList');
+
+    expect(userList).toBeInTheDocument();
+  });
+});

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;