diff --git a/client/src/components/api-status.tsx b/client/src/components/api-status.tsx new file mode 100644 index 0000000..8b91ca9 --- /dev/null +++ b/client/src/components/api-status.tsx @@ -0,0 +1,94 @@ +import { useState, useEffect } from "react"; +import { useQuery } from "@tanstack/react-query"; +import { apiClient } from "@/lib/api"; +import { Badge } from "@/components/ui/badge"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; + +interface ApiStatusProps { + citesToken: string | null; +} + +export default function ApiStatus({ citesToken }: ApiStatusProps) { + const [iucnStatus, setIucnStatus] = useState<'checking' | 'connected' | 'error'>('checking'); + const [citesStatus, setCitesStatus] = useState<'checking' | 'connected' | 'error'>('checking'); + + // Check CITES API status based on token availability + useEffect(() => { + if (citesToken) { + setCitesStatus('connected'); + } else { + setCitesStatus('error'); + } + }, [citesToken]); + + // Check IUCN API status by making a test request + const { isError, isSuccess, isLoading } = useQuery({ + queryKey: ['api-status-check-iucn'], + queryFn: async () => { + try { + // Make a simple request to check if the IUCN API is responding + // Using a well-known species for testing + const response = await apiClient.getIucnSpeciesByName("Panthera leo"); + return response; + } catch (error) { + throw new Error("Failed to connect to IUCN API"); + } + }, + retry: 1, + staleTime: 60000, // 1 minute + }); + + useEffect(() => { + if (isLoading) { + setIucnStatus('checking'); + } else if (isError) { + setIucnStatus('error'); + } else if (isSuccess) { + setIucnStatus('connected'); + } + }, [isLoading, isError, isSuccess]); + + return ( +