fetch options when select opens after 30 sec that he was close expat for the first time

Author: Anchel123

app/components/code-graph.tsx

@@ -21,6 +21,7 @@ interface Props {
     onFetchGraph: (graphName: string) => void,
     onFetchNode: (nodeIds: string[]) => Promise<any[]>,
     options: string[]
+    setOptions: Dispatch<SetStateAction<string[]>>
     isShowPath: boolean
     setPath: Dispatch<SetStateAction<Path | undefined>>
     chartRef: MutableRefObject<cytoscape.Core | null>
@@ -119,6 +120,7 @@ export function CodeGraph({
     onFetchGraph,
     onFetchNode,
     options,
+    setOptions,
     isShowPath,
     setPath,
     chartRef,
@@ -397,6 +399,7 @@ export function CodeGraph({
             <header className="flex flex-col gap-4">
                 <Combobox
                     options={options}
+                    setOptions={setOptions}
                     selectedValue={graphName}
                     onSelectedValue={handleSelectedValue}
                 />

app/components/combobox.tsx

@@ -1,15 +1,56 @@
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { toast } from "@/components/ui/use-toast";
+import { useEffect, useState } from "react";
 
 interface Props {
     options: string[]
+    setOptions: (options: string[]) => void
     selectedValue: string
     onSelectedValue: (value: string) => void
 
 }
 
-export default function Combobox({ options, selectedValue, onSelectedValue }: Props) {
+export default function Combobox({ options, setOptions, selectedValue, onSelectedValue }: Props) {
+
+    const [open, setOpen] = useState(false)
+    const [lastOpened, setLastOpened] = useState<number>();
+
+    const fetchOptions = async () => {
+        const result = await fetch(`/api/repo`, {
+            method: 'GET',
+        })
+
+        if (!result.ok) {
+            toast({
+                variant: "destructive",
+                title: "Uh oh! Something went wrong.",
+                description: await result.text(),
+            })
+            return
+        }
+
+        const json = await result.json()
+        setOptions(json.result)
+    }
+
+    useEffect(() => {
+        fetchOptions()
+    }, [])
+
+    useEffect(() => {
+        if (!open) return
+
+        const now = Date.now();
+
+        if (lastOpened && now - lastOpened < 30000) return;
+
+        setLastOpened(now);
+
+        fetchOptions()
+    }, [open])
+
     return (
-        <Select value={selectedValue} onValueChange={onSelectedValue}>
+        <Select open={open} onOpenChange={setOpen} value={selectedValue} onValueChange={onSelectedValue}>
             <SelectTrigger className="rounded-md border focus:ring-0 focus:ring-offset-0">
                 <SelectValue placeholder="Select a repo" />
             </SelectTrigger>

app/page.tsx

@@ -65,28 +65,6 @@ export default function Home() {
   const [isSubmit, setIsSubmit] = useState<boolean>(false);
   const chartRef = useRef<cytoscape.Core | null>(null)
 
-  useEffect(() => {
-    const run = async () => {
-      const result = await fetch(`/api/repo`, {
-        method: 'GET',
-      })
-
-      if (!result.ok) {
-        toast({
-          variant: "destructive",
-          title: "Uh oh! Something went wrong.",
-          description: await result.text(),
-        })
-        return
-      }
-
-      const json = await result.json()
-      setOptions(json.result)
-    }
-
-    run()
-  }, [])
-
   async function onCreateRepo(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
 
@@ -279,6 +257,7 @@ export default function Home() {
             <CodeGraph
               chartRef={chartRef}
               options={options}
+              setOptions={setOptions}
               onFetchGraph={onFetchGraph}
               onFetchNode={onFetchNode}
               setPath={setPath}