refactor: replace fetch-in-useEffect with useQuery for repo list

Added useRepos hook to useCachedQuery.ts:
- Uses React Query with refetchInterval: 30s (replaces setInterval)
- Request deduplication, caching, loading/error states for free
- Returns invalidate() function for manual refresh after mutations

DashboardHome.tsx:
- Removed manual useState for repos and reposLoading
- Removed fetchRepos function and its useEffect + setInterval
- Replaced all fetchRepos() calls with refreshRepos() (invalidate)
- Reduced component by ~20 lines of manual data fetching code

Closes OPE-30

Author: DevanshuNEU

frontend/bun.lock

@@ -7,6 +7,8 @@
     "dev": "vite --host",
     "build": "vite build",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -48,13 +50,18 @@
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@vitejs/plugin-react": "^4.7.0",
     "autoprefixer": "^10.4.16",
+    "jsdom": "^28.1.0",
     "postcss": "^8.4.32",
     "tailwindcss": "^3.4.0",
     "typescript": "^5.9.3",
-    "vite": "^6.4.1"
+    "vite": "^6.4.1",
+    "vitest": "^4.0.18"
   }
 }

frontend/package.json

@@ -30,6 +30,7 @@ import { UpgradeLimitModal } from '../UpgradeLimitModal'
 import type { Repository } from '../../types'
 import type { GitHubRepo } from '../../hooks/useGitHubRepos'
 import { API_URL } from '../../config/api'
+import { useRepos, useInvalidateRepoCache } from '../../hooks/useCachedQuery'
 
 const MAX_FREE_REPOS = 3
 
@@ -72,11 +73,10 @@ type RepoTab = 'overview' | 'search' | 'dependencies' | 'insights' | 'impact'
 export function DashboardHome() {
   const { session } = useAuth()
   const [searchParams, setSearchParams] = useSearchParams()
-  const [repos, setRepos] = useState<Repository[]>([])
+  const { data: repos = [], isLoading: reposLoading, invalidate: refreshRepos } = useRepos(session?.access_token)
   const [selectedRepo, setSelectedRepo] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<RepoTab>('overview')
   const [loading, setLoading] = useState(false)
-  const [reposLoading, setReposLoading] = useState(true)
   const [showAddForm, setShowAddForm] = useState(false)
   const [showGitHubSelector, setShowGitHubSelector] = useState(false)
 
@@ -103,27 +103,6 @@ export function DashboardHome() {
     }
   }, [searchParams, setSearchParams])
 
-  const fetchRepos = async () => {
-    if (!session?.access_token) return
-    try {
-      const response = await fetch(`${API_URL}/repos`, {
-        headers: { 'Authorization': `Bearer ${session.access_token}` }
-      })
-      const data = await response.json()
-      setRepos(data.repositories || [])
-    } catch (error) {
-      console.error('Error fetching repos:', error)
-    } finally {
-      setReposLoading(false)
-    }
-  }
-
-  useEffect(() => {
-    fetchRepos()
-    const interval = setInterval(fetchRepos, 30000)
-    return () => clearInterval(interval)
-  }, [session])
-
   const handleAddRepo = async (gitUrl: string, branch: string) => {
     try {
       setLoading(true)
@@ -170,7 +149,7 @@ export function DashboardHome() {
       setShowIndexingModal(true)
       setShowAddForm(false)
 
-      await fetchRepos()
+      refreshRepos()
     } catch (error) {
       console.error('Error adding repo:', error)
       toast.error('Failed to add repository', { description: error instanceof Error ? error.message : 'Please check the Git URL and try again' })
@@ -245,11 +224,11 @@ export function DashboardHome() {
     }
 
     setLoading(false)
-    await fetchRepos()
+    refreshRepos()
   }
 
   const handleIndexingComplete = async () => {
-    await fetchRepos()
+    refreshRepos()
     toast.success('Indexing complete!', { description: `${indexingRepoName} is ready for search` })
   }
 

frontend/src/components/dashboard/DashboardHome.tsx

@@ -165,3 +165,35 @@ export function useInvalidateRepoCache() {
     invalidateRepoCache(repoId)
   }
 }
+
+/**
+ * Fetch repos list with 30s auto-refresh.
+ * Replaces manual fetch-in-useEffect + setInterval pattern.
+ */
+export function useRepos(apiKey: string | undefined) {
+  const queryClient = useQueryClient()
+
+  const query = useQuery({
+    queryKey: ['repos'],
+    queryFn: async () => {
+      const data = await fetchWithAuth(`${API_URL}/repos`, apiKey!)
+      return (data.repositories || []) as Array<{
+        id: string
+        name: string
+        url: string
+        status: string
+        file_count: number
+        language: string
+        branch: string
+        created_at: string
+      }>
+    },
+    enabled: !!apiKey,
+    refetchInterval: 30_000,
+    staleTime: 10_000,
+  })
+
+  const invalidate = () => queryClient.invalidateQueries({ queryKey: ['repos'] })
+
+  return { ...query, invalidate }
+}

frontend/src/hooks/useCachedQuery.ts

@@ -0,0 +1,2 @@
+// global test setup -- extends expect with DOM matchers
+import '@testing-library/jest-dom'

frontend/src/test/setup.ts

@@ -0,0 +1,20 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+    include: ['src/**/*.{test,spec}.{ts,tsx}'],
+    css: false,
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+})