Merge branch 'main' of https://github.com/john-david3/cs3305-team11
This commit is contained in:
EvanLin3141
@@ -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,105 +6,105 @@ 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();
|
||||
const { searchResults, query } = location.state || {
|
||||
searchResults: { categories: [], users: [], streams: [] },
|
||||
query: "",
|
||||
};
|
||||
const ResultsPage: React.FC = () => {
|
||||
const [overflow, setOverflow] = useState(false);
|
||||
const location = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
useEffect(() => {
|
||||
const checkHeight = () => {
|
||||
setOverflow(
|
||||
document.documentElement.scrollHeight + 20 > window.innerHeight
|
||||
);
|
||||
};
|
||||
// Initialize with state from navigation, or empty defaults
|
||||
const [searchState, setSearchState] = useState({
|
||||
searchResults: location.state?.searchResults || { categories: [], users: [], streams: [] },
|
||||
query: location.state?.query || "",
|
||||
});
|
||||
|
||||
checkHeight();
|
||||
window.addEventListener("resize", checkHeight);
|
||||
// Handle new search results
|
||||
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 (
|
||||
<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} />
|
||||
useEffect(() => {
|
||||
// If location state changes, update our internal state
|
||||
if (location.state) {
|
||||
setSearchState({
|
||||
searchResults: location.state.searchResults,
|
||||
query: location.state.query,
|
||||
});
|
||||
}
|
||||
}, [location.state]);
|
||||
|
||||
<div id="results" className="flex flex-col flex-grow gap-10 w-full">
|
||||
<ListRow
|
||||
variant="search"
|
||||
type="stream"
|
||||
items={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}
|
||||
/>
|
||||
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)} />
|
||||
|
||||
<ListRow
|
||||
variant="search"
|
||||
type="category"
|
||||
items={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}
|
||||
/>
|
||||
<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
|
||||
variant="search"
|
||||
type="user"
|
||||
items={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>
|
||||
<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}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={`${overflow && "absolute top-[5vh] right-[2vw]"
|
||||
} flex gap-[2vw]`}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</DynamicPageContent>
|
||||
);
|
||||
<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;
|
||||
|
||||
Reference in New Issue
Block a user