Auth - recreate client on getconection if disconnected

app/api/auth/[...nextauth]/options.ts

@@ -1,9 +1,22 @@
 import { RedisClientType, createClient } from "falkordb";
 import CredentialsProvider from "next-auth/providers/credentials"
-import { AuthOptions } from "next-auth"
+import { AuthOptions, User } from "next-auth"
 
 
 export const connections = new Map<number, RedisClientType>();
+
+export async function getConnection(user: User) {
+    return connections.get(user.id) ?? await createClient({
+        socket: {
+            host: user.host ?? "localhost",
+            port: user.port ?? 6379,
+            reconnectStrategy: false
+        },
+        password: user.password ?? undefined,
+        username: user.username ?? undefined
+    })
+}
+
 let userId = 1;
 
 const authOptions: AuthOptions = {

app/api/graph/route.ts

@@ -1,7 +1,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { Graph } from 'falkordb';
 import { getServerSession } from "next-auth/next";
-import authOptions, { connections } from "../auth/[...nextauth]/options";
+import authOptions, { getConnection } from "../auth/[...nextauth]/options";
 
 // eslint-disable-next-line import/prefer-default-export
 export async function GET(request: NextRequest) {
@@ -12,7 +12,7 @@ export async function GET(request: NextRequest) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }
 
-    const client = connections.get(id)
+    const client = await getConnection(session.user)
     if(!client) {
         return NextResponse.json({ message: "Not authenticated" }, { status: 401 })
     }

app/graph/metadataview.tsx

@@ -0,0 +1,10 @@
+export default function MetaDataView({ metadata }: { metadata: string[] }) {
+    return (
+        <div>
+            {
+                // eslint-disable-next-line react/no-array-index-key
+                metadata.map((val, index) => <p key={index}>{val}</p>)
+            }
+        </div>
+    )
+}

app/graph/page.tsx

@@ -7,10 +7,12 @@ import { signOut } from "next-auth/react";
 import { useTheme } from "next-themes";
 import { Query, QueryState } from "./query";
 import { TableView } from "./tableview";
+import MetaDataView from "./metadataview";
 import { Graph } from "./model";
 import { GraphView, GraphViewRef } from "./GraphView";
 
 
+
 // Validate the graph selection is not empty and show an error message if it is
 function validateGraphSelection(graphName: string): boolean {
     if (!graphName) {
@@ -25,6 +27,8 @@ function validateGraphSelection(graphName: string): boolean {
 
 export default function Page() {
     const [graph, setGraph] = useState(Graph.empty());
+    const [metaData, setMetaData] = useState<string[]>([]);
+    const [showGraph, setShowGraph] = useState<boolean>(true);
 
     const graphView = useRef<GraphViewRef>(null)
 
@@ -71,7 +75,8 @@ export default function Page() {
         const json = await result.json()
         const newGraph = Graph.create(state.graphName, json.result)
         setGraph(newGraph)
-
+        setMetaData(json.result.metadata)
+        setShowGraph((!!json.result.data && json.result.data.length > 0))
 
         graphView.current?.expand(newGraph.Elements)
     }
@@ -84,10 +89,14 @@ export default function Page() {
                     graph.Id &&
                     <Tabs defaultValue="graph" className="grow flex flex-col justify-center items-center">
                         <TabsList className="border w-fit">
-                            <TabsTrigger value="data">Data</TabsTrigger>
-                            <TabsTrigger value="graph">Graph</TabsTrigger>
+                            <TabsTrigger value="metaData">MetaData</TabsTrigger>
+                            {showGraph && <TabsTrigger value="data">Data</TabsTrigger>}
+                            {showGraph && <TabsTrigger value="graph">Graph</TabsTrigger>}
                         </TabsList>
-                        <TabsContent value="data" className="grow w-full">
+                        <TabsContent value="metaData" className="grow w-full">
+                            <MetaDataView metadata={metaData} />
+                        </TabsContent>
+                        <TabsContent value="data" className="grow w-full flex-[1_1_0] overflow-auto">
                             <TableView graph={graph} />
                         </TabsContent>
                         <TabsContent value="graph" className="grow w-full">