125 lines
4.2 KiB
TypeScript
125 lines
4.2 KiB
TypeScript
import { getTranslations } from "next-intl/server";
|
|
import { ContentCard, EmptyState } from "@/components/public/ui";
|
|
import { auth } from "@/lib/auth";
|
|
import { avatarImageUrl } from "@/lib/format";
|
|
import { prisma } from "@/lib/prisma";
|
|
import { siteSettings } from "@/lib/services/site-settings";
|
|
import { postShout } from "@/actions/radio-shouts";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
function formatDate(d: Date | null | undefined): string {
|
|
return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
|
|
}
|
|
|
|
export default async function RadioShoutsPage() {
|
|
const t = await getTranslations("pages.radioShouts");
|
|
|
|
const [shouts, imagerBase, session] = await Promise.all([
|
|
prisma.radioShouts
|
|
.findMany({
|
|
orderBy: { createdAt: "desc" },
|
|
take: 50,
|
|
})
|
|
.catch(() => []),
|
|
siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
|
|
auth(),
|
|
]);
|
|
|
|
const isLoggedIn = Boolean(session?.user?.id);
|
|
|
|
// Resolve author usernames/looks. shout.userId is BigInt; User.id is Int.
|
|
const authorIds = Array.from(new Set(shouts.map((s) => Number(s.userId))));
|
|
const authors = authorIds.length
|
|
? await prisma.user
|
|
.findMany({
|
|
where: { id: { in: authorIds } },
|
|
select: { id: true, username: true, look: true },
|
|
})
|
|
.catch(() => [])
|
|
: [];
|
|
const authorById = new Map(authors.map((a) => [a.id, a]));
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard icon="📣" title={t("title")} subtitle={t("subtitle")} />
|
|
|
|
{isLoggedIn ? (
|
|
<ContentCard icon="✍️" title={t("postTitle")} subtitle={t("postSubtitle")}>
|
|
{/* The author is taken from the session inside the action, never from
|
|
this form — no user id is submitted. */}
|
|
<form action={postShout}>
|
|
<label htmlFor="shout-message" className="muted">
|
|
{t("messageLabel")}
|
|
</label>
|
|
<textarea
|
|
id="shout-message"
|
|
name="message"
|
|
required
|
|
maxLength={255}
|
|
rows={3}
|
|
placeholder={t("messagePlaceholder")}
|
|
style={{ width: "100%", margin: "0.4rem 0 0.75rem", resize: "vertical" }}
|
|
/>
|
|
<button type="submit" className="btn btn-primary">
|
|
{t("shoutButton")}
|
|
</button>
|
|
</form>
|
|
</ContentCard>
|
|
) : (
|
|
<ContentCard padded>
|
|
<EmptyState icon="🔒">{t("loginToPost")}</EmptyState>
|
|
</ContentCard>
|
|
)}
|
|
|
|
<ContentCard
|
|
icon="💬"
|
|
title={t("latestTitle")}
|
|
subtitle={t("latestSubtitle")}
|
|
padded={shouts.length === 0}
|
|
>
|
|
{shouts.length === 0 ? (
|
|
<EmptyState icon="📣">{t("empty")}</EmptyState>
|
|
) : (
|
|
<div className="card-grid">
|
|
{shouts.map((s) => {
|
|
const author = authorById.get(Number(s.userId));
|
|
const authorAvatar = author
|
|
? avatarImageUrl(imagerBase ?? "", author.look, {
|
|
size: "s",
|
|
headOnly: true,
|
|
})
|
|
: null;
|
|
return (
|
|
<div
|
|
key={String(s.id)}
|
|
className="card"
|
|
style={{ display: "flex", gap: "0.75rem", alignItems: "flex-start" }}
|
|
>
|
|
{authorAvatar ? (
|
|
/* eslint-disable-next-line @next/next/no-img-element */
|
|
<img
|
|
className="avatar"
|
|
src={authorAvatar}
|
|
alt={author?.username ?? "author"}
|
|
width={40}
|
|
height={40}
|
|
/>
|
|
) : null}
|
|
<div style={{ flex: 1, minWidth: 0 }}>
|
|
<p style={{ margin: "0 0 0.25rem" }}>
|
|
<strong>{author?.username ?? `User #${s.userId}`}</strong>{" "}
|
|
<span className="muted">{formatDate(s.createdAt)}</span>
|
|
</p>
|
|
<p style={{ margin: 0 }}>{s.message}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|