feat(search): implement recentSearches to hold 5 maximum entries (#115)

- Removed redundant `.slice()` method call to improve code clarity
- Implemented a 5-item limit for recent searches to prevent unlimited
growth

### Related Issue

Fixes #70

---------

Co-authored-by: Olabode Lawal-Shittabey <babblebey@gmail.com>

Author: AyendiSimeon1

src/components/islands/recent-searches.jsx

@@ -17,8 +17,8 @@ export default function RecentSearches() {
 
   return Object.values(recentSearches).length ? (
     <div className="space-y-3 ml-2 mt-4 md:mt-6">
-	  <h2 className="text-2xl md:text-4xl font-black">Recent</h2>
-	  <ol className="space-y-1.5 underline">
+	<h2 className="text-2xl md:text-4xl font-black">Recent</h2>
+	<ol className="space-y-1.5 underline">
         {Object.values(recentSearches).slice(0, 5).map((item, i) => (
           <li key={i}>
             <a href={item.url}>

src/lib/stores/search.js

@@ -14,27 +14,33 @@ export const $recentSearches = map({});
 /**
  * Add search term to recent search history
  * @param {SearchedItem} item 
- * 
- * @todo implement logic to allow holding maximum of 5 words by removing older words when new a one gets added
  */
 export function $addToRecentSearchesFn({ word, url }) {
-  // Re-initialise the state with current localStorage value
-  $recentSearches.set({...JSON.parse(localStorage.getItem("jargons.dev:recent_searches"))});
+  // Re-initialise the state with the current localStorage value
+  const storedSearches = JSON.parse(localStorage.getItem("jargons.dev:recent_searches")) || {};
+  $recentSearches.set({ ...storedSearches });
 
   const lowercaseKey = word.toLowerCase();
   const key = lowercaseKey.includes(" ") ? lowercaseKey.split(" ").join("-") : lowercaseKey;
-  const isInRecentSearch = $recentSearches.get()[key];
-
-  if (!isInRecentSearch) {
-    const recentSearchesCopy = $recentSearches.get();
-    recentSearchesCopy[key] = {
-      word, 
-      url 
-    };
-    $recentSearches.set({...recentSearchesCopy});
-  } else {
-    return;
+
+  const recentSearchesCopy = $recentSearches.get();
+
+  // Remove Search Entry If it already exists
+  if (recentSearchesCopy[key]) {
+    delete recentSearchesCopy[key];
+  }
+
+  const searchEntries = Object.entries(recentSearchesCopy);
+
+  // Remove one Search Entry when list reach a count of 5
+  if (searchEntries.length >= 5) {
+    searchEntries.pop(); 
   }
-  
-  localStorage.setItem("jargons.dev:recent_searches", JSON.stringify($recentSearches.get()));
+
+  const updatedEntries = [[key, { word, url }], ...searchEntries];
+
+  const updatedSearches = Object.fromEntries(updatedEntries);
+  $recentSearches.set(updatedSearches);
+
+  localStorage.setItem("jargons.dev:recent_searches", JSON.stringify(updatedSearches));
 }