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 ( +
+ + + +
+ + CITES API: {citesStatus === 'checking' ? 'Checking...' : citesStatus === 'connected' ? 'Connected' : 'Not Connected'} + +
+
+ + {citesStatus === 'connected' + ? 'CITES+ API is connected and working' + : 'CITES+ API is not connected. Please add your API token.'} + +
+
+ + + + +
+ + IUCN API: {iucnStatus === 'checking' ? 'Checking...' : iucnStatus === 'connected' ? 'Connected' : 'Not Connected'} + +
+
+ + {iucnStatus === 'connected' + ? 'IUCN Red List API is connected and working' + : 'IUCN Red List API connection issue. Check the API key.'} + +
+
+
+ ); +} \ No newline at end of file diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index e329216..4af7fc8 100644 --- a/client/src/pages/home.tsx +++ b/client/src/pages/home.tsx @@ -7,6 +7,7 @@ import SearchForm from "@/components/search-form"; import RecentSearches from "@/components/recent-searches"; import ResultsContainer from "@/components/results-container"; import SavedSpecies from "@/components/saved-species"; +import ApiStatus from "@/components/api-status"; export default function Home() { const { toast } = useToast(); @@ -85,6 +86,9 @@ export default function Home() {

CITES+ Species Lookup

+
+ +