user page :tada:

4 files changed, 40 insertions, 13 deletions

diff --git a/api/user/info.py b/api/user/info.py
index 3d4f4fb..954a989 100644
--- a/api/user/info.py
+++ b/api/user/info.py
@@ -30,12 +30,12 @@ def index():
        not token:
            return "", 400
 
-    if token:
+    if token and not (username or user_id):
         user_id = token_login(token)
-    elif username:
+
+    if username and not user_id:
         temp_user_id = cursor.execute("select user_id from users where username = ?", [username]).fetchone()
-        if temp_user_id:
-            user_id = temp_user_id[0]
+        if len(temp_user_id) > 0: user_id = temp_user_id
 
     user = format_user(user_id)
 
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 56d6b4b..ab348a1 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,5 +1,4 @@
 import { CSSProperties, useEffect, useState } from "react";
-/* import axios from "axios"; */
 
 import { LogoDark } from "../components/logo";
 
@@ -9,7 +8,7 @@ import ExtensionIcon from '@material-ui/icons/Extension';
 import SearchIcon from '@material-ui/icons/Search';
 import SettingsIcon from '@material-ui/icons/Settings';
 import PersonIcon from '@material-ui/icons/Person';
-import {AccountAvatar} from "./account";
+import { AccountAvatar } from "./account";
 
 var NavBarItemStyle: CSSProperties = {
 	margin: 12,
@@ -49,7 +48,7 @@ export function NavBar() {
 			left: 0,
 			backgroundColor: "var(--background)"
 		}}>
-			<a href={loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
+			<a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}>
 				{
 					loggedIn ?
 					<AccountAvatar size={24} dummy round/> :
diff --git a/pages/search.tsx b/pages/search.tsx
index 52dfed5..963fcba 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -32,7 +32,7 @@ function SearchResults(props: { userList: Array<userInfo> }) {
 function SearchResult(props: { user: userInfo }) {
 	return <Vierkant style={{
 		padding: 12
-	}} fullwidth>
+	}} fullwidth href={`/user?id=${props.user.id}`}>
 		<div style={{ position: "relative" }}>
 			<AccountAvatar size={48} dummy/>
 			<div style={{
diff --git a/pages/account.tsx b/pages/user.tsx
index 82e21fa..fe27f6d 100644
--- a/pages/account.tsx
+++ b/pages/user.tsx
@@ -1,10 +1,13 @@
-import { ReactNode, Children } from 'react';
+import { ReactNode, Children, useState, useEffect } from 'react';
 import Icon from '@mdi/react';
+import { useRouter } from 'next/router';
+import axios from 'axios';
 
 import { NavBar } from '../components/navbar';
 import { CenteredPage, PageTitle } from '../components/page';
 import { Vierkant, IconLabelButton } from '../components/ui';
 import { AccountAvatar } from '../components/account';
+import { userInfo } from '../api/api';
 import RecentGames from '../components/recentGames';
 
 import PersonAddOutlinedIcon from '@material-ui/icons/PersonAddOutlined';
@@ -63,6 +66,33 @@ function InfoSection(props: { children: ReactNode }) {
 }
 
 export default function AccountPage() {
+	var [gotData, setGotData] = useState(false);
+	var [user, setUser] = useState<userInfo>();
+
+	typeof window !== "undefined" && console.log(new URLSearchParams(window.location.search).get("id"))
+	useEffect(() => {
+		if (gotData) return;
+		if (typeof window === "undefined") return;
+
+		var id = new URLSearchParams(window.location.search).get("id");
+		var loggedIn = document.cookie.includes("token");
+
+		if (id || loggedIn) {
+			axios.request<userInfo>({
+				method: id ? "post" : "get",
+				url: `/api/user/info`,
+				headers: {"content-type": "application/json"},
+				data: id ? { id } : undefined
+			})
+			.then(request => setUser(request.data))
+			.catch(() => {});
+		} else {
+			window.history.go(-1);
+		}
+
+		setGotData(true);
+	})
+
 	return <div>
 		<NavBar/>
 		<CenteredPage width={802}>
@@ -75,10 +105,8 @@ export default function AccountPage() {
 					marginLeft: 12,
 					width: "calc(100% - 128px - 12px)"
 				}}>
-					<h2 style={{ fontSize: 32 }}>Gebruikersnaam</h2>
-					<p style={{ marginTop: 6 }}>
-						Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-					</p>
+					<h2 style={{ fontSize: 32 }}>{user?.username}</h2>
+					<p style={{ marginTop: 6 }}>{user?.status}</p>
 				</div>
 				<div style={{
 					position: "absolute",