FIX: Stream routing on ResultsPage;

frontend/src/components/Input/SearchBar.tsx

@@ -9,16 +9,17 @@ const SearchBar: React.FC = () => {
   const navigate = useNavigate();
 
   // Debounce the search query
-  {/*
+  {
+    /*
   useEffect(() => {
     const timer = setTimeout(() => {
       setDebouncedQuery(searchQuery);
     }, 500); // Wait 500ms after user stops typing
 
     return () => clearTimeout(timer);
-  }, [searchQuery]); */}
+  }, [searchQuery]); */
+  }
 
-  // Perform search when debounced query changes
   const handleSearch = async () => {
     if (!searchQuery.trim()) return;
 
@@ -28,13 +29,15 @@ const SearchBar: React.FC = () => {
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({ query: searchQuery }), // <-- Fixed payload
+        body: JSON.stringify({ query: searchQuery }),
       });
 
       const data = await response.json();
       console.log("Search results:", data);
 
-      navigate("/results", { state: { searchResults: data, query: searchQuery } });
+      navigate("/results", {
+        state: { searchResults: data, query: searchQuery },
+      });
 
       // Handle the search results here
     } catch (error) {
@@ -44,24 +47,15 @@ const SearchBar: React.FC = () => {
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
-      console.log("Key pressed:", e.key); // Debugging
+      e.preventDefault();
-
+      handleSearch();
-      e.preventDefault(); // Prevent unintended form submission
-      handleSearch(); // Trigger search when Enter key is pressed
     }
   };
 
-
   const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setSearchQuery(e.target.value);
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") {
-      handleSearch();
-    }
-  };
-
   return (
     <div id="search-bar" className="flex items-center">
       <Input
@@ -73,8 +67,6 @@ const SearchBar: React.FC = () => {
         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>
   );

frontend/src/pages/ResultsPage.tsx

@@ -63,9 +63,9 @@ const ResultsPage: React.FC = ({}) => {
             <li
               key={index}
               className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => navigate(`/${stream.streamer_name}`)}
+              onClick={() => navigate(`/${stream.username}`)}
             >
-              {stream.title} - {stream.num_viewers} viewers
+              {stream.title} - {stream.username} - {stream.num_viewers} viewers
             </li>
           ))}
         </ul>

web_server/blueprints/search_bar.py

@@ -41,9 +41,10 @@ def search_results():
 
     # 3 streams
     streams = db.fetchall("""
-                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id
+                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id, u.username
                     FROM streams AS s
                     INNER JOIN stream_fts AS f ON s.user_id = f.user_id
+                    INNER JOIN users AS u ON s.user_id = u.user_id
                     WHERE f.title LIKE '%' || ? || '%'
                     ORDER BY score ASC
                     LIMIT 3;
@@ -123,9 +124,10 @@ def search_streams():
     
     # Fetch the ranked data and send to JSON to be displayed
     streams = db.fetchall("""
-                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id
+                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id, u.username
                     FROM streams AS s
                     INNER JOIN stream_fts AS f ON s.user_id = f.user_id
+                    INNER JOIN users AS u ON s.user_id = u.user_id
                     WHERE f.title LIKE '%' || ? || '%'
                     ORDER BY score ASC;
         """, (query,))