feat(events): add weekly browsing and personal registrations
This commit is contained in:
Simo committed
1 parent
25d0a13050
commit
96d3e3f602
7 files changed
+655
-74
No files matched your search
+146
-60
@@ -1,17 +1,13 @@
|
||||
import { count, desc, eq, inArray } from "drizzle-orm";
|
||||
import type { Metadata } from "next";
|
||||
import Image from "next/image";
|
||||
import { getTranslations } from "next-intl/server";
|
||||
import Link from "@/components/link";
|
||||
import { LocalEventTime } from "@/components/public/local-event-time";
|
||||
import { ContentCard, EmptyState } from "@/components/public/ui";
|
||||
import {
|
||||
db,
|
||||
WebsiteEvent,
|
||||
WebsiteEventRegistration,
|
||||
WebsiteEventType,
|
||||
} from "@/lib/db";
|
||||
import { auth } from "@/lib/auth";
|
||||
import { excerpt, slugify } from "@/lib/format";
|
||||
import { formatDate } from "@/lib/format-date";
|
||||
import { logger } from "@/lib/logger";
|
||||
import { loadPublicEvents } from "@/lib/services/public-events";
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const t = await getTranslations("pages.events");
|
||||
@@ -26,62 +22,123 @@ export async function generateMetadata(): Promise<Metadata> {
|
||||
};
|
||||
}
|
||||
|
||||
export default async function EventsPage() {
|
||||
export default async function EventsPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
status?: string;
|
||||
week?: string;
|
||||
mine?: string;
|
||||
page?: string;
|
||||
}>;
|
||||
}) {
|
||||
const t = await getTranslations("pages.events");
|
||||
|
||||
const eventRows = await db
|
||||
.select({
|
||||
id: WebsiteEvent.id,
|
||||
title: WebsiteEvent.title,
|
||||
description: WebsiteEvent.description,
|
||||
status: WebsiteEvent.status,
|
||||
image: WebsiteEvent.image,
|
||||
startsAt: WebsiteEvent.startsAt,
|
||||
maxPlayers: WebsiteEvent.maxPlayers,
|
||||
typeName: WebsiteEventType.name,
|
||||
typeColor: WebsiteEventType.color,
|
||||
typeSlug: WebsiteEventType.slug,
|
||||
})
|
||||
.from(WebsiteEvent)
|
||||
.innerJoin(WebsiteEventType, eq(WebsiteEvent.typeId, WebsiteEventType.id))
|
||||
.where(inArray(WebsiteEvent.status, ["published", "completed"]))
|
||||
.orderBy(desc(WebsiteEvent.startsAt))
|
||||
.limit(50)
|
||||
.catch(() => []);
|
||||
|
||||
const eventIds = eventRows.map((e) => e.id);
|
||||
const regCounts =
|
||||
eventIds.length > 0
|
||||
? await db
|
||||
.select({
|
||||
eventId: WebsiteEventRegistration.eventId,
|
||||
value: count(),
|
||||
})
|
||||
.from(WebsiteEventRegistration)
|
||||
.where(inArray(WebsiteEventRegistration.eventId, eventIds))
|
||||
.groupBy(WebsiteEventRegistration.eventId)
|
||||
.catch(() => [])
|
||||
: [];
|
||||
const countByEvent = new Map(
|
||||
regCounts.map((r) => [r.eventId, Number(r.value)]),
|
||||
const params = await searchParams;
|
||||
const session = await auth();
|
||||
const currentWeek = new Date();
|
||||
currentWeek.setUTCDate(
|
||||
currentWeek.getUTCDate() - ((currentWeek.getUTCDay() + 6) % 7),
|
||||
);
|
||||
|
||||
const events = eventRows.map((event) => ({
|
||||
...event,
|
||||
type: {
|
||||
name: event.typeName,
|
||||
color: event.typeColor,
|
||||
slug: event.typeSlug,
|
||||
},
|
||||
_count: { registrations: countByEvent.get(event.id) ?? 0 },
|
||||
}));
|
||||
|
||||
const weeklyHref = (offset: number) => {
|
||||
const date = new Date(
|
||||
result?.week ? `${result.week}T00:00:00Z` : currentWeek,
|
||||
);
|
||||
date.setUTCDate(date.getUTCDate() + offset * 7);
|
||||
return (
|
||||
"/events?" +
|
||||
new URLSearchParams({
|
||||
status: result?.status ?? "all",
|
||||
mine: params.mine ?? "",
|
||||
week: date.toISOString().slice(0, 10),
|
||||
})
|
||||
);
|
||||
};
|
||||
const result = await loadPublicEvents({
|
||||
status: params.status,
|
||||
week: params.week,
|
||||
mine: params.mine === "1",
|
||||
userId: Number(session?.user?.id) || undefined,
|
||||
page: Number(params.page ?? 1),
|
||||
}).catch((error) => {
|
||||
logger.error("Public events query failed", { module: "events", error });
|
||||
return null;
|
||||
});
|
||||
const events = result?.events ?? [];
|
||||
const href = (page: number) =>
|
||||
`/events?${new URLSearchParams({ status: result?.status ?? "all", week: result?.week ?? "", mine: params.mine ?? "", page: String(page) })}`;
|
||||
return (
|
||||
<main className="page-grid">
|
||||
<ContentCard icon="📅" title={t("title")} subtitle={t("subtitle")} />
|
||||
|
||||
<ContentCard>
|
||||
<form action="/events" className="flex flex-wrap items-end gap-3">
|
||||
<label className="flex flex-col gap-1">
|
||||
{t("filterStatus")}
|
||||
<select
|
||||
name="status"
|
||||
defaultValue={result?.status ?? "all"}
|
||||
className="input"
|
||||
>
|
||||
<option value="all">{t("allEvents")}</option>
|
||||
<option value="ongoing">{t("statusOngoing")}</option>
|
||||
<option value="upcoming">{t("statusUpcoming")}</option>
|
||||
<option value="completed">{t("statusCompleted")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label className="flex flex-col gap-1">
|
||||
{t("weekStarting")}
|
||||
<input
|
||||
name="week"
|
||||
type="date"
|
||||
defaultValue={result?.week ?? ""}
|
||||
className="input"
|
||||
/>
|
||||
</label>
|
||||
{session?.user && (
|
||||
<label className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="mine"
|
||||
value="1"
|
||||
defaultChecked={params.mine === "1"}
|
||||
/>
|
||||
{t("myRegistrations")}
|
||||
</label>
|
||||
)}
|
||||
<button type="submit" className="btn btn-primary">
|
||||
{t("apply")}
|
||||
</button>
|
||||
<Link href="/events" className="btn">
|
||||
{t("reset")}
|
||||
</Link>
|
||||
</form>
|
||||
<nav aria-label={t("weeklyView")} className="mt-3 flex flex-wrap gap-3">
|
||||
{result?.week ? (
|
||||
<>
|
||||
<Link className="btn" href={weeklyHref(-1)}>
|
||||
{t("previousWeek")}
|
||||
</Link>
|
||||
<span>{result.week}</span>
|
||||
<Link className="btn" href={weeklyHref(1)}>
|
||||
{t("nextWeek")}
|
||||
</Link>
|
||||
</>
|
||||
) : (
|
||||
<Link className="btn" href={weeklyHref(0)}>
|
||||
{t("weeklyView")}
|
||||
</Link>
|
||||
)}
|
||||
</nav>
|
||||
<p className="muted mt-3 text-sm">{t("timeZoneHint")}</p>
|
||||
{params.mine === "1" && !session?.user && (
|
||||
<p>{t("loginForRegistrations")}</p>
|
||||
)}
|
||||
</ContentCard>
|
||||
<ContentCard padded={events.length === 0}>
|
||||
{events.length === 0 ? (
|
||||
{!result ? (
|
||||
<p role="alert">{t("loadError")}</p>
|
||||
) : events.length === 0 ? (
|
||||
<EmptyState icon="📅">{t("empty")}</EmptyState>
|
||||
) : (
|
||||
<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
|
||||
@@ -150,9 +207,8 @@ export default async function EventsPage() {
|
||||
style={{ margin: 0, fontSize: "0.75rem" }}
|
||||
>
|
||||
{event.type.name}
|
||||
{event.status === "completed"
|
||||
? ` · ${t("statusCompleted")}`
|
||||
: ""}
|
||||
{` · ${t(event.phase === "completed" ? "statusCompleted" : event.phase === "upcoming" ? "statusUpcoming" : "statusOngoing")}`}{" "}
|
||||
{event.registered && ` · ${t("youRegistered")}`}
|
||||
</p>
|
||||
<h3 style={{ margin: 0, fontSize: "1.05rem" }}>
|
||||
{event.title}
|
||||
@@ -161,7 +217,7 @@ export default async function EventsPage() {
|
||||
className="muted"
|
||||
style={{ margin: 0, fontSize: "0.85rem" }}
|
||||
>
|
||||
{formatDate(event.startsAt, "datetime", "")}
|
||||
<LocalEventTime value={event.startsAt.toISOString()} />
|
||||
</p>
|
||||
<p
|
||||
style={{
|
||||
@@ -185,6 +241,36 @@ export default async function EventsPage() {
|
||||
</div>
|
||||
)}
|
||||
</ContentCard>
|
||||
{result && (
|
||||
<ContentCard>
|
||||
<nav
|
||||
aria-label={t("pagination")}
|
||||
className="flex flex-wrap items-center justify-between gap-3"
|
||||
>
|
||||
{result.page > 1 ? (
|
||||
<Link href={href(result.page - 1)} className="btn">
|
||||
{t("previous")}
|
||||
</Link>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<span>
|
||||
{t("pageSummary", {
|
||||
page: result.page,
|
||||
pages: result.lastPage,
|
||||
total: result.total,
|
||||
})}
|
||||
</span>
|
||||
{result.page < result.lastPage ? (
|
||||
<Link href={href(result.page + 1)} className="btn">
|
||||
{t("next")}
|
||||
</Link>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</nav>
|
||||
</ContentCard>
|
||||
)}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user