From 571ea13bf641f44be8443c75c142e028be2b47fd Mon Sep 17 00:00:00 2001
From: THIS ONE IS A LITTLE BIT TRICKY KRUB <pattadon2546pn@gmail.com>
Date: Wed, 2 Oct 2024 17:25:05 +0700
Subject: [PATCH] Refactor navigation bar component, add search functionality

---
 src/app/find/page.tsx                | 13 +++++++++++++
 src/components/navigationBar/nav.tsx | 19 ++++++++++++-------
 2 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/app/find/page.tsx

diff --git a/src/app/find/page.tsx b/src/app/find/page.tsx
new file mode 100644
index 0000000..53fa957
--- /dev/null
+++ b/src/app/find/page.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useSearchParams } from 'next/navigation';
+
+export default function Find(){
+    const searchParams = useSearchParams();
+    const query = searchParams.get('query');
+    return (
+        <div>
+            {query}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/navigationBar/nav.tsx b/src/components/navigationBar/nav.tsx
index decbb87..c91d62a 100644
--- a/src/components/navigationBar/nav.tsx
+++ b/src/components/navigationBar/nav.tsx
@@ -8,6 +8,7 @@ import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { Button } from "@/components/ui/button";
+import { useRouter } from 'next/navigation';
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -134,6 +135,7 @@ export function NavigationBar() {
   const user = session?.user;
   const [sessionLoaded, setSessionLoaded] = React.useState(false);
   const [searchActive, setSearchActive] = React.useState(false);
+  const router = useRouter();
 
   React.useEffect(() => {
     if (!loading) {
@@ -141,6 +143,14 @@ export function NavigationBar() {
     }
   }, [loading]);
 
+  const handleKeyDown = (k: React.KeyboardEvent<HTMLInputElement>) => {
+    // check for "Enter"
+    if (k.key === 'Enter') {
+      const query = (k.target as HTMLInputElement).value.trim();
+      router.push(`/find?query=${encodeURIComponent(query)}`);
+    }
+  };
+
   const businessComponents = [
     {
       title: "Businesses",
@@ -258,17 +268,12 @@ export function NavigationBar() {
                   {/* search bar's input */}
                   <input
                     type="text"
-                    placeholder="Search..."
+                    placeholder="Enter business name..."
                     className={cn(
                       "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out ",
                       searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
                     )}
-                    onKeyDown={(k) => {
-                      // when open search bar and hit enter
-                      if(k.key == "Enter"){
-                        console.log((k.target as HTMLInputElement).value);
-                      }
-                    }}
+                    onKeyDown={handleKeyDown}
                   />
                 </NavigationMenuItem>
               </NavigationMenuList>