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

6
frontend/src/components/Layout/ListItem.tsx
View File

@@ -26,13 +26,13 @@ const ListItem: React.FC<ListItemProps> = ({
return ( return (
<div className="p-4 pb-10"> <div className="p-4 pb-10">
<div <div
className={`group relative w-fit flex flex-col bg-blue-600 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((20vw+20vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-blue-800 z-50`} className={`group relative w-fit flex flex-col bg-purple-900 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((27vw+27vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 z-50 transition-all`}
onClick={onItemClick} onClick={onItemClick}
> >
<img <img
src="/images/monkey.png" src="/images/monkey.png"
alt={`user ${username}`} alt={`user ${username}`}
className="rounded-xl max-w-[calc((20vw+20vh)/2)] border-[0.15em] border-purple-500 cursor-pointer" className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
/> />
<button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2"> <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
{title} {title}
@@ -50,7 +50,7 @@ const ListItem: React.FC<ListItemProps> = ({
return ( return (
<div className="p-4"> <div className="p-4">
<div <div
className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-pink-700 hover:scale-105 transition-all`} className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 transition-all`}
onClick={onItemClick} onClick={onItemClick}
> >
<div className="relative w-full aspect-video overflow-hidden rounded-t-lg"> <div className="relative w-full aspect-video overflow-hidden rounded-t-lg">

56
frontend/src/components/Layout/ListRow.tsx
View File

@@ -89,7 +89,7 @@ const ListRow = forwardRef<
return ( return (
<div <div
className={`${extraClasses} flex w-full relative rounded-[1.5rem] text-white transition-all ${ className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
variant === "search" variant === "search"
? "items-center" ? "items-center"
: "flex-col space-y-4 py-6 px-5 mx-2 mt-5" : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
@@ -134,30 +134,38 @@ const ListRow = forwardRef<
<div <div
ref={slider} ref={slider}
className={`flex ${ className={`flex ${
wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap" wrap ? "flex-wrap justify-between" : "overflow-x-scroll whitespace-nowrap"
} max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`} } max-w-[95%] items-center w-full mx-auto scroll-smooth scrollbar-hide`}
> >
{currentItems.map((item) => ( {currentItems.length === 0 ? (
<ListItem <h1 className="mx-auto">Nothing Found</h1>
key={`${item.type}-${item.id}`} ) : (
id={item.id} <>
type={type} {currentItems.map((item) => (
title={item.title} <ListItem
username={item.type === "category" ? undefined : item.username} key={`${item.type}-${item.id}`}
streamCategory={ id={item.id}
item.type === "stream" ? item.streamCategory : undefined type={type}
} title={item.title}
viewers={item.viewers} username={
thumbnail={item.thumbnail} item.type === "category" ? undefined : item.username
onItemClick={() => }
(item.type === "stream" || item.type === "user") && streamCategory={
item.username item.type === "stream" ? item.streamCategory : undefined
? onItemClick?.(item.username) }
: onItemClick?.(item.title) viewers={item.viewers}
} thumbnail={item.thumbnail}
extraClasses={`${itemExtraClasses} w-[20vw]`} onItemClick={() =>
/> (item.type === "stream" || item.type === "user") &&
))} item.username
? onItemClick?.(item.username)
: onItemClick?.(item.title)
}
extraClasses={`${itemExtraClasses}`}
/>
))}
</>
)}
</div> </div>
</div> </div>
{children} {children}

17
frontend/src/pages/AllCategoriesPage.tsx
View File

@@ -5,7 +5,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll"; import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import LoadingScreen from "../components/Layout/LoadingScreen"; import LoadingScreen from "../components/Layout/LoadingScreen";
interface categoryData { interface CategoryData {
type: "category"; type: "category";
id: number; id: number;
title: string; title: string;
@@ -13,20 +13,16 @@ interface categoryData {
thumbnail: string; thumbnail: string;
} }
const AllCategoriesPage: React.FC = () => { const AllCategoriesPage: React.FC = () => {
const [categories, setCategories] = useState<categoryData[]>([]); const [categories, setCategories] = useState<CategoryData[]>([]);
const navigate = useNavigate(); const navigate = useNavigate();
const [categoryOffset, setCategoryOffset] = useState(0); const [categoryOffset, setCategoryOffset] = useState(0);
const [noCategories, setNoCategories] = useState(12); const [noCategories, setNoCategories] = useState(12);
const [hasMoreData, setHasMoreData] = useState(true); const [hasMoreData, setHasMoreData] = useState(true);
const [isLoading, setIsLoading] = useState(true);
const listRowRef = useRef<any>(null); const listRowRef = useRef<any>(null);
const isLoading = useRef(false);
const fetchCategories = async () => { const fetchCategories = async () => {
// If already loading, skip this fetch if (isLoading) return;
if (isLoading.current) return;
isLoading.current = true;
try { try {
const response = await fetch( const response = await fetch(
@@ -60,7 +56,7 @@ const AllCategoriesPage: React.FC = () => {
console.error("Error fetching categories:", error); console.error("Error fetching categories:", error);
return []; return [];
} finally { } finally {
isLoading.current = false; setIsLoading(false);
} }
}; };
@@ -87,7 +83,7 @@ const AllCategoriesPage: React.FC = () => {
}; };
return ( return (
<DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]"> <DynamicPageContent className="min-h-screen">
<ListRow <ListRow
ref={listRowRef} ref={listRowRef}
type="category" type="category"
@@ -95,6 +91,7 @@ const AllCategoriesPage: React.FC = () => {
items={categories} items={categories}
onItemClick={handleCategoryClick} onItemClick={handleCategoryClick}
extraClasses="bg-[var(--recommend)] text-center" extraClasses="bg-[var(--recommend)] text-center"
itemExtraClasses="w-[20vw]"
wrap={true} wrap={true}
/> />
</DynamicPageContent> </DynamicPageContent>

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

@@ -27,128 +27,83 @@ const ResultsPage: React.FC = ({ }) => {
return () => window.removeEventListener("resize", checkHeight); 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 ( return (
<DynamicPageContent id="results-page" navbarVariant="no-navbar"> <DynamicPageContent id="results-page" navbarVariant="no-searchbar">
<div className="flex flex-col items-center justify-evenly min-h-[96vh] p-4"> <div className="flex flex-col items-center justify-evenly gap-4 p-4">
<h1 className="text-3xl font-bold mb-4"> <h1 className="text-3xl font-bold mb-4">
Search results for "{query}" Search results for "{query}"
</h1> </h1>
<SearchBar value={query} /> <SearchBar value={query} />
<div id="results" className="flex flex-col flex-grow w-full"> <div id="results" className="flex flex-col flex-grow gap-10 w-full">
{searchResults.streams.length > 0 && ( <ListRow
<ListRow variant="search"
variant="search" type="stream"
type="stream" items={searchResults.streams.map((stream: any) => ({
items={searchResults.streams.map((stream: any) => ({ id: stream.user_id,
id: stream.user_id, type: "stream",
type: "stream", title: stream.title,
title: stream.title, username: stream.username,
username: stream.username, streamCategory: stream.category_name,
streamCategory: stream.category_name, viewers: stream.num_viewers,
viewers: stream.num_viewers, thumbnail: stream.thumbnail_url,
thumbnail: stream.thumbnail_url, }))}
}))} title="Streams"
title="Streams" onItemClick={(streamer_name: string) =>
onItemClick={(streamer_name: string) => (window.location.href = `/${streamer_name}`)
(window.location.href = `/${streamer_name}`) }
} 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} amountForScroll={3}
/> />
)}
{searchResults.categories.length > 0 && ( <ListRow
<ListRow variant="search"
variant="search" type="category"
type="category" items={searchResults.categories.map((category: any) => ({
items={searchResults.categories.map((category: any) => ({ id: category.category_id,
id: category.category_id, type: "category",
type: "category", title: category.category_name,
title: category.category_name, viewers: 0,
viewers: 0, thumbnail: `/images/category_thumbnails/${category.category_name
thumbnail: `/images/category_thumbnails/${category.category_name .toLowerCase()
.toLowerCase() .replace(/ /g, "_")}.webp`,
.replace(/ /g, "_")}.webp`, }))}
}))} title="Categories"
title="Categories" onItemClick={(category_name: string) =>
onItemClick={(category_name: string) => navigate(`/category/${category_name}`)
navigate(`/category/${category_name}`) }
} titleClickable={true}
titleClickable={true} 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} amountForScroll={3}
/> />
)}
{searchResults.users.length > 0 && ( <ListRow
<ListRow variant="search"
variant="search" type="user"
type="user" items={searchResults.users.map((user: any) => ({
items={searchResults.users.map((user: any) => ({ id: user.user_id,
id: user.user_id, type: "user",
type: "user", title: `${user.is_live ? "🔴" : ""} ${user.username}`,
title: `${user.is_live ? "🔴" : ""} ${user.username}`, viewers: 0,
viewers: 0, username: user.username,
username: user.username, thumbnail: user.profile_picture,
thumbnail: user.profile_picture, }))}
}))} title="Users"
title="Users" onItemClick={(username: string) =>
onItemClick={(username: string) => (window.location.href = `/user/${username}`)
(window.location.href = `/user/${username}`) }
} amountForScroll={3}
amountForScroll={3} extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
itemExtraClasses="min-w-[calc(12vw+12vh/2)]" itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
/> />
)}
</div> </div>
<div <div
className={`${overflow && "absolute top-[5vh] right-[2vw]" className={`${overflow && "absolute top-[5vh] right-[2vw]"
} flex gap-[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>
</div> </div>
</DynamicPageContent> </DynamicPageContent>