Merge branch 'main' of https://github.com/john-david3/cs3305-team11

frontend/src/components/Input/SearchBar.tsx

@@ -1,17 +1,23 @@
-import React, { useState } from "react";
+// In SearchBar.tsx
+import React, { useState, useEffect } from "react";
 import Input from "./Input";
 import { SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
 interface SearchBarProps {
 	value?: string;
+  onSearchResults?: (results: any, query: string) => void;
 }
 
-const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
+const SearchBar: React.FC<SearchBarProps> = ({ value = "", onSearchResults }) => {
 	const [searchQuery, setSearchQuery] = useState(value);
-  //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
 	const navigate = useNavigate();
 
+	// Update searchQuery when value prop changes
+	useEffect(() => {
+		setSearchQuery(value);
+	}, [value]);
+
 	const handleSearch = async () => {
 		if (!searchQuery.trim()) return;
 
@@ -26,11 +32,15 @@ const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
 
 			const data = await response.json();
 
+			// If we have a callback for search results, use that instead of navigating
+			if (onSearchResults) {
+				onSearchResults(data, searchQuery);
+			} else {
+				// Otherwise navigate to results page with the data
 				navigate("/results", {
 					state: { searchResults: data, query: searchQuery },
 				});
-
+			}
-      // Handle the search results here
 		} catch (error) {
 			console.error("Error performing search:", error);
 		}
@@ -58,7 +68,7 @@ const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
 				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" />
+			<SearchIcon className="-translate-x-[28px] top-1/2 h-6 w-6 text-white cursor-pointer" onClick={handleSearch} />
 		</div>
 	);
 };

frontend/src/pages/ResultsPage.tsx

@@ -1,3 +1,4 @@
+// In ResultsPage.tsx
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import SearchBar from "../components/Input/SearchBar";
@@ -5,41 +6,51 @@ import ListRow from "../components/Layout/ListRow";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { getCategoryThumbnail } from "../utils/thumbnailUtils";
 
-const ResultsPage: React.FC = ({ }) => {
+const ResultsPage: React.FC = () => {
 	const [overflow, setOverflow] = useState(false);
 	const location = useLocation();
 	const navigate = useNavigate();
-  const { searchResults, query } = location.state || {
+
-    searchResults: { categories: [], users: [], streams: [] },
+	// Initialize with state from navigation, or empty defaults
-    query: "",
+	const [searchState, setSearchState] = useState({
+		searchResults: location.state?.searchResults || { categories: [], users: [], streams: [] },
+		query: location.state?.query || "",
+	});
+
+	// Handle new search results
+	const handleSearchResults = (results: any, newQuery: string) => {
+		console.log("New search results:", results);
+		setSearchState({
+			searchResults: results,
+			query: newQuery,
+		});
+
+		// Update URL state without navigation
+		window.history.replaceState({ searchResults: results, query: newQuery }, "", "/results");
 	};
 
 	useEffect(() => {
-    const checkHeight = () => {
+		// If location state changes, update our internal state
-      setOverflow(
+		if (location.state) {
-        document.documentElement.scrollHeight + 20 > window.innerHeight
+			setSearchState({
-      );
+				searchResults: location.state.searchResults,
-    };
+				query: location.state.query,
-
+			});
-    checkHeight();
+		}
-    window.addEventListener("resize", checkHeight);
+	}, [location.state]);
-
-    return () => window.removeEventListener("resize", checkHeight);
-  }, []);
 
 	return (
 		<DynamicPageContent id="results-page" navbarVariant="no-searchbar">
 			<div className="flex flex-col items-center justify-evenly gap-4 p-4">
-        <h1 className="text-3xl font-bold mb-4">
+				<h1 className="text-3xl font-bold mb-4">Search results for "{searchState.query}"</h1>
-          Search results for "{query}"
+				<SearchBar value={searchState.query} onSearchResults={(results, query) => handleSearchResults(results, query)} />
-        </h1>
-        <SearchBar value={query} />
 
 				<div id="results" className="flex flex-col flex-grow gap-10 w-full">
 					<ListRow
+						key={`stream-results-${searchState.query}`}
 						variant="search"
 						type="stream"
-            items={searchResults.streams.map((stream: any) => ({
+						items={searchState.searchResults.streams.map((stream: any) => ({
 							id: stream.user_id,
 							type: "stream",
 							title: stream.title,
@@ -49,18 +60,17 @@ const ResultsPage: React.FC = ({ }) => {
 							thumbnail: stream.thumbnail_url,
 						}))}
 						title="Streams"
-            onItemClick={(streamer_name: string) =>
+						onItemClick={(streamer_name: string) => (window.location.href = `/${streamer_name}`)}
-              (window.location.href = `/${streamer_name}`)
-            }
 						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
 						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
 						amountForScroll={3}
 					/>
 
 					<ListRow
+						key={`category-results-${searchState.query}`}
 						variant="search"
 						type="category"
-            items={searchResults.categories.map((category: any) => ({
+						items={searchState.searchResults.categories.map((category: any) => ({
 							id: category.category_id,
 							type: "category",
 							title: category.category_name,
@@ -68,9 +78,7 @@ const ResultsPage: React.FC = ({ }) => {
 							thumbnail: getCategoryThumbnail(category.category_name),
 						}))}
 						title="Categories"
-            onItemClick={(category_name: string) =>
+						onItemClick={(category_name: string) => navigate(`/category/${category_name}`)}
-              navigate(`/category/${category_name}`)
-            }
 						titleClickable={true}
 						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
 						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
@@ -78,29 +86,22 @@ const ResultsPage: React.FC = ({ }) => {
 					/>
 
 					<ListRow
+						key={`user-results-${searchState.query}`}
 						variant="search"
 						type="user"
-            items={searchResults.users.map((user: any) => ({
+						items={searchState.searchResults.users.map((user: any) => ({
 							id: user.user_id,
 							type: "user",
 							title: `${user.is_live ? "🔴" : ""} ${user.username}`,
-              username: user.username
+							username: user.username,
 						}))}
 						title="Users"
-            onItemClick={(username: string) =>
+						onItemClick={(username: string) => (window.location.href = `/user/${username}`)}
-              (window.location.href = `/user/${username}`)
-            }
 						amountForScroll={3}
 						extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
 						itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
 					/>
 				</div>
-
-        <div
-          className={`${overflow && "absolute top-[5vh] right-[2vw]"
-            } flex gap-[2vw]`}
-        >
-        </div>
 			</div>
 		</DynamicPageContent>
 	);

web_server/blueprints/search_bar.py

@@ -24,7 +24,7 @@ def search_results():
                     SELECT bm25(category_fts) AS score, c.category_id, c.category_name
                     FROM categories AS c
                     INNER JOIN category_fts AS f ON c.category_id = f.category_id
-                    WHERE f.category_name LIKE ? || '%'
+                    WHERE f.category_name LIKE '%' || ? || '%'
                     ORDER BY score ASC
                     LIMIT 3;
         """, (query,))
@@ -34,7 +34,7 @@ def search_results():
                     SELECT bm25(user_fts) AS score, u.user_id, u.username, u.is_live
                     FROM users AS u
                     INNER JOIN user_fts AS f ON u.user_id = f.user_id
-                    WHERE f.username LIKE ? || '%'
+                    WHERE f.username LIKE '%' || ? || '%'
                     ORDER BY score ASC
                     LIMIT 3;
         """, (query,))
@@ -46,7 +46,7 @@ def search_results():
                     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
                     INNER JOIN categories AS c ON s.category_id = c.category_id
-                    WHERE f.title LIKE ? || '%'
+                    WHERE f.title LIKE '%' || ? || '%'
                     ORDER BY score ASC
                     LIMIT 3;
         """, (query,))