File size: 2,185 Bytes
6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba 6455a01 16339ba |
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 78 |
import { FormControl, InputLabel, Select, MenuItem, SelectChangeEvent, CircularProgress, Box } from '@mui/material';
import { useEffect, useState } from 'react';
interface TopicsProps {
onTopicChange: (topic: string) => void;
}
interface TopicsResponse {
sources: string[];
}
export default function Topics({ onTopicChange }: TopicsProps) {
const [topics, setTopics] = useState<string[]>([]);
const [selectedTopic, setSelectedTopic] = useState('');
const [error, setError] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
const fetchTopics = async () => {
try {
setIsLoading(true);
const response = await fetch('/api/topics');
if (!response.ok) {
throw new Error('Failed to fetch topics');
}
const data: TopicsResponse = await response.json();
if (!data.sources || !Array.isArray(data.sources)) {
throw new Error('Invalid topics data received');
}
setTopics(data.sources);
} catch (error) {
console.error('Error fetching topics:', error);
setError('Failed to load topics');
setTopics([]);
} finally {
setIsLoading(false);
}
};
fetchTopics();
}, []);
const handleChange = (event: SelectChangeEvent) => {
const topic = event.target.value;
setSelectedTopic(topic);
onTopicChange(topic);
};
return (
<FormControl fullWidth sx={{ mb: 2 }}>
<InputLabel>Topic</InputLabel>
<Select
value={selectedTopic}
label="Topic"
onChange={handleChange}
error={!!error}
disabled={isLoading}
>
{isLoading ? (
<MenuItem value="" disabled>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
<CircularProgress size={20} />
Loading topics...
</Box>
</MenuItem>
) : (
Array.isArray(topics) && topics.map((topic) => (
<MenuItem key={topic} value={topic}>
{topic}
</MenuItem>
))
)}
</Select>
</FormControl>
);
} |