festa/components/generic/renderers/user.tsx

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>
    )
}