2022-07-27 00:54:05 +00:00
|
|
|
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 (
|
2022-07-27 01:16:10 +00:00
|
|
|
<span className={classNames(style.festaUserRenderer, mood.negative, cursor.hoverable)} title={error.toString()}>
|
2022-07-27 00:54:05 +00:00
|
|
|
<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>
|
|
|
|
)
|
|
|
|
}
|