mirror of
https://github.com/Steffo99/festa.git
synced 2024-10-16 06:57:26 +00:00
Create initial FestaUserRenderer
This commit is contained in:
parent
3c74c3114b
commit
a7c8ba72a1
4 changed files with 120 additions and 0 deletions
16
components/generic/renderers/user.module.css
Normal file
16
components/generic/renderers/user.module.css
Normal file
|
@ -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%;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
51
components/generic/renderers/user.tsx
Normal file
51
components/generic/renderers/user.tsx
Normal file
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
49
pages/debug/userlinks.tsx
Normal file
49
pages/debug/userlinks.tsx
Normal file
|
@ -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
|
|
@ -4,4 +4,8 @@
|
||||||
|
|
||||||
.loadingAsync {
|
.loadingAsync {
|
||||||
cursor: progress;
|
cursor: progress;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hoverable {
|
||||||
|
cursor: help;
|
||||||
}
|
}
|
Loading…
Reference in a new issue