From 7b2c1682c326d8194397fb43825c602da6a6c915 Mon Sep 17 00:00:00 2001
From: lonkaars <l.leblansch@gmail.com>
Date: Sun, 14 Mar 2021 14:51:43 +0100
Subject: avatar working

---
 components/account.tsx | 40 +++++++++++++++++++++++-----------------
 1 file changed, 23 insertions(+), 17 deletions(-)

(limited to 'components/account.tsx')

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)
+	}}/>;
 }
 
 
-- 
cgit v1.2.3