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

FIX: Search from ResultsPage

Browse Source
This commit is contained in:
Chris-1010
2025-03-03 17:05:18 +00:00
parent 34687671f7
commit d08809dc4d
2 changed files with 149 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,66 +1,76 @@
import React, { useState } from "react"; // In SearchBar.tsx
import React, { useState, useEffect } from "react";
import Input from "./Input"; import Input from "./Input";
import { SearchIcon } from "lucide-react"; import { SearchIcon } from "lucide-react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
interface SearchBarProps { interface SearchBarProps {
value?: string; 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 [searchQuery, setSearchQuery] = useState(value);
//const [debouncedQuery, setDebouncedQuery] = useState(searchQuery); const navigate = useNavigate();
const navigate = useNavigate();
const handleSearch = async () => { // Update searchQuery when value prop changes
if (!searchQuery.trim()) return; useEffect(() => {
setSearchQuery(value);
}, [value]);
try { const handleSearch = async () => {
const response = await fetch("/api/search", { if (!searchQuery.trim()) return;
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ query: searchQuery }),
});
const data = await response.json(); try {
const response = await fetch("/api/search", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ query: searchQuery }),
});
navigate("/results", { const data = await response.json();
state: { searchResults: data, query: searchQuery },
});
// Handle the search results here // If we have a callback for search results, use that instead of navigating
} catch (error) { if (onSearchResults) {
console.error("Error performing search:", error); onSearchResults(data, searchQuery);
} } else {
}; // Otherwise navigate to results page with the data
navigate("/results", {
state: { searchResults: data, query: searchQuery },
});
}
} catch (error) {
console.error("Error performing search:", error);
}
};
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => { const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
if (e.key === "Enter") { if (e.key === "Enter") {
e.preventDefault(); e.preventDefault();
handleSearch(); handleSearch();
} }
}; };
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchQuery(e.target.value); setSearchQuery(e.target.value);
}; };
return ( return (
<div id="search-bar" className="flex items-center"> <div id="search-bar" className="flex items-center">
<Input <Input
type="text" type="text"
placeholder="Search..." placeholder="Search..."
value={searchQuery} value={searchQuery}
onChange={handleSearchChange} onChange={handleSearchChange}
onKeyDown={handleKeyPress} onKeyDown={handleKeyPress}
extraClasses="pr-[30px] focus:outline-none focus:border-purple-500 focus:w-[30vw]" 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> </div>
); );
}; };
export default SearchBar; export default SearchBar;

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

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