Further improvements to structure

anweisen · Nov 20, 2021 · a2a685b · a2a685b
1 parent 519ac9d
commit a2a685b
Show file tree

Hide file tree

Showing 7 changed files with 49 additions and 11 deletions.
diff --git a/src/api/api.ts b/src/api/api.ts
@@ -1,14 +1,25 @@
-import axios, {Method} from "axios";
+import axios from "axios";
 
 const API_VERSION = 1;
 
 type Auth = {
 	method: string;
 	token: string;
 }
+type HttpMethod =
+	| 'get'
+	| 'delete'
+	| 'head'
+	| 'options'
+	| 'post'
+	| 'put'
+	| 'patch'
+	| 'purge'
+	| 'link'
+	| 'unlink';
 type Route = {
 	path: string;
-	method: Method;
+	method: HttpMethod;
 }
 export module Routes {
 	export const UPGRADE_WEBSOCKET: Route 	= { path: "/upgrade", 		method: "get" };
@@ -35,7 +46,7 @@ export class CloudAPI {
 		return this.auth.method + " " + this.auth.token;
 	}
 
-	initSocket(socket: WebSocket) {
+	initSocket(socket: WebSocket): void {
 		this.socket = socket;
 
 		this.socket.onmessage = (event) => {
@@ -58,12 +69,13 @@ export class CloudAPI {
 	}
 
 	public async makeRequest(route: Route): Promise<any> {
-		const target = this.useUrl(route);
+		const endpoint = this.useUrl(route);
 
-		return axios(target, {
+		return axios(endpoint, {
 			headers: {
 				Authorization: this.getAuth()
 			},
+			timeout: 3500,
 			method: route.method
 		}).then(value => value.data);
 	}

diff --git a/src/components/Login.js b/src/components/Login.js
@@ -81,6 +81,8 @@ export default function Login({ setCookies }) {
 			<div className={"form-container"}>
 				<div className={"form"}>
 					<h1>Login</h1>
+					{/*<h1>•┃ Login ┃•</h1>*/}
+					{/*<h1>•» Login «•</h1>*/}
 					<LoginSelect method={method} setMethod={setMethod} hooks={hooks} />
 					<div className={"button"} onClick={event => {
 						event.preventDefault();

diff --git a/src/components/Login.scss b/src/components/Login.scss
@@ -41,8 +41,8 @@
 
 		.form {
 			display: table;
-			padding: 50px;
-			width: 70%;
+			padding: 50px 0;
+			width: 60%;
 			text-align: center;
 
 			h1 {

diff --git a/src/components/Nav.js b/src/components/Nav.js
@@ -1,4 +1,4 @@
-import { MdHome, MdPeople, MdStorage, MdOutlineLogout } from "react-icons/md";
+import { MdHome, MdPeople, MdStorage, MdOutlineLogout } from "react-icons/all";
 
 import NavEntry from "./dashboard/NavEntry";
 

diff --git a/src/components/dashboard/Dashboard.js b/src/components/dashboard/Dashboard.js
@@ -5,6 +5,7 @@ import { CloudAPI, Routes as ApiRoutes } from "../../api/api";
 
 import Nav from "../Nav";
 import Overview from "./content/Overview";
+import Players from "./content/Players";
 import Loader from "../Loader";
 
 import "./Dashboard.scss";
@@ -36,8 +37,8 @@ export default function Dashboard({ cookies }) {
 
 					<div className={"content"}>
 						<Routes>
-							<Route path={"/"} element={<Overview api={connection} />} />
-							<Route path={"player"} />
+							<Route path={"/"}       element={<Overview api={connection} />} />
+							<Route path={"player"}  element={<Players api={connection} />} />
 						</Routes>
 					</div>
 				</>

diff --git a/src/components/dashboard/content/Overview.js b/src/components/dashboard/content/Overview.js
@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { MdPeopleOutline } from "react-icons/md";
+import { MdPeopleOutline } from "react-icons/all";
 
 import Loader from "../../Loader";
 

diff --git a/src/components/dashboard/content/Players.js b/src/components/dashboard/content/Players.js
@@ -0,0 +1,23 @@
+import { ImHammer2 } from "react-icons/all";
+import { useEffect, useState } from "react";
+
+import Loader from "../../Loader";
+
+export default function Players({ api }) {
+	const [ players, setPlayers ] = useState();
+
+	useEffect(() => {
+		if (players != null) return;
+		api.fetchPlayers().then(players => setPlayers(players));
+	});
+
+	return (
+		<div className={"Players Dashboard-Component"}>
+			{ players == null
+				? <Loader/>
+				: <>
+				</>
+			}
+		</div>
+	);
+}