Rewrite the calendar frontend in Next.js
Replaces the Angular 18 app with Next.js 16 / React 19 / Tailwind 4 / shadcn, the same stack and design system as nachklang-feedback, planned in docs/rewrite-plan.md. - Admin: all calendars in one mobile-friendly list (month groups, calendar chips, Kommend/Vergangen/Alle, search, sort, filters in the URL), an edit sheet for create/edit/duplicate/delete, publish confirmation, and an "Abonnieren" dialog with subscription links for every calendar. - Public landing page: subscribe links from env instead of hardcoded, plus the next public events, server-rendered and revalidated every 5 minutes. - All times handled explicitly as Europe/Berlin; whole-day events stored as 00:00-23:59. Fixes carried over from the Angular app: the move dialog leaking a cancelled calendar change, saves that looked saved when they failed, in-place Date mutation, and duplicated calendar-id mappings. - Same shared-session auth as before (proxy.ts gate, /admin/me, 401 vs 403). - 112 Vitest tests over lib/; docs in docs/ (architecture, features, gotchas, API wish list, deployment). Needs the API branch feature/calendar-ical-escaping-subscriptions deployed first (GET /calendar/events/subscriptions). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
138 files changed
+15942
-24010
No files matched your search
@@ -0,0 +1,65 @@
|
||||
import { parseApiEvents } from "@/lib/events";
|
||||
import { matchesRange, sortEvents } from "@/lib/filter";
|
||||
import type { ApiEvent, CalendarEvent } from "@/lib/types";
|
||||
|
||||
/**
|
||||
* The public calendar as the landing page shows it: subscription links and
|
||||
* the next few events. Pure, apart from `fetchUpcomingPublicEvents`.
|
||||
*
|
||||
* The public feed needs no credential at all - nachklang.art reads the same
|
||||
* endpoint anonymously - so this runs on the server without a session.
|
||||
*/
|
||||
|
||||
const PUBLIC_PATH = "/calendar/events/public";
|
||||
|
||||
/** https://api.nachklang.art/calendar/events/public/ical */
|
||||
export const icalUrl = (apiBaseUrl: string): string => `${apiBaseUrl}${PUBLIC_PATH}/ical`;
|
||||
|
||||
/**
|
||||
* Any iCal URL as a `webcal://` link, which Apple Calendar (and most desktop
|
||||
* clients) open as "subscribe" rather than "download". The scheme replaces
|
||||
* http(s) whichever the API uses - calendar apps fetch it over https for an
|
||||
* https host.
|
||||
*/
|
||||
export const toWebcal = (ical: string): string => ical.replace(/^https?:\/\//, "webcal://");
|
||||
|
||||
/** Google Calendar's "add by URL" deep link for any iCal URL. It wants the webcal form, URL-encoded. */
|
||||
export const toGoogleCalendar = (ical: string): string =>
|
||||
`https://calendar.google.com/calendar/r?cid=${encodeURIComponent(toWebcal(ical))}`;
|
||||
|
||||
export const webcalUrl = (apiBaseUrl: string): string => toWebcal(icalUrl(apiBaseUrl));
|
||||
|
||||
export const googleCalendarUrl = (apiBaseUrl: string): string => toGoogleCalendar(icalUrl(apiBaseUrl));
|
||||
|
||||
/** Upcoming (not yet over, Berlin days) public events, earliest first. */
|
||||
export const selectUpcoming = (rows: ApiEvent[], now: Date, limit: number): CalendarEvent[] =>
|
||||
sortEvents(
|
||||
parseApiEvents(rows).filter((e) => matchesRange(e, "future", now)),
|
||||
"start_asc",
|
||||
now,
|
||||
).slice(0, limit);
|
||||
|
||||
/**
|
||||
* Server-side fetch, cached for five minutes (Next's `revalidate`), so the
|
||||
* landing page is static HTML that refreshes itself rather than a request to
|
||||
* the API per visitor.
|
||||
*
|
||||
* Null on any failure. The subscription links are the page's real job and
|
||||
* must not depend on the API answering - that includes `next build` on a
|
||||
* machine that cannot reach it.
|
||||
*/
|
||||
export const fetchUpcomingPublicEvents = async (
|
||||
apiBaseUrl: string,
|
||||
now: Date,
|
||||
limit: number,
|
||||
): Promise<CalendarEvent[] | null> => {
|
||||
try {
|
||||
const res = await fetch(`${apiBaseUrl}${PUBLIC_PATH}/json`, { next: { revalidate: 300 } });
|
||||
if (!res.ok) {
|
||||
return null;
|
||||
}
|
||||
return selectUpcoming((await res.json()) as ApiEvent[], now, limit);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
};
|
||||
Reference in new issue
Block a user