Add useEffect for reactive agency search state and remove debug logs

Author: jamesg8025

frontend/app/search/SearchResults.tsx

@@ -4,6 +4,7 @@ import React, { useState } from "react"
 import { useSearchParams } from "next/navigation"
 import { SearchResponse, AgencyResponse } from "@/utils/api"
 import { useSearch } from "@/providers/SearchProvider"
+import { useEffect } from "react"
 
 type SearchResultsProps = {
   total: number
@@ -21,31 +22,28 @@ const SearchResults = ({ total, results }: SearchResultsProps) => {
   const [agencyLoading, setAgencyLoading] = useState(false)
   const [agencyTotal, setAgencyTotal] = useState(0)
 
-  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
-    setTab(newValue)
+  useEffect(() => {
+    const performAgencySearch = async () => {
+      if (tab !== 3 || !currentQuery) return
 
-     // When Agency tab is clicked
-    if (newValue === 3) {
-      handleAgencySearch()
+      setAgencyLoading(true)
+      try {
+        const response = await searchAgencies({ name: currentQuery })
+        setAgencyResults(response.results || [])
+        setAgencyTotal(response.total || 0)
+      } catch (error) {
+        console.error('Agency search failed:', error)
+        setAgencyResults([])
+        setAgencyTotal(0)
+      } finally {
+        setAgencyLoading(false)
+      }
     }
-  }
-
-  const handleAgencySearch = async () => {
-    if (!currentQuery) return
+    performAgencySearch()
+  }, [currentQuery, tab, searchAgencies])
 
-    setAgencyLoading(true)
-    try {
-      // search by name for now
-      const response = await searchAgencies({ name: currentQuery })
-      setAgencyResults(response.results || [])
-      setAgencyTotal(response.total || 0)
-    } catch (error) {
-      console.error('Agency search failed:', error)
-      setAgencyResults([])
-      setAgencyTotal(0)
-    } finally {
-      setAgencyLoading(false)
-    }
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setTab(newValue)
   }
 
   return (
@@ -160,7 +158,6 @@ const SearchResults = ({ total, results }: SearchResultsProps) => {
               ))}
             </>
             )}
-            <p>Agency tab - {results.length} total results</p>
           </CustomTabPanel>
         </Box>
       )}

frontend/providers/SearchProvider.tsx

@@ -112,14 +112,6 @@ function useHook(): SearchContext {
 
           const apiUrl = `${apiBaseUrl}${API_ROUTES.agencies}?${queryParams.toString()}`
 
-        console.log('====== AGENCY SEARCH DEBUG ======')
-        console.log('apiBaseUrl:', apiBaseUrl)
-        console.log('API_ROUTES.agencies:', API_ROUTES.agencies)
-        console.log('queryParams:', queryParams.toString())
-        console.log('Full apiUrl:', apiUrl)
-        console.log('Has accessToken:', !!accessToken)
-        console.log('================================')
-
           const response = await apiFetch(apiUrl, {
             method: "GET",
             headers: {