Calendars, date ranges and time zones

import type { MonthGridDay, TimeZone, Weekday } from "@sdxc/dates";

import { addMonths, endOfDay, fromDayKey, monthGrid, toDayKey } from "@sdxc/dates";
import { isSuccess } from "@sdxc/result";

export interface CalendarMonth {
	date: Date;
	weeks: MonthGridDay[][];
	interval: { start: Date; end: Date };
	previous: string;
	next: string;
}

function monthKey(date: Date, timeZone: TimeZone) {
	return toDayKey(date, timeZone).slice(0, 7);
}

export function calendarMonth(
	param: string | null,
	timeZone: TimeZone,
	weekStartsOn: Weekday = 1,
): CalendarMonth {
	let first = param === null ? null : fromDayKey(`${param}-01`, timeZone);
	let date = first !== null && isSuccess(first) ? first.data : new Date();

	let weeks = monthGrid(date, { weekStartsOn, timeZone });
	let days = weeks.flat();

	return {
		date,
		weeks,
		interval: {
			start: days[0]?.date ?? date,
			end: endOfDay(days.at(-1)?.date ?? date, timeZone),
		},
		previous: monthKey(addMonths(date, -1, timeZone), timeZone),
		next: monthKey(addMonths(date, 1, timeZone), timeZone),
	};
}

import { createAction } from "remix/router";

import { calendarMonth } from "~/app/calendar/month";
import { Events } from "~/app/data/events";
import { viewerOf } from "~/app/http/viewer";
import { CalendarPage } from "~/resources/views/calendar";
import routes from "~/routes/web";

export default createAction(routes.calendar, async (ctx) => {
	let viewer = viewerOf(ctx.request);
	let month = calendarMonth(ctx.url.searchParams.get("month"), viewer.timeZone);
	let events = await Events.between(ctx.db, month.interval);

	return ctx.render(<CalendarPage month={month} events={events} viewer={viewer} />);
});

import type { Handle } from "remix/component";

import { formatParts, formatWeekday, toDayKey } from "@sdxc/dates";
import { fg } from "@sdxc/u/color";
import { grid, gridTemplate, vstack } from "@sdxc/u/layout";
import { LinkButton } from "@sdxc/ui";

import type { CalendarMonth } from "~/app/calendar/month";
import type { Event } from "~/app/data/events";
import type { Viewer } from "~/app/http/viewer";

import routes from "~/routes/web";

interface Props {
	month: CalendarMonth;
	events: Event[];
	viewer: Viewer;
}

export function CalendarPage(handle: Handle<Props>) {
	return () => {
		let { month, events, viewer } = handle.props;
		let { locale, timeZone } = viewer;

		let byDay = new Map<string, Event[]>();
		for (let event of events) {
			let key = toDayKey(event.startsAt, timeZone);
			byDay.set(key, [...(byDay.get(key) ?? []), event]);
		}

		let title = formatParts(month.date, {
			locale,
			timeZone,
			month: "long",
			year: "numeric",
		})
			.map((part) => part.value)
			.join("");

		return (
			<section mix={[vstack({ gap: 4 })]}>
				<h1>{title}</h1>
				<nav>
					<LinkButton
						href={`${routes.calendar.href()}?month=${month.previous}`}
					>
						Previous
					</LinkButton>
					<LinkButton
						href={`${routes.calendar.href()}?month=${month.next}`}
					>
						Next
					</LinkButton>
				</nav>
				<ol
					mix={[
						grid(),
						gridTemplate({ columns: "repeat(7, minmax(0, 1fr))" }),
					]}
				>
					{month.weeks[0]?.map((day) => (
						<li key={day.weekday} aria-hidden="true">
							{formatWeekday(day.weekday, { locale })}
						</li>
					))}
					{month.weeks.flat().map((day) => (
						<li
							key={day.key}
							mix={[fg(day.inMonth ? "neutral" : "neutral.muted")]}
						>
							<time dateTime={day.key}>{day.day}</time>
							<ul>
								{(byDay.get(day.key) ?? []).map((event) => (
									<li key={event.id}>{event.title}</li>
								))}
							</ul>
						</li>
					))}
				</ol>
			</section>
		);
	};
}

import type { DayRange, TimeZone } from "@sdxc/dates";

import {
	addMonths,
	lastNDaysRange,
	monthRange,
	quarterRange,
	subDays,
	toDayKey,
	validateDayRange,
	yearToDateRange,
} from "@sdxc/dates";
import { success } from "@sdxc/result";

export type Preset = "lastMonth" | "last30Days" | "lastQuarter" | "yearToDate";

export function presetRange(preset: Preset, timeZone: TimeZone, now = new Date()) {
	let yesterday = subDays(now, 1);
	switch (preset) {
		case "lastMonth":
			return monthRange(addMonths(now, -1, timeZone), timeZone);
		case "last30Days":
			return lastNDaysRange(30, { from: yesterday, timeZone });
		case "lastQuarter":
			return quarterRange(addMonths(now, -3, timeZone), timeZone);
		case "yearToDate":
			return yearToDateRange(yesterday, timeZone);
	}
}

export function readRange(url: URL, timeZone: TimeZone, now = new Date()) {
	let from = url.searchParams.get("from");
	let to = url.searchParams.get("to");
	if (from === null || to === null) {
		return success<DayRange>(presetRange("lastMonth", timeZone, now));
	}

	let latest = toDayKey(subDays(now, 1), timeZone);
	return validateDayRange({ from, to }, { latest, maxDays: 366 });
}

import type { DayRangeProblem } from "@sdxc/dates";

export const RANGE_PROBLEMS: Record<DayRangeProblem, string> = {
	invalid: "Pick a start and an end date.",
	reversed: "The start date has to come before the end date.",
	tooLate: "Data is available through yesterday.",
	tooLong: "Pick a range of a year or less.",
};

import type { Handle } from "remix/component";

import { timeZonesByRegion } from "@sdxc/dates";
import { Select } from "@sdxc/ui";

export function TimeZoneSelect(handle: Handle<{ selected: string }>) {
	return () => {
		let { selected } = handle.props;

		return (
			<Select name="timeZone" aria-label="Time zone">
				<Select.Option value="UTC" selected={selected === "UTC"}>
					UTC
				</Select.Option>
				{timeZonesByRegion().map((group) => (
					<Select.Group key={group.region} label={group.region}>
						{group.zones.map((zone) => (
							<Select.Option
								key={zone}
								value={zone}
								selected={zone === selected}
							>
								{zone.replaceAll("_", " ")}
							</Select.Option>
						))}
					</Select.Group>
				))}
			</Select>
		);
	};
}

import { isSupportedTimeZone } from "@sdxc/dates";
import * as s from "remix/data-schema";

export const SETTINGS = s.object({
	timeZone: s
		.string()
		.refine(isSupportedTimeZone, "Pick a time zone from the list"),
});