61 lines
3.8 KiB
TypeScript
61 lines
3.8 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { habitRequest, type TodayHabit } from "../lib/dashboard";
|
|
import { Button, Checkbox } from "./design-system/primitives";
|
|
import { Field } from "./design-system/Field";
|
|
|
|
export function CheckInEditor({ habitId, date, disabled, onSaved, onExpired }: {
|
|
habitId: string; date: string; disabled?: boolean; onSaved: () => void; onExpired?: () => void;
|
|
}) {
|
|
const [day, setDay] = useState<TodayHabit | null>(null);
|
|
const [count, setCount] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [notice, setNotice] = useState("");
|
|
const [busy, setBusy] = useState(false);
|
|
const [attempt, setAttempt] = useState(0);
|
|
const saving = useRef(false);
|
|
const expired = useRef(onExpired); expired.current = onExpired;
|
|
useEffect(() => {
|
|
const controller = new AbortController();
|
|
setDay(null); setError("");
|
|
habitRequest<TodayHabit>(`/habits/${habitId}/days/${date}`, { signal: controller.signal })
|
|
.then(value => { if (!controller.signal.aborted) { setDay(value); setCount(String(value.value)); } })
|
|
.catch(error => { if (!controller.signal.aborted) {
|
|
if (error.message.includes("session has expired")) expired.current?.();
|
|
setError(error.message);
|
|
} });
|
|
return () => controller.abort();
|
|
}, [habitId, date, attempt]);
|
|
async function save(body: { count: number } | { done: boolean }, taskId?: string) {
|
|
if (saving.current || disabled) return;
|
|
saving.current = true; setBusy(true); setError(""); setNotice("");
|
|
try {
|
|
const result = await habitRequest<TodayHabit>(`/habits/${habitId}/days/${date}/${taskId ? `tasks/${taskId}` : "progress"}`, {
|
|
method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
|
|
});
|
|
setDay(result); setCount(String(result.value)); setNotice(`Saved check-in for ${date}.`); onSaved();
|
|
} catch (error) {
|
|
const message = error instanceof Error ? error.message : "Could not save. Try again.";
|
|
setError(message); if (message.includes("session has expired")) expired.current?.();
|
|
} finally { saving.current = false; setBusy(false); }
|
|
}
|
|
return <div className="ds-inline-item-form" aria-label={`Check-in for ${date}`}>
|
|
<p className="type-ui-heading">Check-in · {date}</p>
|
|
{error && <p role="alert">{error}</p>}
|
|
{!day ? error ? <Button onClick={() => setAttempt(value => value + 1)}>Retry check-in</Button> : <p role="status">Loading check-in…</p>
|
|
: day.future ? <p>Future check-ins cannot be edited.</p>
|
|
: !day.due ? <p>Nothing was scheduled for this date.</p>
|
|
: <>
|
|
<p className="type-small">{day.name} · {day.timezone}. Changes use the requirements saved for this date.</p>
|
|
{day.method === "count" ? <form onSubmit={event => { event.preventDefault(); void save({ count: Number(count) }); }}>
|
|
<Field label={`Count (${day.unit}, target ${day.target})`}>
|
|
{id => <input id={id} type="number" min={0} max={1000000000} step={1} required value={count} disabled={busy || disabled} onChange={event => setCount(event.target.value)} />}
|
|
</Field>
|
|
{day.carriedFrom && <p className="type-small">Includes carryover from {day.carriedFrom}. Saving sets this day's total.</p>}
|
|
<Button type="submit" disabled={busy || disabled}>{busy ? "Saving…" : "Save check-in"}</Button>
|
|
</form> : day.method === "manual" ? <Checkbox label="Completed on this date" checked={day.complete} disabled={busy || disabled} onChange={event => void save({ done: event.target.checked })} />
|
|
: day.tasks.map(task => <Checkbox key={task.taskId} label={task.name} checked={task.done} disabled={busy || disabled} onChange={event => void save({ done: event.target.checked }, task.taskId)} />)}
|
|
</>}
|
|
<p role="status">{notice}</p>
|
|
</div>;
|
|
}
|