Function RequestView

frontend/src/components/views/RequestView.tsx:130–313

()

}

export default function RequestView() {
  const [requests, setRequests] = useState<Request[]>([]);
  const [sourceTypes, setSourceTypes] = useState<Record<string, DatabaseType>>({});
  const [toolReadonly, setToolReadonly] = useState<Record<string, boolean>>({});
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [selectedSource, setSelectedSource] = useState<string | null>(null);

  useEffect(() => {
    Promise.all([fetchRequests(), fetchSources()])
      .then(([requestsData, sourcesData]) => {
        setRequests(requestsData.requests);
        const typeMap: Record<string, DatabaseType> = {};
        const readonlyMap: Record<string, boolean> = {};
        for (const source of sourcesData) {
          typeMap[source.id] = source.type;
          for (const tool of source.tools) {
            if (tool.readonly) {
              readonlyMap[tool.name] = true;
            }
          }
        }
        setSourceTypes(typeMap);
        setToolReadonly(readonlyMap);
        setIsLoading(false);
      })
      .catch((err) => {
        console.error('Failed to fetch data:', err);
        const message = err instanceof ApiError ? err.message : 'Failed to load data';
        setError(message);
        setIsLoading(false);
      });
  }, []);

  // Get unique source IDs from requests
  const sourceIds = [...new Set(requests.map((r) => r.sourceId))].sort();

  // Filter requests based on selected source
  const filteredRequests = selectedSource
    ? requests.filter((r) => r.sourceId === selectedSource)
    : requests;

  if (isLoading) {
    return (
      <div className="container mx-auto px-8 py-12">
        <div className="text-muted-foreground">Loading...</div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="container mx-auto px-8 py-12">
        <div className="bg-destructive/10 border border-destructive/20 rounded-lg p-6">
          <h2 className="text-lg font-semibold text-destructive mb-2">Error</h2>
          <p className="text-destructive/90">{error}</p>
        </div>
      </div>