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

REFACTOR: Update list components style;

Browse Source 
REFACTOR: Correct loading handling in `AllCategoriesPage`;
REFACTOR: Update to `ResultsPage`
This commit is contained in:
Chris-1010
2025-02-26 13:25:40 +00:00
parent d36eaffafb
commit 379140852a
4 changed files with 105 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,128 +27,83 @@ const ResultsPage: React.FC = ({ }) => {
return () => window.removeEventListener("resize", checkHeight);
}, []);
if (
searchResults.categories.length === 0 &&
searchResults.users.length === 0 &&
searchResults.streams.length === 0
) {
return (
<DynamicPageContent
id="results-page"
navbarVariant="no-navbar"
className="flex flex-col items-stretch justify-stretch h-[70vh] my-[15vh] p-4"
contentClassName="flex flex-col items-center h-full p-4"
style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
>
{/* Hide Scrollbar for WebKit-based Browsers */}
<style>
{`
::-webkit-scrollbar {
display: none;
}
`}
</style>
<h1 className="text-3xl font-bold mb-4">
Search results for "{query}"
</h1>
<SearchBar value={query} />
<h3 className="flex items-center flex-grow text-2xl text-gray-400">Nothing Found</h3>
<div className="flex gap-8">
<Button onClick={() => navigate(-1)}>Go Back</Button>
</div>
</DynamicPageContent>
);
}
return (
<DynamicPageContent id="results-page" navbarVariant="no-navbar">
<div className="flex flex-col items-center justify-evenly min-h-[96vh] p-4">
<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} />
<div id="results" className="flex flex-col flex-grow w-full">
{searchResults.streams.length > 0 && (
<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}`)
}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
<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}
/>
{searchResults.categories.length > 0 && (
<ListRow
variant="search"
type="category"
items={searchResults.categories.map((category: any) => ({
id: category.category_id,
type: "category",
title: category.category_name,
viewers: 0,
thumbnail: `/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`,
}))}
title="Categories"
onItemClick={(category_name: string) =>
navigate(`/category/${category_name}`)
}
titleClickable={true}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
amountForScroll={3}
/>
)}
<ListRow
variant="search"
type="category"
items={searchResults.categories.map((category: any) => ({
id: category.category_id,
type: "category",
title: category.category_name,
viewers: 0,
thumbnail: `/images/category_thumbnails/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`,
}))}
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}
/>
{searchResults.users.length > 0 && (
<ListRow
variant="search"
type="user"
items={searchResults.users.map((user: any) => ({
id: user.user_id,
type: "user",
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
viewers: 0,
username: user.username,
thumbnail: user.profile_picture,
}))}
title="Users"
onItemClick={(username: string) =>
(window.location.href = `/user/${username}`)
}
amountForScroll={3}
itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
/>
)}
<ListRow
variant="search"
type="user"
items={searchResults.users.map((user: any) => ({
id: user.user_id,
type: "user",
title: `${user.is_live ? "🔴" : ""} ${user.username}`,
viewers: 0,
username: user.username,
thumbnail: user.profile_picture,
}))}
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
className={`${overflow && "absolute top-[5vh] right-[2vw]"
} flex gap-[2vw]`}
>
<Button
extraClasses="text-[2vw]"
onClick={() => (window.location.href = "/")}
>
Go Home
</Button>
<Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
Go Back
</Button>
</div>
</div>
</DynamicPageContent>