avatar working

6 files changed, 28 insertions, 22 deletions

diff --git a/components/account.tsx b/components/account.tsx
index 603e015..005e0d1 100644
--- a/components/account.tsx
+++ b/components/account.tsx
@@ -1,27 +1,33 @@
-import { Component } from "react";
+import { useState, useEffect } from 'react';
 
-interface AccountAvatarProps {
+var dummy = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg==";
+
+export function AccountAvatar(props: {
 	size: number;
-	image?: string;
 	dummy?: boolean;
 	fallbackFill?: string;
 	round?: boolean;
-}
 
-export class AccountAvatar extends Component<AccountAvatarProps> {
-	render() {
-		var image = this.props.dummy ?
-			"url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQYV2P4z/j/PwAHAQL/gXZXNQAAAABJRU5ErkJggg==)" :
-			this.props.image;
-		return <div style={{
-			width: this.props.size,
-			height: this.props.size,
-			backgroundImage: image,
-			backgroundSize: "cover",
-			display: "inline-block",
-			borderRadius: this.props.size / 2 * Number(this.props.round || 0)
-		}}/>;
+	id?: string;
+}) {
+	var image = "";
+	image += "/api/user/avatar";
+	if (typeof props.id === "string") {
+		if (!props.id) image = "";
+		else image += `?id=${props.id}`;
 	}
+
+	if (props.dummy) image = dummy;
+
+	return <div style={{
+		width: props.size,
+		height: props.size,
+		backgroundColor: props.fallbackFill || "var(--background)",
+		backgroundImage: `url(${image})`,
+		backgroundSize: "cover",
+		display: "inline-block",
+		borderRadius: props.size / 2 * Number(props.round || 0)
+	}}/>;
 }
 
 
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 3eabe2d..2c38c3c 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -99,7 +99,7 @@ export function NavBar() {
 			<a href={loggedIn ? "/user" : "/login"} style={NavBarItemStyle}>
 				{
 					loggedIn ?
-					<AccountAvatar size={24} dummy round/> :
+					<AccountAvatar size={24} round/> :
 					<PersonIcon/>
 				}
 			</a>
diff --git a/pages/index.tsx b/pages/index.tsx
index 719f9ea..41da36e 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -87,7 +87,7 @@ function AccountBox(props: {
 			top: 0, left: 0,
 			...SquareSize
 		}}>
-			<AccountAvatar size={90} dummy/>
+			<AccountAvatar size={90}/>
 		</div>
 		<div style={{
 			position: "absolute",
diff --git a/pages/search.tsx b/pages/search.tsx
index 66e16d2..50a2410 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -34,7 +34,7 @@ function SearchResult(props: { user: userInfo }) {
 		padding: 12
 	}} fullwidth href={"/user?id=" + props.user.id}>
 		<div style={{ position: "relative" }}>
-			<AccountAvatar size={48} dummy/>
+			<AccountAvatar size={48} id={props.user.id}/>
 			<div style={{
 				position: "absolute",
 				top: 0, right: 0, bottom: 0,
diff --git a/pages/settings.tsx b/pages/settings.tsx
index a713a5a..19208df 100644
--- a/pages/settings.tsx
+++ b/pages/settings.tsx
@@ -28,7 +28,7 @@ export default function SettingsPage() {
 				<Vierkant fullwidth>
 					<h2>Account</h2>
 					<div style={SettingsSubsectionStyle}>
-						<AccountAvatar size={100} dummy/>
+						<AccountAvatar size={100}/>
 						<IconLabelButton text="Profielfoto veranderen" icon={<EditOutlinedIcon/>}/>
 					</div>
 					<div style={SettingsSubsectionStyle}>
diff --git a/pages/user.tsx b/pages/user.tsx
index 8d4fb8d..c963550 100644
--- a/pages/user.tsx
+++ b/pages/user.tsx
@@ -136,7 +136,7 @@ export default function AccountPage() {
 		<CenteredPage width={802}>
 			<PageTitle>Profiel</PageTitle>
 			<Vierkant fullwidth>
-				<AccountAvatar size={128} dummy/>
+				<AccountAvatar size={128} id={user?.id || ""}/>
 				<div style={{
 					display: "inline-block",
 					verticalAlign: "top",