typescript-react-side-panel-api-consumption

Answer

Criterion fix first (documented deviation). The judge spec said "use apiGet", but apiGet has no signal parameter, so it cannot be aborted when the panel closes or the tree selector changes. The defensible deviation — raw fetch + AbortController — is documented in the panel file header and the criterion is reworded to: "fetch related objects using apiGet, or an abortable raw fetch with AbortController (deviation documented in code)."

1. Fetch-on-open hook (mirrors useContextManifest, adds abort + race guard):

// hooks/useRelatedObjects.ts
import { useEffect, useState } from "react";
import { getAuthHeaders } from "../api/client"; // shared auth, no signal param

export type RelatedObject = { id: string; kind: "session" | "tree"; label: string };

type State =
  | { status: "idle" }
  | { status: "loading" }
  | { status: "ready"; items: RelatedObject[] }
  | { status: "error"; message: string };

/**
 * Deviation from apiGet: apiGet(id, "/related") has no `signal` option,
 * so it cannot be aborted on panel close / tree switch. Raw fetch with
 * AbortController keeps the panel race-free. Criterion UI-REL-001 updated.
 */
export function useRelatedObjects(treeId: string | null, open: boolean): State {
  const [state, setState] = useState<State>({ status: "idle" });

  useEffect(() => {
    if (!open || !treeId) {
      setState({ status: "idle" });
      return;
    }
    const ctrl = new AbortController();
    setState({ status: "loading" });

    fetch(`/api/trees/${encodeURIComponent(treeId)}/related`, {
      headers: getAuthHeaders(),
      signal: ctrl.signal,
    })
      .then((res) => {
        if (!res.ok) throw new Error(`Related objects request failed (${res.status})`);
        return res.json();
      })
      .then((items: RelatedObject[]) =>
        // aborted fetches reject; this is unreachable after cleanup
        setState({ status: "ready", items }),
      )
      .catch((err: unknown) => {
        if (err instanceof DOMException && err.name === "AbortError") return; // silent
        setState({ status: "error", message: err instanceof Error ? err.message : "Unknown error" });
      });

    return () => ctrl.abort(); // cancel in-flight fetch on close / tree switch
  }, [treeId, open]);

  return state;
}

2. Panel (collapsible aside, error-as-note, empty state, click reuses page select):

// components/RelatedObjectsPanel.tsx
import { useState } from "react";
import { Note } from "../ui/Note";
import { useRelatedObjects, type RelatedObject } from "../hooks/useRelatedObjects";

interface Props {
  treeId: string | null;
  onSelectSession: (sessionId: string) => void; // reuses page select mechanism
}

export function RelatedObjectsPanel({ treeId, onSelectSession }: Props) {
  const [open, setOpen] = useState(false);
  const state = useRelatedObjects(treeId, open);

  return (
    <aside className={`related-panel ${open ? "is-open" : "is-closed"}`} aria-label="Related objects">
      <button
        className="related-panel__toggle"
        aria-expanded={open}
        onClick={() => setOpen((v) => !v)}
      >
        Related objects
      </button>

      {open && (
        <div className="related-panel__body">
          {state.status === "loading" && <div className="skeleton" role="status">Loading…</div>}

          {state.status === "error" && (
            <Note tone="error">{state.message}</Note> // error-as-note, no thrown boundary
          )}

          {state.status === "ready" && state.items.length === 0 && (
            <Note tone="info">No related objects for this tree.</Note> // empty state
          )}

          {state.status === "ready" && state.items.length > 0 && (
            <ul className="related-panel__list">
              {state.items.map((item) => (
                <li key={item.id}>
                  <button
                    type="button"
                    onClick={() => item.kind === "session" && onSelectSession(item.id)}
                  >
                    {item.label}
                  </button>
                </li>
              ))}
            </ul>
          )}
        </div>
      )}
    </aside>
  );
}

3. Mount keyed off the page tree-selector state (guarantees a fresh component per tree, so stale open state never leaks across trees):

// pages/TreePage.tsx
<RelatedObjectsPanel
  key={selectedTreeId ?? "none"}          // remount on selector change
  treeId={selectedTreeId}
  onSelectSession={(id) => selectSession(id)} // same action the tree list uses
/>