Merge pull request #193 from Lemoncode/feature/#183-save-user-recent-searches-(last-5)

Feature/#183 save user recent searches (last 5)

Author: brauliodiez

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

@@ -0,0 +1 @@
+export * from './recent-searches';

front/src/pods/embalse-search/components/recent-searches/index.tsx

@@ -0,0 +1,3 @@
+export * from "./recent-searches.component"
+export * from "./useRecentSearches.hook"
+export * from "./recentSearches.bussiness"

front/src/pods/embalse-search/components/recent-searches/recent-searches.component.tsx

@@ -0,0 +1,23 @@
+import Link from "next/link";
+import { EmbalseSearchModel } from "../../embalse-search.vm";
+
+interface Props {
+  searches: EmbalseSearchModel[];
+}
+
+export const RecentSearches: React.FC<Props> = (props) => {
+  const { searches } = props;
+
+  return (
+    <>
+      <h3>Búsquedas recientes</h3>
+      <ul>
+        {searches.map((item) => (
+          <li key={item.slug} className="mt-3">
+            <Link className="link-accessible" href={`/embalse/${item.slug}`}>{item.name} </Link>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+};

front/src/pods/embalse-search/components/recent-searches/recentSearches.bussiness.ts

@@ -0,0 +1,41 @@
+import { EmbalseSearchModel } from "../../embalse-search.vm";
+
+  const MAX_SEARCHES = 5;
+
+export const getStoredSearches = (): EmbalseSearchModel[] => {
+  try {
+    const storedSearches = localStorage.getItem("recent-searches");
+    if (storedSearches) {
+      const parsedStoredSearches = JSON.parse(storedSearches);
+      const isValidData =
+        Array.isArray(parsedStoredSearches) &&
+        parsedStoredSearches.every(
+          (item) =>
+            item &&
+            typeof item.slug === "string" &&
+            typeof item.name === "string",
+        );
+      return isValidData ? parsedStoredSearches : [];
+    } else {
+      return [];
+    }
+  } catch (error) {
+    console.log(
+      "Error al recuperar búsquedas recientes en el localstorage ",
+      error,
+    );
+    return [];
+  }
+};
+
+export const addNewSearchEntry = (
+  newSearchEntry: EmbalseSearchModel,
+  recentSearches: EmbalseSearchModel[],
+) => {
+  const filteredRecentSearches = recentSearches.filter(
+    (search) => search.slug !== newSearchEntry.slug,
+  );
+  return [newSearchEntry, ...filteredRecentSearches].slice(0, MAX_SEARCHES);
+};
+
+

front/src/pods/embalse-search/components/recent-searches/useRecentSearches.hook.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+import { EmbalseSearchModel } from "../../embalse-search.vm";
+import {
+  addNewSearchEntry,
+  getStoredSearches,
+} from "./recentSearches.bussiness";
+
+export const useRecentSearches = () => {
+  const [recentSearches, setRecentSearches] = useState<EmbalseSearchModel[]>(
+    [],
+  );
+
+  useEffect(() => {
+    setRecentSearches(getStoredSearches());
+  }, []);
+
+  const addNewEmbalseToLatestSearchCollection = (
+    newSearch: EmbalseSearchModel,
+  ) => {
+    setRecentSearches((prevSearches) => {
+      const updatedRecentSearchColletion = addNewSearchEntry(
+        newSearch,
+        prevSearches,
+      );
+      localStorage.setItem(
+        "recent-searches",
+        JSON.stringify(updatedRecentSearchColletion),
+      );
+      return updatedRecentSearchColletion;
+    });
+  };
+
+  return {
+    recentSearches,
+    addNewEmbalseToLatestSearchCollection,
+  };
+};

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

@@ -9,6 +9,7 @@ import { EmbalseSearchModel } from "./embalse-search.vm";
 import { getFilteredEmbalses as getFilteredEmbalsesBusiness } from "./embalse-search.business";
 import { FilteredList } from "./components/filtered-list";
 import { Input } from "./components/input";
+import { RecentSearches, useRecentSearches } from "./components";
 
 interface Props {
   embalses: Embalse[];
@@ -22,6 +23,7 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
   >([]);
   const [isNavigating, setIsNavigating] = useState<boolean>(false);
   const [inputValue, setInputValue] = useState<string>("");
+  const { addNewEmbalseToLatestSearchCollection, recentSearches } = useRecentSearches();
 
   const getFilteredEmbalses = (inputValue: string): EmbalseSearchModel[] => {
     return getFilteredEmbalsesBusiness(inputValue, embalses);
@@ -42,12 +44,14 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
     onSelectedItemChange: ({ selectedItem }) => {
       if (selectedItem) {
         setIsNavigating(true);
+        addNewEmbalseToLatestSearchCollection(selectedItem);
         router.push(`/embalse/${selectedItem.slug}`);
       }
     },
   });
 
-  const showNoResults = inputValue.length > 0 && filteredEmbalses.length === 0 && !isNavigating;
+  const showNoResults =
+    inputValue.length > 0 && filteredEmbalses.length === 0 && !isNavigating;
 
   return (
     <div className="relative flex flex-1 flex-col overflow-hidden p-8">
@@ -57,15 +61,19 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
       ></div>
       <div className="flex grow flex-col items-center justify-center">
         <section
-          className="bg-base-100 absolute flex max-w-10/12 flex-col gap-8 rounded-xl p-8 shadow-lg"
+          className="bg-base-100 absolute flex max-w-10/12 flex-col gap-3 rounded-xl p-8 shadow-lg"
           aria-labelledby="search-title"
         >
           <div className="text-center">
             <h2 id="search-title" className="font-bold">
               Embalses
             </h2>
           </div>
-
+          <div>
+            <p className="text-sm">
+              Encuentra toda la información disponible de los embalses de España
+            </p>
+          </div>
           <div className="flex flex-col gap-4">
             <div className="relative" role="search">
               <Input getInputProps={getInputProps} />
@@ -78,13 +86,12 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
               />
               {showNoResults && <NoResult inputValue={inputValue} />}
             </div>
-            <div>
-              <p className="text-sm">
-                Encuentra toda la información disponible de los embalses de
-                España
-              </p>
-            </div>
           </div>
+          {recentSearches.length > 0 && (
+            <div className="mt-5">
+              <RecentSearches searches={recentSearches} />
+            </div>
+          )}
         </section>
       </div>
     </div>