1+ 'use client' ;
2+
3+ import { ServiceError } from "@/lib/serviceError" ;
4+ import { unwrapServiceError } from "@/lib/utils" ;
5+ import { useQuery } from "@tanstack/react-query" ;
6+ import { Loader2 } from "lucide-react" ;
7+ import { RepoInfo } from "../types" ;
8+ import { SearchBar } from "@/app/[domain]/components/searchBar" ;
9+ import { SyntaxGuideProvider } from "@/app/[domain]/components/syntaxGuideProvider" ;
10+
11+ const REINDEX_INTERVAL_MS = 2000 ;
12+
13+ interface Props {
14+ initialRepoInfo : RepoInfo ;
15+ }
16+
17+ export function RepoStatusDisplay ( { initialRepoInfo } : Props ) {
18+ const { data : repoInfo , isError } = useQuery ( {
19+ queryKey : [ 'repo-status' , initialRepoInfo . id ] ,
20+ queryFn : ( ) => unwrapServiceError ( getRepoStatus ( initialRepoInfo . id ) ) ,
21+ initialData : initialRepoInfo ,
22+ refetchInterval : ( query ) => {
23+ const repo = query . state . data ;
24+
25+ // If repo has been indexed before (indexedAt is not null), stop polling
26+ if ( repo ?. isIndexed ) {
27+ return false ;
28+ }
29+
30+ return REINDEX_INTERVAL_MS ;
31+ } ,
32+ } ) ;
33+
34+ if ( isError ) {
35+ // todo
36+ return null ;
37+ }
38+
39+ if ( ! repoInfo . isIndexed ) {
40+ // Loading spinner only for first-time indexing (indexedAt is null)
41+ return (
42+ < div className = "flex flex-col items-center justify-center min-h-[400px] p-4" >
43+ < Loader2 className = "w-12 h-12 animate-spin text-primary mb-4" />
44+ < h2 className = "text-2xl font-semibold mb-2" >
45+ Indexing in progress...
46+ </ h2 >
47+ < p className = "text-muted-foreground text-center" >
48+ This may take a few minutes. The page will update automatically.
49+ </ p >
50+ </ div >
51+ ) ;
52+ }
53+
54+ return (
55+ < div >
56+ < pre className = "p-4" >
57+ { JSON . stringify ( {
58+ status : 'indexed' ,
59+ repo : {
60+ id : repoInfo . id ,
61+ name : repoInfo . name ,
62+ displayName : repoInfo . displayName ,
63+ }
64+ } , null , 2 ) }
65+ </ pre >
66+ < SyntaxGuideProvider >
67+ < SearchBar
68+ size = "sm"
69+ defaults = { {
70+ query : `repo:^${ repoInfo . name } $` ,
71+ } }
72+ autoFocus
73+ />
74+ </ SyntaxGuideProvider >
75+ </ div >
76+ ) ;
77+ }
78+
79+ const getRepoStatus = async ( repoId : number ) : Promise < RepoInfo | ServiceError > => {
80+ const result = await fetch (
81+ `/api/repo-status/${ repoId } ` ,
82+ {
83+ method : 'GET' ,
84+ headers : {
85+ 'Content-Type' : 'application/json' ,
86+ } ,
87+ }
88+ ) . then ( response => response . json ( ) ) ;
89+ return result as RepoInfo | ServiceError ;
90+ }
0 commit comments