diff options
| -rw-r--r-- | components/account.tsx | 40 | ||||
| -rw-r--r-- | components/navbar.tsx | 2 | ||||
| -rw-r--r-- | pages/index.tsx | 2 | ||||
| -rw-r--r-- | pages/search.tsx | 2 | ||||
| -rw-r--r-- | pages/settings.tsx | 2 | ||||
| -rw-r--r-- | pages/user.tsx | 2 |
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", |