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

REFACTOR: Enhance Categories Page;

Browse Source 
REFACTOR: Update ListRow component;
REFACTOR: Improve component structure and navigation; FEAT: Scroll fetching hook;
REFACTOR: Add more testing_data to database to demonstrate updated ListRow component;
This commit is contained in:
Chris-1010
2025-02-16 23:01:09 +00:00
parent 9f59810833
commit d79f617b4f
13 changed files with 240 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
frontend/src/pages/AllCategoriesPage.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React, { useEffect } from "react";
import Navbar from "../components/Navigation/Navbar";
import { useNavigate } from "react-router-dom";
import ListRow from "../components/Layout/ListRow";
import { useCategories } from "../context/ContentContext";
const AllCategoriesPage: React.FC = () => {
const { categories, setCategories } = useCategories();
const navigate = useNavigate();
useEffect(() => {
const fetchCategories = async () => {
try {
const response = await fetch("/api/categories/popular/8/0");
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const data = await response.json();
// Transform the data to match CategoryItem interface
const processedCategories = data.map((category: any) => ({
type: "category" as const,
id: category.category_id,
title: category.category_name,
viewers: category.num_viewers,
thumbnail: `/images/thumbnails/categories/${category.category_name
.toLowerCase()
.replace(/ /g, "_")}.webp`,
}));
setCategories(processedCategories);
} catch (error) {
console.error("Error fetching categories:", error);
}
};
fetchCategories();
}, [setCategories]);
if (!categories.length) {
return (
<div className="h-screen w-screen flex items-center justify-center text-white">
Loading...
</div>
);
}
const handleCategoryClick = (categoryName: string) => {
console.log(categoryName);
navigate(`/category/${categoryName}`);
};
return (
<div
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar />
<ListRow
type="category"
title="All Categories"
items={categories}
onClick={handleCategoryClick}
extraClasses="text-center"
wrap={true}
/>
</div>
);
};
export default AllCategoriesPage;

53
frontend/src/pages/CategoriesPage.tsx
View File

@@ -1,53 +0,0 @@
import React, { useState, useEffect } from "react";
import Navbar from "../components/Layout/Navbar";
import { useNavigate } from "react-router-dom";
const CategoriesPage: React.FC = () => {
const [noCategories, setNoCategories] = useState<number>(0);
const [moreCategories, setMoreCategories] = useState<number>(12);
const [isLoading, setIsLoading] = useState(true);
const navigate = useNavigate();
useEffect(() => {
const fetchCategories = async () => {
try {
const response = await fetch(`api/categories/popular/${moreCategories}`)
if (!response.ok) {
throw new Error("Failed to fetch categories");
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching categories:", error);
} finally {
setIsLoading(false);
}
};
fetchCategories();
}, [noCategories]);
if (isLoading) {
return (
<div className="h-screen w-screen flex items-center justify-center text-white">
Loading...
</div>
);
}
const handleCategoryClick = (category_name: string) => {
navigate(`/category${category_name}`);
};
return (
<div
className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
>
<Navbar />
<h1>Categories Page</h1>
</div>
);
};
export default CategoriesPage;

3
frontend/src/pages/CategoryPage.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import Navbar from "../components/Layout/Navbar";
import Navbar from "../components/Navigation/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
@@ -78,6 +78,7 @@ const CategoryPage: React.FC = () => {
title={`${category_name} Streams`}
description={`Live streams in the ${category_name} category`}
items={streams}
wrap={true}
onClick={handleStreamClick}
extraClasses="bg-purple-950/60"
/>

23
frontend/src/pages/HomePage.tsx
View File

@@ -1,8 +1,9 @@
import React from "react";
import Navbar from "../components/Layout/Navbar";
import Navbar from "../components/Navigation/Navbar";
import ListRow from "../components/Layout/ListRow";
import { useNavigate } from "react-router-dom";
import { useStreams, useCategories } from "../context/ContentContext";
import Button from "../components/Input/Button";
interface HomePageProps {
variant?: "default" | "personalised";
@@ -33,7 +34,8 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
<ListRow
type="stream"
title={
"Streams - Live Now" + (variant === "personalised" ? " - Recommended" : "")
"Streams - Live Now" +
(variant === "personalised" ? " - Recommended" : "")
}
description={
variant === "personalised"
@@ -41,9 +43,14 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
: "Streamers that are currently live"
}
items={streams}
wrap={false}
onClick={handleStreamClick}
extraClasses="bg-red-950/60"
/>
>
<Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
Show More . . .
</Button>
</ListRow>
{/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
<ListRow
@@ -59,9 +66,17 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
: "Categories that have been 'popping off' lately"
}
items={categories}
wrap={false}
onClick={handleCategoryClick}
extraClasses="bg-green-950/60"
/>
>
<Button
extraClasses="absolute right-10"
onClick={() => navigate("/categories")}
>
Show More . . .
</Button>
</ListRow>
</div>
);
};