@remit/web-client 0.0.231 → 0.0.233

package/src/components/calendar/OpenCalendarEvent.tsx

@@ -1,13 +1,42 @@
+import {
+	type EventDraft,
+	type RecurrenceScope,
+	RecurrenceScopePrompt,
+} from "@remit/ui";
+import { useState } from "react";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
 import { CalendarEventPane } from "@/components/calendar/CalendarEventPane";
+import {
+	type CalendarWriteOutcome,
+	calendarInstanceId,
+	draftFromEvent,
+	patchFromDrafts,
+	rruleFromIcalData,
+	type ScopedWrite,
+	textFromIcalData,
+	textFromRrule,
+	UNZONED_CALENDAR,
+	useCalendarEvent,
+	useCalendars,
+	useCalendarWrites,
+} from "@/hooks/calendar";
 import { useCalendarData } from "@/hooks/useCalendarData";
+import { formatEventWhen } from "@/lib/calendar-format";
 import { useCalendarAddress, useCalendarNavigation } from "@/routing";
 
 /**
- * The event the address names, resolved.
+ * The event the address names, resolved — and everything a reader can do to it.
  *
- * The two event routes — the series and one of its occurrences — differ only in
- * what the address says, so the lookup and the way back live here once rather
- * than in each of them.
+ * The two event routes differ only in what the address says, so the lookup, the
+ * scope question and the way back live here once rather than in each of them.
+ *
+ * An edit or a delete on a repeating event asks which occurrences it means
+ * before the form opens, not on the way out: which instances it reaches changes
+ * what the change is, so it is settled while it can still be answered.
+ *
+ * Every write carries the etag of the version on screen. A 412 means somebody
+ * replaced the event in between, and it is said out loud rather than resolved
+ * by overwriting them.
  */
 export interface OpenCalendarEventProps {
 	calendarObjectId: string;
@@ -15,24 +44,177 @@ export interface OpenCalendarEventProps {
 	recurrenceId?: string;
 }
 
+const CONFLICT =
+	"This event changed somewhere else — over CalDAV, or in another tab. Nothing was saved. Close it and open it again to see the version that's stored now.";
+
+type Intent = "edit" | "delete";
+
 export function OpenCalendarEvent({
 	calendarObjectId,
 	recurrenceId,
 }: OpenCalendarEventProps) {
 	const { view, date, calendarIds } = useCalendarAddress();
-	const { events, calendars } = useCalendarData({ view, date, calendarIds });
+	const { events } = useCalendarData({ view, date, calendarIds });
+	const { calendars, timeZoneByCalendarId } = useCalendars();
 	const { closeEvent } = useCalendarNavigation();
+	const { updateEvent, deleteEvent, isWriting } = useCalendarWrites();
 
-	const event = events.find((candidate) => candidate.id === calendarObjectId);
+	const event = events.find(
+		(candidate) =>
+			candidate.id === calendarInstanceId(calendarObjectId, recurrenceId ?? ""),
+	);
 	const calendar = calendars.find(
 		(candidate) => candidate.id === event?.calendarId,
 	);
+	const { resource } = useCalendarEvent(
+		calendarObjectId,
+		event?.calendarId ?? "",
+	);
+
+	const [asking, setAsking] = useState<Intent | undefined>(undefined);
+	const [editing, setEditing] = useState<
+		{ before: EventDraft; scope: RecurrenceScope | undefined } | undefined
+	>(undefined);
+	const [draft, setDraft] = useState<EventDraft | undefined>(undefined);
+	const [problem, setProblem] = useState("");
+
+	const stored = resource ? textFromIcalData(resource.icalData) : undefined;
+	const rrule = resource ? rruleFromIcalData(resource.icalData) : "";
+	const startTime = event && !event.allDay ? event.start.slice(11, 16) : "";
+	const repeat =
+		rrule === "" ? "" : (textFromRrule(rrule, startTime) ?? "Repeats");
+
+	// Scoping needs the occurrence to anchor at, so it is offered only where the
+	// address names one. A series opened by itself has one honest answer, which
+	// is the whole of it.
+	const canScope =
+		event !== undefined &&
+		event.seriesId !== "" &&
+		recurrenceId !== undefined &&
+		recurrenceId !== "";
+	// Until the resource is read there is no etag, and a write with no etag is a
+	// write that can silently overwrite somebody.
+	const writable = event !== undefined && resource !== undefined;
+
+	const settle = (outcome: CalendarWriteOutcome, done: () => void) => {
+		if (outcome.kind === "written") {
+			setProblem("");
+			done();
+			return;
+		}
+		setProblem(outcome.kind === "conflict" ? CONFLICT : outcome.message);
+	};
+
+	const write = (scope: RecurrenceScope | undefined): ScopedWrite => ({
+		calendarObjectId,
+		calendarId: event?.calendarId ?? "",
+		recurrenceId: recurrenceId ?? "",
+		scope,
+		etag: resource?.etag ?? "",
+	});
+
+	const startEdit = (scope: RecurrenceScope | undefined) => {
+		if (!event) return;
+		const before = draftFromEvent(event, {
+			repeat,
+			location: stored?.location ?? "",
+			notes: stored?.description ?? "",
+		});
+		setAsking(undefined);
+		setEditing({ before, scope });
+		setDraft(before);
+		setProblem("");
+	};
+
+	const removeEvent = (scope: RecurrenceScope | undefined) => {
+		setAsking(undefined);
+		void deleteEvent(write(scope)).then((outcome) =>
+			settle(outcome, closeEvent),
+		);
+	};
+
+	const saveEdit = () => {
+		if (!editing || !draft) return;
+		const patch = patchFromDrafts(
+			editing.before,
+			draft,
+			timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
+		);
+		if (!patch.ok) {
+			setProblem(patch.problem);
+			return;
+		}
+		void updateEvent(write(editing.scope), patch.patch).then((outcome) =>
+			settle(outcome, () => {
+				setEditing(undefined);
+				setDraft(undefined);
+			}),
+		);
+	};
+
+	if (asking !== undefined && event) {
+		return (
+			<div className="flex h-full flex-col justify-center bg-surface px-row-inset">
+				<RecurrenceScopePrompt
+					className="mx-auto w-full max-w-md"
+					title={event.title}
+					ruleText={repeat === "" ? "It repeats" : repeat}
+					instanceText={formatEventWhen(event)}
+					onChoose={asking === "edit" ? startEdit : removeEvent}
+					onCancel={() => setAsking(undefined)}
+				/>
+			</div>
+		);
+	}
+
+	if (editing && draft) {
+		return (
+			<CalendarComposePane
+				title="Edit event"
+				subtitle={
+					editing.scope === "this" ? "This occurrence only" : draft.date
+				}
+				calendars={calendars}
+				draft={draft}
+				onChange={setDraft}
+				problem={problem}
+				saveLabel="Save"
+				isSaving={isWriting}
+				repeatEditable={editing.scope === undefined || editing.scope === "all"}
+				calendarEditable={false}
+				onSave={saveEdit}
+				onCancel={() => {
+					setEditing(undefined);
+					setDraft(undefined);
+					setProblem("");
+				}}
+			/>
+		);
+	}
 
 	return (
 		<CalendarEventPane
-			event={event}
+			event={
+				event && {
+					...event,
+					location: stored?.location ?? "",
+					notes: stored?.description ?? "",
+					recurrenceRule: repeat,
+				}
+			}
 			calendar={calendar}
 			isOccurrence={recurrenceId !== undefined}
+			problem={problem}
+			onEdit={
+				writable
+					? () => (canScope ? setAsking("edit") : startEdit(undefined))
+					: undefined
+			}
+			onDelete={
+				writable
+					? () => (canScope ? setAsking("delete") : removeEvent(undefined))
+					: undefined
+			}
 			onClose={closeEvent}
 		/>
 	);

package/src/components/calendar/WriteCalendarEvent.tsx

@@ -0,0 +1,94 @@
+import type { EventDraft } from "@remit/ui";
+import { useEffect, useState } from "react";
+import { CalendarComposePane } from "@/components/calendar/CalendarComposePane";
+import { useCalendarComposeSeed } from "@/components/calendar/CalendarComposeSeed";
+import {
+	createInputFromDraft,
+	emptyDraft,
+	UNZONED_CALENDAR,
+	useCalendars,
+	useCalendarWrites,
+} from "@/hooks/calendar";
+import { useCalendarAddress } from "@/routing";
+
+/**
+ * Writing a new event.
+ *
+ * The draft starts on the slot the reader dragged out of the grid, or on the
+ * day the calendar is showing when they opened the composer some other way. The
+ * write goes through the same service function every other path uses, so an
+ * event typed here, one accepted from an invitation and one written over CalDAV
+ * are the same bytes stored the same way.
+ */
+export interface WriteCalendarEventProps {
+	onClose: () => void;
+}
+
+export function WriteCalendarEvent({ onClose }: WriteCalendarEventProps) {
+	const { date } = useCalendarAddress();
+	const seed = useCalendarComposeSeed();
+	const { calendars, timeZoneByCalendarId } = useCalendars();
+	const { createEvent, isWriting } = useCalendarWrites();
+	const [problem, setProblem] = useState("");
+	const [draft, setDraft] = useState<EventDraft>(() => {
+		const blank = emptyDraft(seed?.date ?? date, "");
+		if (!seed) return blank;
+		return {
+			...blank,
+			allDay: seed.allDay,
+			startTime: seed.allDay ? "" : seed.startTime,
+			endTime: seed.allDay ? "" : seed.endTime,
+		};
+	});
+
+	// The default calendar is provisioned by the listing itself, so the picker
+	// has one the moment the calendars arrive rather than making the reader
+	// choose before they can type anything.
+	const firstCalendarId = calendars[0]?.id ?? "";
+	useEffect(() => {
+		if (firstCalendarId === "") return;
+		setDraft((current) =>
+			current.calendarId === ""
+				? { ...current, calendarId: firstCalendarId }
+				: current,
+		);
+	}, [firstCalendarId]);
+
+	const save = () => {
+		const built = createInputFromDraft(
+			draft,
+			timeZoneByCalendarId[draft.calendarId] ?? UNZONED_CALENDAR,
+		);
+		if (!built.ok) {
+			setProblem(built.problem);
+			return;
+		}
+		void createEvent(built.input).then((outcome) => {
+			if (outcome.kind === "written") {
+				setProblem("");
+				onClose();
+				return;
+			}
+			setProblem(
+				outcome.kind === "conflict"
+					? "This calendar changed while you were writing. Close the form and try again."
+					: outcome.message,
+			);
+		});
+	};
+
+	return (
+		<CalendarComposePane
+			title="New event"
+			subtitle={draft.date}
+			calendars={calendars}
+			draft={draft}
+			onChange={setDraft}
+			problem={problem}
+			saveLabel="Add"
+			isSaving={isWriting}
+			onSave={save}
+			onCancel={onClose}
+		/>
+	);
+}

package/src/components/calendar/agenda-address.render.test.ts

@@ -0,0 +1,389 @@
+/**
+ * The strip and the address, bound together.
+ *
+ * Three claims, and every one of them is about the URL rather than about
+ * pixels: the strip opens on the day the path names, reaching an end asks for
+ * more days rather than replacing the ones on screen, and the day the reader
+ * scrolls to is written by `replace` — scrolling is not somewhere they went, so
+ * Back belongs to the screen they arrived from and not to every row they
+ * passed. The last one is the reason this suite drives the real router instead
+ * of a callback: a `push` here would bury the way out under a fortnight of
+ * history entries.
+ */
+import assert from "node:assert/strict";
+import { afterEach, describe, it } from "node:test";
+import {
+	calendarEventOperationsListCalendarEventsQueryKey,
+	calendarFreeBusyOperationsListCalendarFreeBusyQueryKey,
+	calendarOperationsListCalendarsQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import {
+	type AnyRouter,
+	createMemoryHistory,
+	createRootRoute,
+	createRoute,
+	createRouter,
+	Outlet,
+	RouterProvider,
+} from "@tanstack/react-router";
+import { act, createElement, type ReactNode } from "react";
+import {
+	calendarWindow,
+	datesInRange,
+	extendRangeEnd,
+	extendRangeStart,
+	rangeAround,
+	weekWindowsOver,
+} from "@/hooks/calendar";
+import { useCalendarData } from "@/hooks/useCalendarData";
+import { useCalendarAddress, useCalendarNavigation } from "@/routing";
+import { createDomHarness, type DomHarness } from "@/test-support/dom";
+import {
+	calendarSearchSchema,
+	calendarViewMountsAgenda,
+} from "../../lib/calendar-route";
+import { stringifySearch } from "../../lib/search-params";
+import { AgendaView } from "./AgendaView";
+
+const DATE = "2026-06-10";
+const WORK = "cal_work";
+const HOME = "cal_home";
+
+const TO_WEEK = "to week";
+
+// The router reads `self` at construction; the shared jsdom globals stop at
+// `window`.
+(globalThis as { self?: typeof globalThis }).self ??= globalThis;
+
+let harness: DomHarness | undefined;
+
+afterEach(() => {
+	harness?.close();
+	harness = undefined;
+});
+
+/** The zoom switch's own binding, beside the strip the route mounts. */
+function CalendarLayout() {
+	const { goToView } = useCalendarNavigation();
+	return createElement(
+		"div",
+		null,
+		createElement(
+			"button",
+			{
+				type: "button",
+				"aria-label": TO_WEEK,
+				onClick: () => goToView("week"),
+			},
+			"Week",
+		),
+		createElement(AgendaView, {
+			density: "comfortable",
+			onPickSlot: () => undefined,
+		}),
+	);
+}
+
+const testRouter = (
+	path: string,
+	component: () => ReactNode = CalendarLayout,
+): AnyRouter => {
+	const rootRoute = createRootRoute({ component: Outlet });
+	const viewRoute = createRoute({
+		getParentRoute: () => rootRoute,
+		path: "/calendar/$view/$date",
+		validateSearch: calendarSearchSchema,
+		component,
+	});
+	// The strip reads whether an event is open, which is a child of this route.
+	const eventRoute = createRoute({
+		getParentRoute: () => viewRoute,
+		path: "$calendarObjectId",
+		component: Outlet,
+	});
+	const instanceRoute = createRoute({
+		getParentRoute: () => eventRoute,
+		path: "$recurrenceId",
+		component: Outlet,
+	});
+	const composerRoute = createRoute({
+		getParentRoute: () => viewRoute,
+		path: "new",
+		component: Outlet,
+	});
+	const routeTree = rootRoute.addChildren([
+		viewRoute.addChildren([
+			eventRoute.addChildren([instanceRoute]),
+			composerRoute,
+		]),
+	]);
+	return createRouter({
+		routeTree,
+		// A list of ticked calendars is repeated params, which is how the app
+		// spells one and what a hand-written link says.
+		stringifySearch,
+		history: createMemoryHistory({ initialEntries: [path] }),
+	}) as unknown as AnyRouter;
+};
+
+/** How many times a case reaches an end, and so how far the strip can go. */
+const REACHES = 8;
+
+/** Every week the strip can reach, given that many pulls at either end. */
+const reachableWeeks = () => {
+	let range = rangeAround(DATE);
+	for (let reach = 0; reach < REACHES; reach += 1) {
+		range = extendRangeEnd(extendRangeStart(range));
+	}
+	return weekWindowsOver(datesInRange(range));
+};
+
+/**
+ * Every week the strip can ask for, answered from the cache. A week nobody
+ * seeded would fire a real request, and what these cases are about is which
+ * weeks get asked for, not what comes back.
+ */
+const seed = (dom: DomHarness) => {
+	dom.queryClient.setQueryData(calendarOperationsListCalendarsQueryKey(), {
+		items: [],
+	});
+	for (const window of reachableWeeks()) {
+		dom.queryClient.setQueryData(
+			calendarEventOperationsListCalendarEventsQueryKey({ query: window }),
+			{ items: [] },
+		);
+		dom.queryClient.setQueryData(
+			calendarFreeBusyOperationsListCalendarFreeBusyQueryKey({
+				query: window,
+			}),
+			{ items: [] },
+		);
+	}
+};
+
+interface Mounted {
+	dom: DomHarness;
+	router: AnyRouter;
+	pushes: number;
+	replaces: number;
+}
+
+const mount = async (path = `/calendar/agenda/${DATE}`): Promise<Mounted> => {
+	const dom = createDomHarness();
+	harness = dom;
+	seed(dom);
+
+	const router = testRouter(path);
+	const counted = { pushes: 0, replaces: 0 };
+	const { push, replace } = router.history;
+	router.history.push = (...args: Parameters<typeof push>) => {
+		counted.pushes += 1;
+		return push(...args);
+	};
+	router.history.replace = (...args: Parameters<typeof replace>) => {
+		counted.replaces += 1;
+		return replace(...args);
+	};
+
+	await router.load();
+	dom.renderApp(createElement(RouterProvider, { router }));
+	await dom.flush();
+
+	return {
+		dom,
+		router,
+		get pushes() {
+			return counted.pushes;
+		},
+		get replaces() {
+			return counted.replaces;
+		},
+	};
+};
+
+/** The one element the strip scrolls; jsdom has no layout, only the event. */
+const scroller = (dom: DomHarness): Element => {
+	const found = dom.query(".overflow-y-auto");
+	if (!found) throw new Error("the strip rendered no scroller");
+	return found;
+};
+
+const scroll = (dom: DomHarness) => {
+	dom.dispatch(scroller(dom), new Event("scroll", { bubbles: false }));
+};
+
+describe("the day the address names", () => {
+	it("is the day the strip opens on", async () => {
+		const { dom } = await mount();
+		assert.match(dom.text(), /Wednesday/, "the header names another day");
+	});
+
+	it("asks for the weeks around it, one request each", async () => {
+		const { dom } = await mount();
+		const asked = eventWindows(dom);
+		const expected = weekWindowsOver(datesInRange(rangeAround(DATE)));
+		assert.deepEqual(
+			asked.map((window) => window.from).sort(),
+			expected.map((window) => window.from).sort(),
+		);
+		for (const window of asked) {
+			const days =
+				(Date.parse(window.to) - Date.parse(window.from)) / 86_400_000;
+			assert.equal(days, 7, "a read covered more than one week");
+		}
+	});
+});
+
+describe("reaching an end of the strip", () => {
+	it("asks for more days without giving up the ones on screen", async () => {
+		const { dom } = await mount();
+		const before = dom.text();
+		assert.doesNotMatch(before, /17 May/);
+
+		scroll(dom);
+		await dom.flush();
+
+		const after = dom.text();
+		assert.match(after, /17 May/, "the days before the window did not arrive");
+		assert.match(after, /9 Jun/, "the days it opened with were thrown away");
+	});
+
+	it("adds week keys rather than widening the one it holds", async () => {
+		const { dom } = await mount();
+		const opening = eventWindows(dom).map((window) => window.from);
+
+		scroll(dom);
+		await dom.flush();
+
+		const after = eventWindows(dom).map((window) => window.from);
+		for (const from of opening) {
+			assert.ok(after.includes(from), `${from} was given up to fetch more`);
+		}
+		assert.ok(after.length > opening.length, "no week was added");
+		assert.ok(
+			after.some((from) => from < opening[0]),
+			"nothing reached further back than the week it opened with",
+		);
+	});
+
+	it("never grows a single read past what the server will answer", async () => {
+		const { dom } = await mount();
+		for (let reach = 0; reach < 6; reach += 1) {
+			scroll(dom);
+			await dom.flush();
+		}
+		for (const window of eventWindows(dom)) {
+			const days =
+				(Date.parse(window.to) - Date.parse(window.from)) / 86_400_000;
+			assert.equal(days, 7, `a read covered ${days} days`);
+		}
+	});
+});
+
+describe("the day the reader scrolled to", () => {
+	it("is written to the path, so a reload comes back to it", async () => {
+		const { dom, router } = await mount();
+		scroll(dom);
+		await dom.wait(600);
+		await dom.flush();
+
+		assert.match(router.state.location.pathname, /^\/calendar\/agenda\//);
+		assert.notEqual(
+			router.state.location.pathname,
+			`/calendar/agenda/${DATE}`,
+			"scrolling left the address on the day it opened",
+		);
+	});
+
+	it("replaces rather than pushes, so Back is still the way out", async () => {
+		const mounted = await mount();
+		scroll(mounted.dom);
+		await mounted.dom.wait(600);
+		await mounted.dom.flush();
+
+		assert.ok(mounted.replaces > 0, "the address was never written");
+		assert.equal(mounted.pushes, 0, "scrolling stacked up history entries");
+	});
+});
+
+describe("dropping into the grid and back out", () => {
+	it("keeps the day and the calendars the reader was looking at", async () => {
+		const { dom, router } = await mount();
+		await act(async () => {
+			await router.navigate({
+				to: "/calendar/$view/$date",
+				params: { view: "agenda", date: DATE },
+				search: { calendarId: [HOME, WORK] },
+			});
+		});
+		await dom.flush();
+
+		dom.click(dom.byLabel(TO_WEEK));
+		await dom.flush();
+
+		assert.equal(router.state.location.pathname, `/calendar/week/${DATE}`);
+		assert.deepEqual(router.state.location.search.calendarId, [HOME, WORK]);
+	});
+});
+
+/**
+ * The layout's own read, bound exactly as the route binds it. Mounted without
+ * the strip, so any window in the cache came from here.
+ */
+function LayoutOnly() {
+	const { view, date, calendarIds } = useCalendarAddress();
+	useCalendarData({
+		view,
+		date,
+		calendarIds,
+		enabled: !calendarViewMountsAgenda(view),
+	});
+	return createElement("div", { "data-testid": "layout-only" });
+}
+
+describe("the layout's own week, at a zoom that does not draw it", () => {
+	const mountLayout = async (view: string): Promise<DomHarness> => {
+		const dom = createDomHarness();
+		harness = dom;
+		seed(dom);
+		const router = testRouter(`/calendar/${view}/${DATE}`, LayoutOnly);
+		await router.load();
+		dom.renderApp(createElement(RouterProvider, { router }));
+		await dom.flush();
+		return dom;
+	};
+
+	it("reads the week the grid draws", async () => {
+		const dom = await mountLayout("week");
+		assert.deepEqual(
+			eventWindows(dom).map((window) => window.from),
+			[calendarWindow("week", DATE).from],
+		);
+	});
+
+	/*
+	 * The strip fetches its own weeks, so this read renders nothing — and the
+	 * address rewrites on every scroll, so leaving it on would ask again, with
+	 * its two neighbours prefetched, all the way down the strip.
+	 */
+	it("asks for nothing at all at the agenda zoom", async () => {
+		const dom = await mountLayout("agenda");
+		assert.deepEqual(eventWindows(dom), []);
+	});
+});
+
+/** The windows the strip currently has `/calendar-events` open on. */
+const eventWindows = (dom: DomHarness): { from: string; to: string }[] =>
+	dom.queryClient
+		.getQueryCache()
+		.getAll()
+		.filter((query) => query.isActive())
+		.map(
+			(query) =>
+				query.queryKey[0] as {
+					_id?: string;
+					query?: { from: string; to: string };
+				},
+		)
+		.filter((key) => key?._id === "calendarEventOperationsListCalendarEvents")
+		.flatMap((key) => (key.query ? [key.query] : []));