From 905e879c6053a936793608584da3d74e09640e5a Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Tue, 11 Feb 2025 13:42:28 +0000
Subject: [PATCH] UPDATE: Searchbar functions on Frontend

---
 frontend/src/components/Layout/Navbar.tsx    | 13 +----
 frontend/src/components/Layout/SearchBar.tsx | 52 ++++++++++++++++++++
 2 files changed, 54 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/Layout/SearchBar.tsx

diff --git a/frontend/src/components/Layout/Navbar.tsx b/frontend/src/components/Layout/Navbar.tsx
index 76c5386..509e9d0 100644
--- a/frontend/src/components/Layout/Navbar.tsx
+++ b/frontend/src/components/Layout/Navbar.tsx
@@ -4,12 +4,11 @@ import Button from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
-  Search as SearchIcon,
   LogIn as LogInIcon,
   LogOut as LogOutIcon,
   Settings as SettingsIcon,
 } from "lucide-react";
-import Input from "./Input";
+import SearchBar from "./SearchBar";
 import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
@@ -109,15 +108,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           <QuickSettings />
         </div>
 
-      <div id="search-bar" className="flex items-center">
-        <Input
-          type="text"
-          placeholder="Search..."
-          extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
-        />
-
-        <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
-      </div>
+      <SearchBar />
 
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
     </div>
diff --git a/frontend/src/components/Layout/SearchBar.tsx b/frontend/src/components/Layout/SearchBar.tsx
new file mode 100644
index 0000000..f21a46f
--- /dev/null
+++ b/frontend/src/components/Layout/SearchBar.tsx
@@ -0,0 +1,52 @@
+import React, { useState, useEffect } from "react";
+import Input from "./Input";
+import { Search as SearchIcon } from "lucide-react";
+
+const SearchBar: React.FC = () => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
+
+  // Debounce the search query
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedQuery(searchQuery);
+    }, 500); // Wait 500ms after user stops typing
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  // Perform search when debounced query changes
+  useEffect(() => {
+    if (debouncedQuery.trim()) {
+      fetch(`/api/search/${debouncedQuery}`)
+        .then((response) => response.json())
+        .then((data) => {
+          console.log("Search results:", data);
+          // Handle the search results here
+        })
+        .catch((error) => {
+          console.error("Error performing search:", error);
+        });
+    }
+  }, [debouncedQuery]);
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  };
+
+  return (
+    <div id="search-bar" className="flex items-center">
+      <Input
+        type="text"
+        placeholder="Search..."
+        value={searchQuery}
+        onChange={handleSearchChange}
+        extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]"
+      />
+
+      <SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white" />
+    </div>
+  );
+};
+
+export default SearchBar;