Navegacion desde la search al detail page usando userouter,

front/src/lib/mongodb.ts

@@ -13,14 +13,16 @@ const globalForMongo = globalThis as typeof globalThis & {
 };
 
 //crea el cliente solo si no existe ya (singleton)
-function getClient(): MongoClient {
+async function  getClient(): Promise<MongoClient> {
     if (!globalForMongo._mongoClient) {
         globalForMongo._mongoClient = new MongoClient(connectionString);
+        await globalForMongo._mongoClient.connect();
     }
 
     return globalForMongo._mongoClient;
 }
 //lo que exportamo devuelve la instancia de Db lista para hacer queries
-export function getDb(): Db {
-    return getClient().db();
+export async function getDb(): Promise<Db> {
+    const client = await getClient();
+    return client.db();
 }

front/src/pods/embalse-search/embalse-search.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useCombobox } from "downshift";
+import { useRouter } from "next/navigation";
 import { SearchIcon } from "./components/search-icon";
 import { Embalse, getEmbalsesCollection } from "./api";
 import { EmbalseSearchModel } from "./embalse-search.model";
@@ -12,6 +13,7 @@ const mapEmbalseToSearch = (embalse: Embalse): EmbalseSearchModel => ({
 });
 
 export const EmbalseSearch: React.FC = () => {
+   const router = useRouter();
   const [embalses, setEmbalses] = useState<Embalse[]>([]);
   const [filteredEmbalses, setFilteredEmbalses] = useState<
     EmbalseSearchModel[]
@@ -47,7 +49,8 @@ export const EmbalseSearch: React.FC = () => {
     },
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
-        console.log("Embalse seleccionado: ", selectedItem);
+        //console.log("Embalse seleccionado: ", selectedItem);
+        router.push(`/embalse/${selectedItem.slug}`);
       }
     },
   });

front/src/pods/embalse/embalse.repository.ts

@@ -5,7 +5,7 @@ import type { Embalse } from "db-model";
 
 export async function getEmbalseBySlug(slug: string): Promise<Embalse | null> {
     //conecta con BD y trae datos en base al slug
-  const db = getDb();
+  const db = await getDb();
   const doc = await db.collection("embalses").findOne({ slug });
 
   if (!doc) {

package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "axios": "^1.10.0",
     "cheerio": "^1.1.2",
+    "downshift": "^9.2.0",
     "playwright": "^1.54.2"
   }
 }