54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { useActionState } from "react";
|
|
import { lookupStatus } from "./actions";
|
|
import { NOT_IN_WORKSHOP, type StatusResult } from "../../lib/workshop";
|
|
|
|
function formatWhen(iso: string | null): string {
|
|
if (!iso) return "";
|
|
const date = new Date(iso);
|
|
if (Number.isNaN(date.getTime())) return "";
|
|
return date.toLocaleString("en-LK", { timeZone: "Asia/Colombo" });
|
|
}
|
|
|
|
export function StatusForm() {
|
|
const [state, action, pending] = useActionState<StatusResult | null, FormData>(lookupStatus, null);
|
|
|
|
return (
|
|
<form action={action}>
|
|
<label>
|
|
Phone
|
|
<input name="phone" inputMode="tel" autoComplete="tel" required />
|
|
</label>
|
|
<button type="submit" disabled={pending}>
|
|
Check
|
|
</button>
|
|
{state?.error ? <p className="error">{state.error}</p> : null}
|
|
{state?.message ? <p>{state.message}</p> : null}
|
|
{state && state.bikes.length > 0 ? (
|
|
<ul>
|
|
{state.bikes.map((bike, index) => {
|
|
const when = formatWhen(bike.stageAt);
|
|
return (
|
|
<li key={`${bike.registration}-${index}`}>
|
|
<div>{bike.registration}</div>
|
|
<div>
|
|
{bike.make} {bike.model}
|
|
</div>
|
|
{bike.inWorkshop ? (
|
|
<div>
|
|
{bike.stageLabel}
|
|
{when ? ` · ${when}` : ""}
|
|
</div>
|
|
) : (
|
|
<div>{NOT_IN_WORKSHOP}</div>
|
|
)}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
) : null}
|
|
</form>
|
|
);
|
|
}
|