Feature/#67 next js server action to interact with the list of given reservoirs

front/src/app/page.tsx

@@ -1,8 +1,10 @@
 import { EmbalseSearch } from "@/pods/embalse-search";
-import Link from "next/link";
+import { getEmbalsesCollection } from "@/pods/embalse-search/api";
 
-const RootPage = () => {
-  return <EmbalseSearch />;
+const RootPage = async () => {
+  const embalses = await getEmbalsesCollection();
+
+  return <EmbalseSearch embalses={embalses} />;
 };
 
 export default RootPage;

front/src/pods/embalse-search/api/api.model.ts

@@ -1,5 +1,5 @@
 export interface Embalse {
   _id: string;
-  name: string;
-  province: string;
+  nombre: string;
+  provincia: string;
 }

front/src/pods/embalse-search/api/embalse.api.ts

@@ -1,6 +1,6 @@
+import { getEmbalsesFromDb } from "../embalse-search.repository";
 import { Embalse } from "./api.model";
-import { embalseSearchMock } from "./embalse-search.mock";
 
 export const getEmbalsesCollection = async (): Promise<Embalse[]> => {
-  return embalseSearchMock;
+  return getEmbalsesFromDb();
 };

front/src/pods/embalse-search/api/index.ts

@@ -1,3 +1,2 @@
 export * from "./api.model";
 export * from "./embalse.api";
-export * from "./embalse-search.mock";

front/src/pods/embalse-search/embalse-search.mapper.ts

@@ -0,0 +1,9 @@
+import * as vm from "./embalse-search.vm";
+import * as api from "db-model";
+
+export const mapEmbalseToSearch = (
+  embalse: api.Embalse,
+): vm.EmbalseSearchModel => ({
+  slug: embalse._id,
+  name: `${embalse.nombre} (${embalse.provincia})`,
+});

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

@@ -0,0 +1,38 @@
+"use server";
+
+import { getDb } from "@/lib/mongodb";
+import type { Embalse } from "./api/api.model";
+
+export async function getEmbalsesFromDb(): Promise<Embalse[]> {
+  const db = await getDb();
+  const docs = await db
+    .collection("embalses")
+    .find(
+      {},
+      {
+        projection: {
+          _id: 1,
+          nombre: 1,
+          provincia: 1,
+          slug: 1,
+        },
+      },
+    )
+    .toArray();
+
+  return docs.map((doc) => ({
+    _id: doc.slug ?? createSlug(doc.nombre ?? ""),
+    nombre: doc.nombre ?? "",
+    provincia: doc.provincia ?? "",
+  }));
+}
+
+const createSlug = (nombre: string): string => {
+  return nombre
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .replace(/ñ/g, "n")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+};

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

@@ -1,36 +1,32 @@
 "use client";
 
-import { useState, useEffect } from "react";
+import { useState } 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";
+import { Embalse } from "./api";
+import { EmbalseSearchModel } from "./embalse-search.vm";
+import { mapEmbalseToSearch } from "./embalse-search.mapper";
 
-const mapEmbalseToSearch = (embalse: Embalse): EmbalseSearchModel => ({
-  slug: embalse._id,
-  name: `${embalse.name} (${embalse.province})`,
-});
+interface Props {
+  embalses: Embalse[];
+}
 
-export const EmbalseSearch: React.FC = () => {
-   const router = useRouter();
-  const [embalses, setEmbalses] = useState<Embalse[]>([]);
+export const EmbalseSearch: React.FC<Props> = (props) => {
+  const { embalses } = props;
+  const router = useRouter();
   const [filteredEmbalses, setFilteredEmbalses] = useState<
     EmbalseSearchModel[]
   >([]);
 
-  useEffect(() => {
-    getEmbalsesCollection().then(setEmbalses);
-  }, []);
-
   const getFilteredEmbalses = (inputValue: string): EmbalseSearchModel[] => {
     const lower = inputValue.toLowerCase();
 
     return embalses
       .filter(
         (e) =>
-          e.name.toLowerCase().includes(lower) ||
-          e.province.toLowerCase().includes(lower),
+          e.nombre.toLowerCase().includes(lower) ||
+          e.provincia.toLowerCase().includes(lower),
       )
       .map(mapEmbalseToSearch);
   };

front/src/pods/embalse-search/embalse-search.model.ts → front/src/pods/embalse-search/embalse-search.vm.ts

@@ -1,4 +1,4 @@
 export interface EmbalseSearchModel {
-  slug: string; // embalse id used in the URL
+  slug: string; // Name of the reservoir for the URL
   name: string; // Combination of name (province)
 }