working loggedIn in navbar

2 files changed, 56 insertions, 68 deletions

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 275de07..41db147 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, Component } from "react";
+import { CSSProperties, useEffect, useState } from "react";
 /* import axios from "axios"; */
 
 import { LogoDark } from "../components/logo";
@@ -17,61 +17,47 @@ var NavBarItemStyle: CSSProperties = {
 	display: "block"
 }
 
-export class NavBar extends Component {
-	state: {
-		loggedIn: boolean
-	} = {
-		loggedIn: false
-	}
-	
-	constructor(props: {}) {
-		super(props);
-	}
+export function NavBar() {
+	var [ loggedIn, setLoggedIn ] = useState(false);
+	useEffect(() => setLoggedIn(document.cookie.includes("token")), []);
 
-	render () {
-		if (typeof window !== "undefined") { // hot garbage but werks :tada:
-			var loggedIn = document.cookie.includes("token");
-			if (this.state.loggedIn != loggedIn)
-				this.setState({ loggedIn });
-		}
-		return <div className="navbar" style={{
-			width: 48,
-			height: "100%",
+	return <div className="navbar" style={{
+		width: 48,
+		height: "100%",
 
-			lineHeight: 0,
+		lineHeight: 0,
 
-			backgroundColor: "var(--background)",
-			display: "inline-block",
+		backgroundColor: "var(--background)",
+		display: "inline-block",
 
-			position: "fixed",
-			top: 0,
-			left: 0,
+		position: "fixed",
+		top: 0,
+		left: 0,
 
-			overflow: "hidden",
-			whiteSpace: "nowrap"
-		}}>
-			<div style={NavBarItemStyle}><LogoDark/></div>
-			<a href="/" style={NavBarItemStyle}><Home/></a>
-			<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
-			<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
-			<a href="/search" style={NavBarItemStyle}><SearchIcon/></a>
+		overflow: "hidden",
+		whiteSpace: "nowrap"
+	}}>
+		<div style={NavBarItemStyle}><LogoDark/></div>
+		<a href="/" style={NavBarItemStyle}><Home/></a>
+		<a href="/game" style={NavBarItemStyle}><VideogameAssetIcon/></a>
+		<a href="/" style={NavBarItemStyle}><ExtensionIcon/></a>
+		<a href="/search" style={NavBarItemStyle}><SearchIcon/></a>
 
-			<div style={{
-				position: "absolute",
-				bottom: -4,
-				left: 0,
-				backgroundColor: "var(--background)"
-			}}>
-				<a href={this.state.loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
-					{
-						this.state.loggedIn ?
-						<AccountAvatar size={24} dummy round/> :
-						<PersonIcon/>
-					}
-				</a>
-				<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
-			</div>
+		<div style={{
+			position: "absolute",
+			bottom: -4,
+			left: 0,
+			backgroundColor: "var(--background)"
+		}}>
+			<a href={loggedIn ? "/account" : "/login"} style={NavBarItemStyle}>
+				{
+					loggedIn ?
+					<AccountAvatar size={24} dummy round/> :
+					<PersonIcon/>
+				}
+			</a>
+			<a href="/settings" style={NavBarItemStyle}><SettingsIcon/></a>
 		</div>
-	}
+	</div>
 }
 
diff --git a/components/recentGames.tsx b/components/recentGames.tsx
index 6bd766b..a14194f 100644
--- a/components/recentGames.tsx
+++ b/components/recentGames.tsx
@@ -21,24 +21,26 @@ export default class RecentGames extends Component {
 		return <div>
 			<h2>Recente partijen</h2>
 			<table width="100%" style={{ marginTop: "16px", textAlign: "center" }}>
-				<tr>
-					<th style={{ width: "50%" }}>Tegenstander</th>
-					<th style={{ width: "20%" }}>Uitkomst</th>
-					<th style={{ width: "15%" }}>Zetten</th>
-					<th style={{ width: "15%" }}>Datum</th>
-				</tr>
-				<tr>
-					<td style={LeftAlignedTableColumn}>Naam hier</td>
-					<td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
-					<td>7</td>
-					<td style={RightAlignedTableColumn}>Vandaag</td>
-				</tr>
-				<tr>
-					<td style={LeftAlignedTableColumn}>Nog meer namen</td>
-					<td style={{ opacity: .6 }}>Gelijkspel</td>
-					<td>42</td>
-					<td style={RightAlignedTableColumn}>Gisteren</td>
-				</tr>
+				<tbody>
+					<tr>
+						<th style={{ width: "50%" }}>Tegenstander</th>
+						<th style={{ width: "20%" }}>Uitkomst</th>
+						<th style={{ width: "15%" }}>Zetten</th>
+						<th style={{ width: "15%" }}>Datum</th>
+					</tr>
+					<tr>
+						<td style={LeftAlignedTableColumn}>Naam hier</td>
+						<td style={{ color: "var(--disk-b-text)" }}>Gewonnen</td>
+						<td>7</td>
+						<td style={RightAlignedTableColumn}>Vandaag</td>
+					</tr>
+					<tr>
+						<td style={LeftAlignedTableColumn}>Nog meer namen</td>
+						<td style={{ opacity: .6 }}>Gelijkspel</td>
+						<td>42</td>
+						<td style={RightAlignedTableColumn}>Gisteren</td>
+					</tr>
+				</tbody>
 			</table>
 		</div>
 	}