Create initial FestaUserRenderer

components/generic/renderers/user.module.css

@@ -0,0 +1,16 @@
+.festaUserRenderer {
+    display: inline-flex;
+    flex-direction: row;
+
+    gap: 4px;
+    justify-content: center;
+    align-items: center;
+}
+
+.festaUserRendererAvatar {
+    width: 1.35em;
+    height: 1.35em;
+    border-radius: 100%;
+
+
+}

components/generic/renderers/user.tsx

@@ -0,0 +1,51 @@
+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.response ? error.response.data : error}>
+                <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>
+    )
+}

pages/debug/userlinks.tsx

@@ -0,0 +1,49 @@
+import { NextPage, NextPageContext } from "next";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { FestaUserRenderer } from "../../components/generic/renderers/user";
+import { ViewNotice } from "../../components/generic/views/notice";
+import { Postcard } from "../../components/postcard/changer";
+import debugPostcard from "../../public/postcards/markus-spiske-iar-afB0QQw-unsplash.jpg"
+
+
+export async function getStaticProps(context: NextPageContext) {
+    return {
+        props: {
+            ...(await serverSideTranslations(context.locale ?? "it-IT", ["common"]))
+        }
+    }
+}
+
+
+const PageDebugUserLinks: NextPage = (props) => {
+    const { t } = useTranslation()
+
+    return <>
+        <Postcard
+            src={debugPostcard}
+        />
+        <ViewNotice
+            notice={<>
+                <FestaUserRenderer
+                    userId="4cf96e81-dae9-42fd-b620-e1409cd7e80a"
+                    fallbackData={{
+                        id: "4cf96e81-dae9-42fd-b620-e1409cd7e80a",
+                        powerLevel: "USER",
+                        displayName: "Steffo",
+                        displayAvatarURL: "https://t.me/i/userpic/320/dBkGb8oy3GF830DOgqspuyfJh9B3z0zeU9oHT10kPOI.jpg",
+                    }}
+                />
+                <FestaUserRenderer
+                    userId="682a2a63-acbf-4bbb-8ab8-c38a33a0d380"
+                />
+                <FestaUserRenderer
+                    userId="aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa"
+                />
+            </>}
+        />
+    </>
+}
+
+
+export default PageDebugUserLinks

styles/cursor.module.css

@@ -5,3 +5,7 @@
 .loadingAsync {
     cursor: progress;
 }
+
+.hoverable {
+    cursor: help;
+}