Save User Recent Searches (Last 5)

[manudous]

Feature: Save User Recent Searches (Last 5)

Description

We want to persist the last five searches performed by the user using the browser’s localStorage, and display them when the user returns to the search page.

The recent searches list must be displayed right below the search form.

---

Requirements

useRecentSearches Hook

Create a new hook named useRecentSearches responsible for managing recent searches.

It must handle:

• Auto-load on component mount
  • Read recent searches from localStorage when the hook/component initializes.
• Saving searches (max 5)
  • Store searches in localStorage.
  • Keep only the latest 5.
• De-duplication
  • If a search already exists, move it to the beginning (most recent).
• localStorage error handling
  • Gracefully handle read/write errors (e.g. unavailable storage, JSON parsing issues).
  • In case of error, the app should not crash and should fallback safely (e.g. empty list).

---

RecentSearches Component

Create a new component named RecentSearches to render the recent searches.

Rules:

• It receives the recent searches list via props.
• UI requirements:
  • Title: "Búsquedas recientes"
  • Show a list of recent searches (max 5).
  • If there are no recent searches, render nothing (no title, no container).
• Interaction:
  • When the user clicks a recent search, redirect them to the corresponding reservoir detail page.