File size: 2,072 Bytes
fbf73ff |
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 |
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>
)
}
|