From 4f7f88e41acde3248196a3e2dd615f4e8aab9ee1 Mon Sep 17 00:00:00 2001
From: lGnyte <grasu.ioan02@gmail.com>
Date: Tue, 28 May 2024 17:23:36 +0300
Subject: [PATCH] displaying search resutls

---
 src/components/BrowseAccommodations.tsx | 26 ++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/BrowseAccommodations.tsx b/src/components/BrowseAccommodations.tsx
index c9b38a8..40dcd9f 100644
--- a/src/components/BrowseAccommodations.tsx
+++ b/src/components/BrowseAccommodations.tsx
@@ -1,19 +1,24 @@
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react"
+import { SlLocationPin } from "react-icons/sl";
 import { useDebounce } from "use-debounce"
 
 export default function BrowseAccommodations(props: {posts: any[]}) {
   const [searchQuery, setSearchQuery]= useState("")
   const [debouncedQuery] = useDebounce(searchQuery, 500);
   const [filteredPosts, setFilteredPosts] = useState([] as any[]);
+  const router = useRouter();
 
   const handleChange = (e: any) => setSearchQuery(e.target.value.toLowerCase())
 
-
+  const handleResultClick = (postId:string) => {
+    router.push(`/display_accommodation/${postId}`);
+  }
 
   useEffect(() => {
-    // console.log(debouncedQuery)
     setFilteredPosts(props.posts.filter((post) => {
-      return post.location.toLowerCase().includes(searchQuery)
+      return post.location.toLowerCase().includes(searchQuery) ||
+        post.title.toLowerCase().includes(searchQuery)
     }))
   }, [debouncedQuery])
 
@@ -23,8 +28,19 @@ export default function BrowseAccommodations(props: {posts: any[]}) {
 
   return (
     <div className="mb-10">
-      <label className="text-lg mr-2" htmlFor="search">Browse by location:</label>
-      <input type="text" name="search" id="search" value={searchQuery} onChange={handleChange} className="p-2 border rounded-md" />
+      <label className="text-lg mr-2" htmlFor="search">Browse by location or name:</label>
+      <input type="text" name="search" placeholder="e.g. Iasi" id="search" value={searchQuery} onChange={handleChange} className="p-2 border rounded-md" />
+      <ul className={`absolute border rounded-md ml-2 w-[300px] [&>li]:p-2 [&>li]:rounded-md [&>li]:bg-white  ${debouncedQuery !== "" ? "inline-block" : "hidden"}`}>
+        {filteredPosts.length === 0 && <li className="">No results.</li>}
+        {filteredPosts.map((post) => {
+          return (
+            <li key={post.id} className="cursor-pointer flex justify-between hover:bg-gray-100" onClick={() => handleResultClick(post.id)}>
+              <span>{post.title}</span>
+              <span className="text-sm text-gray-500"><SlLocationPin className="inline-block" /> {post.location}</span>
+            </li>
+          )
+        })}
+      </ul>
     </div>
   )
 }
\ No newline at end of file