dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
EvanLin3141
2025-03-03 21:31:57 +00:00
parent ad50a20637 d08809dc4d
commit 6934034f3a
3 changed files with 152 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/Input/SearchBar.tsx
View File

@@ -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>
);
};

77
frontend/src/pages/ResultsPage.tsx
View File

@@ -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: [] },
query: "",
// Initialize with state from navigation, or empty defaults
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 = () => {
setOverflow(
document.documentElement.scrollHeight + 20 > window.innerHeight
);
};
checkHeight();
window.addEventListener("resize", checkHeight);
return () => window.removeEventListener("resize", checkHeight);
}, []);
// If location state changes, update our internal state
if (location.state) {
setSearchState({
searchResults: location.state.searchResults,
query: location.state.query,
});
}
}, [location.state]);
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">
Search results for "{query}"
</h1>
<SearchBar value={query} />
<h1 className="text-3xl font-bold mb-4">Search results for "{searchState.query}"</h1>
<SearchBar value={searchState.query} onSearchResults={(results, query) => handleSearchResults(results, 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) =>
(window.location.href = `/${streamer_name}`)
}
onItemClick={(streamer_name: string) => (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) =>
navigate(`/category/${category_name}`)
}
onItemClick={(category_name: string) => 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) =>
(window.location.href = `/user/${username}`)
}
onItemClick={(username: string) => (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>
);

6
web_server/blueprints/search_bar.py
View File

@@ -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,))