Spaces:
Runtime error
Runtime error
| import { useEffect, useMemo, useRef, useState } from "react"; | |
| /** A post's time as the user picked it: their own wall clock, "2026-10-07T11:00", always on :00 or :30. The backend | |
| * reads it in their time zone (userTimeZone) and stores UTC. */ | |
| export type Wall = string; | |
| const pad = (n: number) => String(n).padStart(2, "0"); | |
| const dayKey = (d: Date) => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; | |
| export const userTimeZone = (): string => Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC"; | |
| export function toWall(d: Date): Wall { | |
| return `${dayKey(d)}T${pad(d.getHours())}:${pad(d.getMinutes())}`; | |
| } | |
| /** The wall time as a Date in this browser (which is in the user's zone). */ | |
| export function wallToDate(w: Wall): Date { | |
| const [day, time] = w.split("T"); | |
| const [y, m, d] = day.split("-").map(Number); | |
| const [h, min] = time.split(":").map(Number); | |
| return new Date(y, m - 1, d, h, min); | |
| } | |
| /** The next half hour from now (11:07 -> 11:30). */ | |
| export function nextSlot(from = new Date()): Date { | |
| const d = new Date(from); | |
| d.setSeconds(0, 0); | |
| d.setMinutes(d.getMinutes() < 30 ? 30 : 60); | |
| return d; | |
| } | |
| export const onSlot = (d: Date) => d.getMinutes() % 30 === 0 && d.getSeconds() === 0; | |
| /** Weeks start on Monday: the 6 weeks around the month. */ | |
| export function monthGrid(month: Date): Date[] { | |
| const first = new Date(month.getFullYear(), month.getMonth(), 1); | |
| const offset = (first.getDay() + 6) % 7; | |
| return Array.from({ length: 42 }, (_, i) => new Date(first.getFullYear(), first.getMonth(), 1 - offset + i)); | |
| } | |
| /** "GMT+5" for the zone right now. */ | |
| function zoneOffset(): string { | |
| const part = new Intl.DateTimeFormat(undefined, { timeZoneName: "short" }).formatToParts(new Date()) | |
| .find((p) => p.type === "timeZoneName"); | |
| return part?.value ?? ""; | |
| } | |
| const WEEKDAYS = ["M", "T", "W", "T", "F", "S", "S"]; | |
| const SLOTS = Array.from({ length: 48 }, (_, i) => `${pad(Math.floor(i / 2))}:${i % 2 ? "30" : "00"}`); | |
| /** When a post goes out: a day on a small month calendar and one of the day's 48 half hours, in the user's own time | |
| * zone (named under it). Past days and past slots are disabled. */ | |
| export function SlotPicker({ value, onChange }: { value: Wall; onChange: (w: Wall) => void }) { | |
| const picked = wallToDate(value); | |
| const [open, setOpen] = useState(false); | |
| const [month, setMonth] = useState(() => new Date(picked.getFullYear(), picked.getMonth(), 1)); | |
| const days = useMemo(() => monthGrid(month), [month]); | |
| const now = new Date(); | |
| const today = dayKey(now); | |
| const pickedDay = value.split("T")[0]; | |
| const pickedTime = value.split("T")[1]; | |
| const thisMonth = new Date(now.getFullYear(), now.getMonth(), 1); | |
| const times = useRef<HTMLDivElement>(null); | |
| // Opened: the time list scrolls (itself only) to the picked slot. | |
| useEffect(() => { | |
| const list = times.current; | |
| const on = list?.querySelector<HTMLElement>(".slot-time.on"); | |
| if (list && on) list.scrollTop = on.offsetTop - list.clientHeight / 2 + on.clientHeight / 2; | |
| }, [open, pickedDay]); | |
| const slotDate = (day: string, time: string) => wallToDate(`${day}T${time}`); | |
| /** A day keeps its slot when it's still ahead there, else takes the day's first one still ahead. */ | |
| const pickDay = (d: Date) => { | |
| const day = dayKey(d); | |
| const time = slotDate(day, pickedTime) > now ? pickedTime : SLOTS.find((t) => slotDate(day, t) > now); | |
| if (time) onChange(`${day}T${time}`); | |
| }; | |
| const label = picked.toLocaleString(undefined, { weekday: "short", month: "short", day: "numeric", hour: "numeric", | |
| minute: "2-digit" }); | |
| return ( | |
| <div className="slot-picker"> | |
| <button type="button" className="input input-sm slot-trigger" aria-expanded={open} onClick={() => setOpen(!open)}> | |
| {label} | |
| </button> | |
| <span className="muted small">Your time zone: {userTimeZone()}{zoneOffset() ? ` (${zoneOffset()})` : ""}</span> | |
| {open && ( | |
| <div className="slot-panel"> | |
| <div className="slot-cal"> | |
| <div className="slot-cal-head"> | |
| <button type="button" className="btn btn-small" aria-label="Previous month" | |
| disabled={month <= thisMonth} | |
| onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1))}>‹</button> | |
| <strong>{month.toLocaleDateString(undefined, { month: "long", year: "numeric" })}</strong> | |
| <button type="button" className="btn btn-small" aria-label="Next month" | |
| onClick={() => setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1))}>›</button> | |
| </div> | |
| <div className="slot-days" role="grid"> | |
| {WEEKDAYS.map((w, i) => <span key={i} className="slot-weekday muted small">{w}</span>)} | |
| {days.map((d) => { | |
| const key = dayKey(d); | |
| const past = key < today; | |
| return ( | |
| <button key={key} type="button" disabled={past} | |
| className={`slot-day${d.getMonth() !== month.getMonth() ? " out" : ""}${key === today ? " today" : ""}${key === pickedDay ? " on" : ""}`} | |
| aria-pressed={key === pickedDay} onClick={() => pickDay(d)}> | |
| {d.getDate()} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| <div className="slot-times" role="listbox" aria-label="Time" ref={times}> | |
| {SLOTS.map((t) => { | |
| const at = slotDate(pickedDay, t); | |
| const on = t === pickedTime; | |
| return ( | |
| <button key={t} type="button" role="option" aria-selected={on} disabled={at <= now} | |
| className={`slot-time${on ? " on" : ""}`} | |
| onClick={() => { | |
| onChange(`${pickedDay}T${t}`); | |
| setOpen(false); | |
| }}> | |
| {at.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit" })} | |
| </button> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| ); | |
| } | |