1
Fork 0
mirror of https://github.com/Steffo99/festa.git synced 2024-12-23 07:04:22 +00:00
festa/components/generic/renderers/user.tsx

51 lines
No EOL
1.7 KiB
TypeScript

import { User } from "@prisma/client"
import { default as useSWR } from "swr"
import { FestaIcon } from "./fontawesome"
import style from "./user.module.css"
import mood from "../../../styles/mood.module.css"
import cursor from "../../../styles/cursor.module.css"
import classNames from "classnames"
import { faAsterisk, faExclamationCircle } from "@fortawesome/free-solid-svg-icons"
import { AxiosError } from "axios"
export type FestaUserRendererProps = {
userId: User["id"],
fallbackData?: User
}
export const FestaUserRenderer = ({ userId, fallbackData }: FestaUserRendererProps) => {
const { data, error } = useSWR<User, AxiosError>(`/api/users/${userId}`, { fallbackData, revalidateOnFocus: false, revalidateOnReconnect: false, revalidateOnMount: fallbackData === undefined })
if (error) {
return (
<span className={classNames(style.festaUserRenderer, mood.negative, cursor.hoverable)} title={error.toString()}>
<FestaIcon icon={faExclamationCircle} />
{userId}
</span>
)
}
if (!data) {
return (
<span className={classNames(style.festaUserRenderer, cursor.loadingAsync)}>
<FestaIcon icon={faAsterisk} spin />
{userId}
</span>
)
}
const avatarURL = data!.displayAvatarURL
const avatar = avatarURL ?
<img className={style.festaUserRendererAvatar} src={avatarURL} /> :
<div className={style.festaUserRendererAvatar} />
const name = <span title={userId}>{data?.displayName}</span>
return (
<span className={style.festaUserRenderer}>
{avatar}
{name}
</span>
)
}