122 lines
3.9 KiB
TypeScript
122 lines
3.9 KiB
TypeScript
import { getTranslations } from "next-intl/server";
|
|
import Link from "next/link";
|
|
import { redirect } from "next/navigation";
|
|
import { ContentCard, EmptyState, OnlineBadge } 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";
|
|
|
|
export const dynamic = "force-dynamic";
|
|
|
|
export const metadata = { title: "Friends" };
|
|
|
|
export default async function FriendsPage() {
|
|
const t = await getTranslations("pages.friends");
|
|
const session = await auth();
|
|
if (!session?.user?.id) redirect("/login");
|
|
|
|
const userId = Number(session.user.id);
|
|
|
|
// Friendships are bidirectional and stored once: the session user can appear
|
|
// as either user_one_id or user_two_id, with the *other* column being the
|
|
// friend. Read both directions, then dedupe the friend ids.
|
|
const friendships = await prisma.messengerFriendships
|
|
.findMany({
|
|
where: {
|
|
OR: [{ userOneId: userId }, { userTwoId: userId }],
|
|
},
|
|
select: { userOneId: true, userTwoId: true },
|
|
})
|
|
.catch(() => []);
|
|
|
|
const friendIds = Array.from(
|
|
new Set(
|
|
friendships
|
|
.map((f) => (f.userOneId === userId ? f.userTwoId : f.userOneId))
|
|
.filter((id) => id && id !== userId),
|
|
),
|
|
);
|
|
|
|
const [friends, imagerBase] = await Promise.all([
|
|
friendIds.length
|
|
? prisma.user
|
|
.findMany({
|
|
where: { id: { in: friendIds } },
|
|
select: { id: true, username: true, look: true, motto: true, online: true },
|
|
orderBy: { username: "asc" },
|
|
})
|
|
.catch(() => [])
|
|
: Promise.resolve([]),
|
|
siteSettings.get(
|
|
"habbo_imaging_url",
|
|
"https://www.habbo.com/habbo-imaging/avatarimage",
|
|
),
|
|
]);
|
|
|
|
return (
|
|
<main style={{ display: "grid", gap: "1.5rem" }}>
|
|
<ContentCard
|
|
icon="🤝"
|
|
title={t("title")}
|
|
subtitle={
|
|
friends.length === 0
|
|
? t("emptySubtitle")
|
|
: t("subtitle", { count: friends.length })
|
|
}
|
|
/>
|
|
|
|
<ContentCard padded={friends.length === 0}>
|
|
{friends.length === 0 ? (
|
|
<EmptyState icon="🤝">
|
|
{t("emptyState")}
|
|
</EmptyState>
|
|
) : (
|
|
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
|
{friends.map((friend) => {
|
|
const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
|
|
size: "s",
|
|
headOnly: true,
|
|
});
|
|
const isOnline = friend.online === "1";
|
|
return (
|
|
<div
|
|
key={friend.id}
|
|
className="card hover"
|
|
style={{ display: "flex", gap: "0.85rem", alignItems: "center" }}
|
|
>
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
className="avatar"
|
|
src={avatar}
|
|
alt={`${friend.username} avatar`}
|
|
width={50}
|
|
height={50}
|
|
/>
|
|
<div style={{ minWidth: 0, flex: 1 }}>
|
|
<h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
|
|
<Link href={`/u/${friend.username}`}>{friend.username}</Link>
|
|
</h3>
|
|
<p
|
|
className="muted"
|
|
style={{
|
|
margin: "0 0 0.4rem",
|
|
overflow: "hidden",
|
|
textOverflow: "ellipsis",
|
|
whiteSpace: "nowrap",
|
|
}}
|
|
>
|
|
{friend.motto || t("noMotto")}
|
|
</p>
|
|
<OnlineBadge online={isOnline} />
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</ContentCard>
|
|
</main>
|
|
);
|
|
}
|