111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
// In ResultsPage.tsx
|
|
import React, { useEffect, useState } from "react";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import SearchBar from "../components/Input/SearchBar";
|
|
import ListRow from "../components/Layout/ListRow";
|
|
import DynamicPageContent from "../components/Layout/DynamicPageContent";
|
|
import { getCategoryThumbnail } from "../utils/thumbnailUtils";
|
|
|
|
const ResultsPage: React.FC = () => {
|
|
const [overflow, setOverflow] = useState(false);
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
// 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(() => {
|
|
// 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 "{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={searchState.searchResults.streams.map((stream: any) => ({
|
|
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
|
|
key={`category-results-${searchState.query}`}
|
|
variant="search"
|
|
type="category"
|
|
items={searchState.searchResults.categories.map((category: any) => ({
|
|
id: category.category_id,
|
|
type: "category",
|
|
title: category.category_name,
|
|
viewers: 0,
|
|
thumbnail: getCategoryThumbnail(category.category_name),
|
|
}))}
|
|
title="Categories"
|
|
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)]"
|
|
amountForScroll={3}
|
|
/>
|
|
|
|
<ListRow
|
|
key={`user-results-${searchState.query}`}
|
|
variant="search"
|
|
type="user"
|
|
items={searchState.searchResults.users.map((user: any) => ({
|
|
id: user.user_id,
|
|
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;
|