feat(frontend): ClaimDrawer root orchestrator with skeleton/error/data states
This commit is contained in:
Tyler
@@ -0,0 +1,176 @@
|
||||
import { useMemo } from "react";
|
||||
import { Dialog, DialogContent } from "@/components/ui/dialog";
|
||||
import { ApiError } from "@/lib/api";
|
||||
import { useClaimDetail } from "@/hooks/useClaimDetail";
|
||||
import { useDrawerKeyboard } from "@/hooks/useDrawerKeyboard";
|
||||
import { ClaimDrawerHeader } from "./ClaimDrawerHeader";
|
||||
import { ValidationPanel } from "./ValidationPanel";
|
||||
import { ServiceLinesTable } from "./ServiceLinesTable";
|
||||
import { DiagnosesList } from "./DiagnosesList";
|
||||
import { PartiesGrid } from "./PartiesGrid";
|
||||
import { RawSegmentsPanel } from "./RawSegmentsPanel";
|
||||
import { MatchedRemitCard } from "./MatchedRemitCard";
|
||||
import { StateHistoryTimeline } from "./StateHistoryTimeline";
|
||||
import { ClaimDrawerSkeleton } from "./ClaimDrawerSkeleton";
|
||||
import { ClaimDrawerError } from "./ClaimDrawerError";
|
||||
|
||||
type ClaimDrawerProps = {
|
||||
/**
|
||||
* Currently-open claim id, or `null` when the drawer is closed.
|
||||
* When `null`, the drawer renders nothing (no DOM) and the keyboard
|
||||
* listener is disabled — per spec §3.4.
|
||||
*/
|
||||
claimId: string | null;
|
||||
/**
|
||||
* Full ordered list of claim ids in the current view. Used to derive
|
||||
* j/k navigation targets without an extra round-trip to the server.
|
||||
* The list must contain the current `claimId` for j/k to do
|
||||
* anything; an unknown id is treated defensively as "navigation
|
||||
* disabled" rather than throwing.
|
||||
*/
|
||||
claims: { id: string }[];
|
||||
/** Fired when the user dismisses the drawer (X button, header close, or Escape). */
|
||||
onClose: () => void;
|
||||
/** Fired when the user navigates via j/k — receives the new claim id. */
|
||||
onNavigate: (newId: string) => void;
|
||||
/** Fired when the user presses `?` to toggle the keyboard-help overlay. */
|
||||
onToggleHelp: () => void;
|
||||
};
|
||||
|
||||
/**
|
||||
* Root claim-detail drawer (SP4).
|
||||
*
|
||||
* Orchestrates three concerns and delegates the rest:
|
||||
*
|
||||
* 1. **Data** — `useClaimDetail(claimId)` returns `{ data, isLoading,
|
||||
* isError, error, refetch }`. The hook short-circuits when
|
||||
* `claimId === null` (no fetch, no loading state) so a closed
|
||||
* drawer is free.
|
||||
*
|
||||
* 2. **Keyboard** — `useDrawerKeyboard` wires j/k/ArrowDown/ArrowUp/
|
||||
* Escape/`?` on `window`. The listener is only attached when the
|
||||
* drawer is open (`enabled: claimId !== null`).
|
||||
*
|
||||
* 3. **Layout** — the dialog shell is the project's `Dialog` primitive
|
||||
* repositioned to the right edge (side-panel style). It exists
|
||||
* mostly for Radix's focus management + portal; the actual
|
||||
* drawer's structure (header + scrollable sections) is composed
|
||||
* from the leaf section components, each of which owns its own
|
||||
* visual language.
|
||||
*
|
||||
* j/k navigation wraps around at both ends (j from last → first; k
|
||||
* from first → last). `useMemo` keeps the navigation callbacks stable
|
||||
* across renders so the keyboard effect doesn't re-subscribe on every
|
||||
* parent update.
|
||||
*/
|
||||
export function ClaimDrawer({
|
||||
claimId,
|
||||
claims,
|
||||
onClose,
|
||||
onNavigate,
|
||||
onToggleHelp,
|
||||
}: ClaimDrawerProps) {
|
||||
const { data, isLoading, isError, error, refetch } = useClaimDetail(claimId);
|
||||
|
||||
// j/k navigation: derive next/prev IDs based on the current claim's
|
||||
// index in the parent list. Wrap around at both ends. If the current
|
||||
// claim isn't in the list (stale deep link, etc.) the callbacks are
|
||||
// no-ops — defensive against bad input from the parent.
|
||||
const { onNext, onPrev } = useMemo(() => {
|
||||
if (claimId === null) {
|
||||
return { onNext: () => {}, onPrev: () => {} };
|
||||
}
|
||||
const idx = claims.findIndex((c) => c.id === claimId);
|
||||
if (idx === -1 || claims.length === 0) {
|
||||
return { onNext: () => {}, onPrev: () => {} };
|
||||
}
|
||||
return {
|
||||
onNext: () => {
|
||||
const nextId = claims[(idx + 1) % claims.length].id;
|
||||
onNavigate(nextId);
|
||||
},
|
||||
onPrev: () => {
|
||||
// Add `claims.length` before the modulo so the negative index
|
||||
// (first → wrap to last) wraps correctly without a separate
|
||||
// branch.
|
||||
const prevId = claims[(idx - 1 + claims.length) % claims.length].id;
|
||||
onNavigate(prevId);
|
||||
},
|
||||
};
|
||||
}, [claimId, claims, onNavigate]);
|
||||
|
||||
useDrawerKeyboard({
|
||||
enabled: claimId !== null,
|
||||
onNext,
|
||||
onPrev,
|
||||
onClose,
|
||||
onToggleHelp,
|
||||
});
|
||||
|
||||
// Closed drawer: render nothing. The Dialog's `open` prop must also
|
||||
// reflect this (so Radix tears down its portal / focus trap), and the
|
||||
// early-return keeps a closed drawer free of any DOM at all.
|
||||
if (claimId === null) return null;
|
||||
|
||||
// Branch the error into the two shapes the spec calls out:
|
||||
// - ApiError(404) → "not_found" (no retry, the claim is gone)
|
||||
// - anything else → "network" (retry available)
|
||||
const errorKind: "not_found" | "network" | null = isError
|
||||
? error instanceof ApiError && error.status === 404
|
||||
? "not_found"
|
||||
: "network"
|
||||
: null;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={claimId !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) onClose();
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
// Right-anchored side panel. We override the Dialog primitive's
|
||||
// default centered positioning (`left-1/2 top-1/2 -translate-x-1/2
|
||||
// -translate-y-1/2`) by re-asserting `right-0 top-0 translate-x-0
|
||||
// translate-y-0`. `h-full` + `rounded-none` + the left border
|
||||
// give it the visual identity of a drawer rather than a modal.
|
||||
// `aria-describedby={undefined}` suppresses the Radix warning
|
||||
// about a missing description — the drawer content is its own
|
||||
// description and there's nothing useful to point at.
|
||||
className="fixed right-0 top-0 h-full w-full max-w-2xl translate-x-0 translate-y-0 rounded-none border-l border-[color:var(--m-border-heavy)] bg-[color:var(--m-surface)] p-0"
|
||||
data-testid="claim-drawer"
|
||||
aria-describedby={undefined}
|
||||
>
|
||||
{isLoading ? (
|
||||
<ClaimDrawerSkeleton />
|
||||
) : errorKind ? (
|
||||
<ClaimDrawerError
|
||||
kind={errorKind}
|
||||
onRetry={() => {
|
||||
void refetch();
|
||||
}}
|
||||
onClose={onClose}
|
||||
/>
|
||||
) : data ? (
|
||||
<div
|
||||
className="flex h-full flex-col overflow-y-auto"
|
||||
data-testid="claim-drawer-content"
|
||||
>
|
||||
<ClaimDrawerHeader claim={data} onClose={onClose} />
|
||||
<div className="flex flex-col divide-y divide-[color:var(--m-border-heavy)]/15">
|
||||
<ValidationPanel validation={data.validation} />
|
||||
<ServiceLinesTable serviceLines={data.serviceLines} />
|
||||
<DiagnosesList diagnoses={data.diagnoses} />
|
||||
<PartiesGrid parties={data.parties} />
|
||||
{data.matchedRemittance ? (
|
||||
<MatchedRemitCard matchedRemittance={data.matchedRemittance} />
|
||||
) : null}
|
||||
<RawSegmentsPanel rawSegments={data.rawSegments} />
|
||||
<StateHistoryTimeline history={data.stateHistory} />
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user