Refactor: Improve API status checks using useQuery and dedicated status endpoints.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: e931b5ab-041b-42e7-baf1-50017869cef6
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/e19c6a51-7e4c-4bb8-a6a6-46dc00f0ec99/ce46d8f4-e248-4e5c-b779-b068dd48b0a0.jpg

client/src/components/api-status.tsx

@@ -12,41 +12,51 @@ 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 CITES API status
+  const { 
+    data: citesApiData,
+    isLoading: isCitesLoading
+  } = useQuery({
+    queryKey: ['api-status-check-cites'],
+    queryFn: async () => {
+      return await apiClient.checkCitesApiStatus();
+    },
+    retry: 1,
+    staleTime: 60000, // 1 minute
+  });
   
-  // Check IUCN API status by making a test request
-  const { isError, isSuccess, isLoading } = useQuery({
+  // Check IUCN API status
+  const { 
+    data: iucnApiData,
+    isLoading: isIucnLoading 
+  } = 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");
-      }
+      return await apiClient.checkIucnApiStatus();
     },
     retry: 1,
     staleTime: 60000, // 1 minute
   });
   
   useEffect(() => {
-    if (isLoading) {
-      setIucnStatus('checking');
-    } else if (isError) {
-      setIucnStatus('error');
-    } else if (isSuccess) {
-      setIucnStatus('connected');
+    if (isCitesLoading) {
+      setCitesStatus('checking');
+    } else if (citesApiData?.connected) {
+      setCitesStatus('connected');
+    } else {
+      setCitesStatus('error');
     }
-  }, [isLoading, isError, isSuccess]);
+  }, [isCitesLoading, citesApiData]);
+  
+  useEffect(() => {
+    if (isIucnLoading) {
+      setIucnStatus('checking');
+    } else if (iucnApiData?.connected) {
+      setIucnStatus('connected');
+    } else {
+      setIucnStatus('error');
+    }
+  }, [isIucnLoading, iucnApiData]);
   
   return (
     <div className="flex items-center space-x-2">
@@ -65,7 +75,9 @@ export default function ApiStatus({ citesToken }: ApiStatusProps) {
           <TooltipContent side="bottom">
             {citesStatus === 'connected' 
               ? 'CITES+ API is connected and working' 
-              : 'CITES+ API is not connected. Please add your API token.'}
+              : citesStatus === 'checking'
+                ? 'Checking CITES+ API connection...'
+                : citesApiData?.message || 'CITES+ API is not connected. Please add your API token.'}
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>
@@ -85,7 +97,9 @@ export default function ApiStatus({ citesToken }: ApiStatusProps) {
           <TooltipContent side="bottom">
             {iucnStatus === 'connected' 
               ? 'IUCN Red List API is connected and working' 
-              : 'IUCN Red List API connection issue. Check the API key.'}
+              : iucnStatus === 'checking'
+                ? 'Checking IUCN Red List API connection...'
+                : iucnApiData?.message || 'IUCN Red List API connection issue. Check the API key.'}
           </TooltipContent>
         </Tooltip>
       </TooltipProvider>

client/src/lib/api.ts

@@ -29,6 +29,12 @@ export interface TokenResponse {
   token: string | null;
 }
 
+export interface ApiStatusResponse {
+  success: boolean;
+  connected: boolean;
+  message?: string;
+}
+
 export interface SpeciesSearchResponse {
   taxon_concepts: TaxonConcept[];
   pagination: {
@@ -155,6 +161,38 @@ export interface IucnMeasuresResponse {
 
 // API client for interacting with our backend
 export const apiClient = {
+  // API Status methods
+  async checkIucnApiStatus(): Promise<ApiStatusResponse> {
+    try {
+      const response = await axios.get<ApiStatusResponse>("/api/iucn/status");
+      return response.data;
+    } catch (error: any) {
+      return {
+        success: false,
+        connected: false,
+        message: error.response?.data?.message || "Failed to check IUCN API status"
+      };
+    }
+  },
+  
+  async checkCitesApiStatus(): Promise<ApiStatusResponse> {
+    try {
+      // We'll use the token endpoint to check if the CITES API is accessible
+      const token = await this.getToken();
+      return {
+        success: true,
+        connected: !!token,
+        message: token ? "CITES API is connected" : "CITES API token not found"
+      };
+    } catch (error: any) {
+      return {
+        success: false,
+        connected: false,
+        message: error.response?.data?.message || "Failed to check CITES API status"
+      };
+    }
+  },
+  
   // Token management
   async saveToken(token: string): Promise<ApiResponse<any>> {
     try {