File size: 2,098 Bytes
900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b 900a32d e4daa3b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
import { useEffect, useState } from "react";
import { apiClient } from "../api/client";
interface CaseSelectorProps {
selectedCase: string | null;
onSelectCase: (caseId: string) => void;
}
export function CaseSelector({
selectedCase,
onSelectCase,
}: CaseSelectorProps) {
const [cases, setCases] = useState<string[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const abortController = new AbortController();
const fetchCases = async () => {
try {
const data = await apiClient.getCases(abortController.signal);
setCases(data.cases);
} catch (err) {
// Ignore abort errors - component unmounted
if (err instanceof Error && err.name === "AbortError") return;
const message = err instanceof Error ? err.message : "Unknown error";
setError(`Failed to load cases: ${message}`);
} finally {
if (!abortController.signal.aborted) {
setIsLoading(false);
}
}
};
fetchCases();
return () => abortController.abort();
}, []);
if (isLoading) {
return (
<div className="bg-gray-800 rounded-lg p-4">
<p className="text-gray-400">Loading cases...</p>
</div>
);
}
if (error) {
return (
<div className="bg-red-900/50 rounded-lg p-4">
<p className="text-red-300">{error}</p>
</div>
);
}
return (
<div className="bg-gray-800 rounded-lg p-4">
<label className="block text-sm font-medium mb-2">Select Case</label>
<select
value={selectedCase || ""}
onChange={(e) => onSelectCase(e.target.value)}
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-3 py-2
text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="">Choose a case...</option>
{cases.map((caseId) => (
<option key={caseId} value={caseId}>
{caseId}
</option>
))}
</select>
</div>
);
}
|