session selector working

frontend/src/components/session-selector.tsx

@@ -0,0 +1,64 @@
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui";
+import { useLoginMutation } from "@/services/db";
+import { useSessionStore } from "@/state/db-session-store";
+import { memo, useMemo } from "react";
+import { toast } from "sonner";
+
+function RawSessionSelector() {
+  const sessions = useSessionStore.use.sessions();
+  const currentSessionId = useSessionStore.use.currentSessionId();
+  const setCurrentSessionId = useSessionStore.use.setCurrentSessionId();
+  const { mutate } = useLoginMutation();
+
+  const handleSessionSelected = (sessionId: string) => {
+    const session = sessions.find((s) => s.id === Number.parseInt(sessionId));
+    if (!session) {
+      toast.error("Invalid session");
+      return;
+    }
+    setCurrentSessionId(session.id);
+    mutate(session);
+  };
+
+  const mappedSessions = useMemo(() => {
+    return sessions?.map((session) => {
+      const text =
+        "connectionString" in session
+          ? session.connectionString
+          : `${session.host}:${session.port}/${session.database}`;
+      return (
+        <SelectItem value={session.id.toString()} key={session.id}>
+          {text}
+        </SelectItem>
+      );
+    });
+  }, [sessions]);
+
+  if (!sessions.length) {
+    return null;
+  }
+
+  return (
+    <Select
+      value={currentSessionId ? currentSessionId.toString() : ""}
+      onValueChange={handleSessionSelected}
+    >
+      <SelectTrigger className="max-w-full">
+        <SelectValue placeholder="Select a Database" />
+      </SelectTrigger>
+      <SelectContent>{mappedSessions}</SelectContent>
+    </Select>
+  );
+}
+
+const SessionSelector = memo(RawSessionSelector);
+
+SessionSelector.displayName = "SessionSelector";
+
+export { SessionSelector };

frontend/src/routes/__root.tsx

@@ -1,3 +1,4 @@
+import { SessionSelector } from "@/components/session-selector";
 import { SettingsDialog } from "@/components/settings-dialog";
 import {
   Button,
@@ -12,7 +13,6 @@ import {
 import { cn } from "@/lib/utils";
 import { useDatabasesListQuery, useTablesListQuery } from "@/services/db";
 import { useUiStore } from "@/state";
-import { useSessionStore } from "@/state/db-session-store";
 import {
   Link,
   Outlet,
@@ -30,8 +30,6 @@ export const Route = createRootRoute({
 function Root() {
   const showSidebar = useUiStore.use.showSidebar();
   const toggleSidebar = useUiStore.use.toggleSidebar();
-  const sessions = useSessionStore.use.sessions();
-  const currentSessionId = useSessionStore.use.currentSessionId();
 
   const { data } = useDatabasesListQuery();
   const params = useParams({ strict: false });
@@ -76,31 +74,7 @@ function Root() {
         <aside className={"p-3"}>
           {showSidebar && (
             <>
-              {sessions.length > 0 && (
+              <SessionSelector />
-                <Select
-                  value={currentSessionId ? currentSessionId.toString() : ""}
-                >
-                  <SelectTrigger className="max-w-full">
-                    <SelectValue placeholder="Select a Database" />
-                  </SelectTrigger>
-                  <SelectContent>
-                    {sessions?.map((session) => {
-                      const text =
-                        "connectionString" in session
-                          ? session.connectionString
-                          : `${session.host}:${session.port}/${session.database}`;
-                      return (
-                        <SelectItem
-                          value={session.id.toString()}
-                          key={session.id}
-                        >
-                          {text}
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-              )}
               <Select value={dbName} onValueChange={handleSelectedDb}>
                 <SelectTrigger className="w-full mt-4">
                   <SelectValue placeholder="Select a Database" />

frontend/src/services/db/db.hooks.ts

@@ -1,4 +1,5 @@
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
 import { HTTPError } from "ky";
 import { toast } from "sonner";
 import { DB_QUERY_KEYS } from "./db.query-keys";
@@ -12,8 +13,15 @@ import type {
 } from "./db.types";
 
 export const useLoginMutation = () => {
+  const queryClient = useQueryClient();
+  const navigate = useNavigate();
+
   return useMutation({
     mutationFn: dbService.login,
+    onSuccess: () => {
+      void navigate({ to: "/" });
+      void queryClient.invalidateQueries();
+    },
   });
 };