Merge pull request #701 from FalkorDB/fix-selected-graph-after-create

Fix #697 Fix selected graph after create
FalkorDB · Mar 5, 2025 · e515dce · e515dce
2 parents 97767eb + cf08162
commit e515dce
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 29 deletions.
diff --git a/app/components/ui/combobox.tsx b/app/components/ui/combobox.tsx
@@ -67,12 +67,9 @@ export default function Combobox({ isSelectGraph = false, disabled = false, inTa
   }
 
   useEffect(() => {
+    console.log(options)
     handleSetRows(options)
-
-    if (options.length !== 1 || !setSelectedValue) return
-
-    setSelectedValue(options[0])
-  }, [options, setSelectedValue])
+  }, [options])
 
   const handleDelete = async (opts: string[]) => {
     const names = opts.map(opt => isSchema ? `${opt}_schema` : opt)
@@ -82,15 +79,15 @@ export default function Combobox({ isSelectGraph = false, disabled = false, inTa
         method: "DELETE"
       }, session?.user?.role, toast)
 
-      if (!result.ok) return name
+      if (result.ok) return name
 
       return ""
 
-    })).then(graphNames => graphNames.filter(name => name !== ""))
+    })).then(graphNames => options.filter(opt => !graphNames.filter(name => name !== "").includes(opt)))
 
     setOptions!(newNames)
 
-    if (opts.includes(selectedValue) && setSelectedValue) setSelectedValue("")
+    if (opts.includes(selectedValue) && setSelectedValue) setSelectedValue(newNames[newNames.length - 1])
 
     setOpenDelete(false)
     setOpenMenage(false)

diff --git a/app/graph/Selector.tsx b/app/graph/Selector.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { SetStateAction, Dispatch, useEffect, useRef, useState, useCallback } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { DialogTitle } from "@/components/ui/dialog";
 import { Editor } from "@monaco-editor/react";
 import { editor } from "monaco-editor";
@@ -20,10 +20,8 @@ import CreateGraph from "../components/CreateGraph";
 import ExportGraph from "../components/ExportGraph";
 
 interface Props {
-    /* eslint-disable react/require-default-props */
-    onChange: (selectedGraphName: string) => void
+    setGraphName: (selectedGraphName: string) => void
     graphName: string
-    setGraphName: Dispatch<SetStateAction<string>>
     runQuery?: (query: string, setQueriesOpen: (open: boolean) => void) => Promise<void>
     queries?: Query[]
     edgesCount: number
@@ -33,7 +31,7 @@ interface Props {
     data: Session | null
 }
 
-export default function Selector({ onChange, graphName, setGraphName, queries, runQuery, edgesCount, nodesCount, setGraph, graph, data: session }: Props) {
+export default function Selector({ setGraphName, graphName, queries, runQuery, edgesCount, nodesCount, setGraph, graph, data: session }: Props) {
 
     const [options, setOptions] = useState<string[]>([]);
     const [schema, setSchema] = useState<Graph>(Graph.empty());
@@ -49,12 +47,7 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
     const { toast } = useToast()
 
     useEffect(() => {
-        if (!graphName) return
-        setOptions(prev => {
-            if (prev.includes(graphName)) return prev
-            setSelectedValue(graphName)
-            return [...prev, graphName]
-        })
+        setSelectedValue(graphName)
     }, [graphName])
 
     const getOptions = useCallback(async () => {
@@ -63,14 +56,16 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
         }, session?.user?.role, toast)
         if (!result.ok) return
         const res = (await result.json()).result as string[]
-        setOptions(!runQuery ? 
+        const opts = !runQuery ? 
             res.filter(name => name.endsWith("_schema")).map(name => {
             let split = name.split("_schema")[0]
             if (split.startsWith("{") && split.endsWith("}")) {
                 split = split.substring(1, split.length - 1)
             }
             return split
-        }) : res.filter(name => !name.endsWith("_schema")))
+        }) : res.filter(name => !name.endsWith("_schema"))
+        setOptions(opts)
+        if (opts.length === 1 && setSelectedValue) setSelectedValue(opts[0])
     }, [runQuery, session?.user?.role, toast])
 
     useEffect(() => {
@@ -95,7 +90,7 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
                 setSchema(Graph.create(name, json.result, false, true))
             }
         }
-        onChange(formattedName)
+        setGraphName(formattedName)
         setSelectedValue(name)
     }
 
@@ -111,7 +106,10 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
                 <div className="flex items-center gap-4">
                     <CreateGraph
                         type={type}
-                        onSetGraphName={setGraphName}
+                        onSetGraphName={(name) => {
+                            handleOnChange(name)
+                            setOptions(prev => [...prev, name])
+                        }}
                         trigger={
                             <Button
                                 variant="Primary"
@@ -160,7 +158,7 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
                         onDuplicate={(name) => {
                             setOptions(prev => [...prev, name])
                             setSelectedValue(name)
-                            setGraphName(name)
+                            handleOnChange(name)
                         }}
                         selectedValue={selectedValue}
                     />
@@ -289,4 +287,9 @@ export default function Selector({ onChange, graphName, setGraphName, queries, r
             </div>
         </div >
     )
-}
+}
+
+Selector.defaultProps = {
+    runQuery: undefined,
+    queries: [],
+}
diff --git a/app/graph/page.tsx b/app/graph/page.tsx
@@ -22,7 +22,6 @@ export default function Page() {
     const { data: session } = useSession()
     const { toast } = useToast()
 
-
     useEffect(() => {
         setQueries(JSON.parse(localStorage.getItem(`query history`) || "[]"))
     }, [])
@@ -110,9 +109,8 @@ export default function Page() {
             <Header onSetGraphName={setGraphName} />
             <div className="h-1 grow p-8 px-10 flex flex-col gap-4">
                 <Selector
-                    setGraphName={setGraphName}
                     queries={queries}
-                    onChange={setGraphName}
+                    setGraphName={setGraphName}
                     graphName={graphName}
                     runQuery={runHistoryQuery}
                     edgesCount={edgesCount}

diff --git a/app/schema/page.tsx b/app/schema/page.tsx
@@ -62,7 +62,6 @@ export default function Page() {
                     setGraphName={setSchemaName}
                     edgesCount={edgesCount}
                     nodesCount={nodesCount}
-                    onChange={setSchemaName}
                     graphName={schemaName}
                     graph={schema}
                     setGraph={setSchema}