Files
gander/frontend/src/pages/CategoryPage.tsx
Chris-1010 38a74e0710 UPDATE: Have Stripe only load on pages it's needed;
FIX: Pass proper prop through `ContentContext`;
2025-02-23 23:28:14 +00:00

146 lines
4.4 KiB
TypeScript

import React, { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import ListRow from "../components/Layout/ListRow";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import Button from "../components/Input/Button";
import { useAuth } from "../context/AuthContext";
import { useCategoryFollow } from "../hooks/useCategoryFollow";
import { ListItemProps as StreamData } from "../components/Layout/ListItem";
const CategoryPage: React.FC = () => {
const { categoryName } = useParams<{ categoryName: string }>();
const [streams, setStreams] = useState<StreamData[]>([]);
const listRowRef = useRef<any>(null);
const isLoading = useRef(false);
const [streamOffset, setStreamOffset] = useState(0);
const [noStreams, setNoStreams] = useState(12);
const [hasMoreData, setHasMoreData] = useState(true);
const { isLoggedIn } = useAuth();
const {
isCategoryFollowing,
checkCategoryFollowStatus,
followCategory,
unfollowCategory,
} = useCategoryFollow();
useEffect(() => {
if (categoryName) checkCategoryFollowStatus(categoryName);
}, [categoryName]);
const fetchCategoryStreams = async () => {
// If already loading, skip this fetch
if (isLoading.current) return;
isLoading.current = true;
try {
const response = await fetch(
`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`
);
if (!response.ok) {
throw new Error("Failed to fetch category streams");
}
const data = await response.json();
if (data.length === 0) {
setHasMoreData(false);
return [];
}
setStreamOffset((prev) => prev + data.length);
const processedStreams: StreamData[] = data.map((stream: any) => ({
type: "stream",
id: stream.user_id,
title: stream.title,
username: stream.username,
streamCategory: categoryName,
viewers: stream.num_viewers,
thumbnail:
stream.thumbnail ||
(categoryName &&
`/images/category_thumbnails/${categoryName
.toLowerCase()
.replace(/ /g, "_")}.webp`),
}));
setStreams((prev) => [...prev, ...processedStreams]);
return processedStreams;
} catch (error) {
console.error("Error fetching category streams:", error);
} finally {
isLoading.current = false;
}
};
useEffect(() => {
fetchCategoryStreams();
}, []);
const logOnScroll = async () => {
if (hasMoreData && listRowRef.current) {
const newCategories = await fetchCategoryStreams();
if (newCategories && newCategories.length > 0) {
listRowRef.current.addMoreItems(newCategories);
}
else console.log("No more data to fetch");
}
};
fetchContentOnScroll(logOnScroll, hasMoreData);
const handleStreamClick = (streamerName: string) => {
window.location.href = `/${streamerName}`;
};
if (hasMoreData && !streams.length) {
return (
<div className="h-screen w-screen flex items-center justify-center text-white">
Loading...
</div>
);
}
return (
<DynamicPageContent
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<div className="pt-8">
<ListRow
type="stream"
title={`${categoryName} Streams`}
description={`Live streams in the ${categoryName} category`}
items={streams}
wrap={true}
onItemClick={handleStreamClick}
extraClasses="bg-[var(--recommend)]"
>
{isLoggedIn && (
<Button
extraClasses="absolute right-10"
onClick={() => {
if (categoryName) {
isCategoryFollowing
? unfollowCategory(categoryName)
: followCategory(categoryName);
}
}}
>
{isCategoryFollowing ? "Unfollow" : "Follow"}
</Button>
)}
</ListRow>
</div>
{streams.length === 0 && !isLoading && (
<div className="text-white text-center text-2xl mt-8">
No live streams found in this category
</div>
)}
</DynamicPageContent>
);
};
export default CategoryPage;