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

Update: UserCategoryPage

Browse Source
This commit is contained in:
EvanLin3141
2025-02-27 16:42:46 +00:00
parent a4bd7b5a90
commit 2854d7f754
2 changed files with 71 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Layout/Footer.tsx
View File

@@ -36,7 +36,7 @@ const Footer = () => {
}; };
return ( return (
<footer className="mt-14 h-[12vh] w-full p-4 bg-gradient-to-b from-white/0 via-[#3a0ca3]/50 to-[#3a0ca3] text-white"> <footer className="absolute bottom-0 h-[12vh] w-full p-4 bg-gradient-to-b from-white/0 via-[#3a0ca3]/50 to-[#3a0ca3] text-white">
<div className="flex flex-wrap justify-between gap-x-10 gap-y-6"> <div className="flex flex-wrap justify-between gap-x-10 gap-y-6">
{/* About Section */} {/* About Section */}
<div className="flex-1 min-w-[250px]"> <div className="flex-1 min-w-[250px]">

158
frontend/src/pages/FollowedCategories.tsx
View File

@@ -1,19 +1,18 @@
import React, { useState, useEffect, useRef } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useAuth } from "../context/AuthContext"; import { useAuth } from "../context/AuthContext";
import { CircleMinus as RemoveIcon, CirclePlus as AddIcon } from "lucide-react"; import { useNavigate, useParams } from "react-router-dom";
import { useNavigate } from "react-router-dom"; import { CircleMinus, CirclePlus } from "lucide-react";
import { useParams } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent"; import DynamicPageContent from "../components/Layout/DynamicPageContent";
import Button from "../components/Input/Button"; import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import { useCategoryFollow } from "../hooks/useCategoryFollow"; import { useCategoryFollow } from "../hooks/useCategoryFollow";
import { ListItemProps as StreamData } from "../components/Layout/ListItem"; import { ListItemProps as StreamData } from "../components/Layout/ListItem";
import LoadingScreen from "../components/Layout/LoadingScreen"; import LoadingScreen from "../components/Layout/LoadingScreen";
import { getCategoryThumbnail } from "../utils/thumbnailUtils";
interface Category { interface Category {
isFollowing: any; isFollowing: boolean;
category_id: number; category_id: number;
category_name: string; category_name: string;
isLoading?: boolean;
} }
interface FollowedCategoryProps { interface FollowedCategoryProps {
@@ -25,41 +24,44 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
const { username, isLoggedIn } = useAuth(); const { username, isLoggedIn } = useAuth();
const [followedCategories, setFollowedCategories] = useState<Category[]>([]); const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
const { categoryName } = useParams<{ categoryName: string }>(); const { categoryName } = useParams<{ categoryName: string }>();
const [streams, setStreams] = useState<StreamData[]>([]); const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
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 {
isCategoryFollowing,
checkCategoryFollowStatus,
followCategory,
unfollowCategory,
} = useCategoryFollow();
const toggleFollow = async (categoryId: number, categoryName: string) => { useEffect(() => {
if (categoryName) checkCategoryFollowStatus(categoryName);
}, [categoryName]);
const toggleFollow = async (categoryId: number, categoryName: string, currentFollowState: boolean) => {
try { try {
setFollowedCategories((prevCategories) => // Set local loading state per category
prevCategories.map((category) => setFollowedCategories(prevCategories =>
category.category_id === categoryId prevCategories.map(cat =>
? { cat.category_id === categoryId ? { ...cat, isLoading: true } : cat
...category,
isFollowing: !category.isFollowing
}
: category
) )
); );
const category = followedCategories.find(cat => cat.category_id === categoryId); if (currentFollowState) {
if (category?.isFollowing) {
await unfollowCategory(categoryName); await unfollowCategory(categoryName);
} else { } else {
await followCategory(categoryName); await followCategory(categoryName);
} }
// Toggle only the clicked button state
setFollowedCategories(prevCategories =>
prevCategories.map(cat =>
cat.category_id === categoryId
? { ...cat, isFollowing: !currentFollowState, isLoading: false }
: cat
)
);
} catch (error) { } catch (error) {
console.error("Error toggling follow state:", error); console.error("Error toggling follow state:", error);
// Reset loading state in case of error
setFollowedCategories(prevCategories =>
prevCategories.map(cat =>
cat.category_id === categoryId ? { ...cat, isLoading: false } : cat
)
);
} }
}; };
@@ -69,8 +71,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
const fetchFollowedCategories = async () => { const fetchFollowedCategories = async () => {
try { try {
const response = await fetch("/api/categories/following"); const response = await fetch("/api/categories/following");
if (!response.ok) if (!response.ok) throw new Error("Failed to fetch followed categories");
throw new Error("Failed to fetch followed categories");
const data = await response.json(); const data = await response.json();
setFollowedCategories(data); setFollowedCategories(data);
} catch (error) { } catch (error) {
@@ -81,69 +82,50 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
fetchFollowedCategories(); fetchFollowedCategories();
}, [isLoggedIn]); }, [isLoggedIn]);
useEffect(() => {
if (categoryName) checkCategoryFollowStatus(categoryName);
}, [categoryName]);
if (hasMoreData && !streams.length) return <LoadingScreen />;
return ( return (
<> <DynamicPageContent>
<DynamicPageContent> <div
<div className={`top-0 left-0 w-screen h-screen flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}> id="sidebar"
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]"> className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide transition-all duration-500 ease-in-out ${extraClasses}`}
<img >
src="/images/monkey.png" {/* Followed Categories */}
alt="profile picture" <div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full">
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer" {followedCategories.map((category: Category) => (
onClick={() => navigate(`/user/${username}`)} <div
/> key={category.category_id}
<div className="text-center flex flex-col items-center justify-center"> className="relative flex flex-col items-center justify-center border border-[--text-color] rounded-lg overflow-hidden hover:shadow-lg transition-all"
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]"> onClick={() => navigate(`/category/${category.category_name}`)}
Logged in as >
</h5>
<button <button
className="font-black text-[1.4rem] hover:underline" className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[9999]"
onClick={() => navigate(`/user/${username}`)} onClick={(e) => {
e.stopPropagation();
toggleFollow(category.category_id, category.category_name, category.isFollowing);
}}
disabled={category.isLoading}
> >
<div className="text-[var(--sideBar-profile-text)]"> {category.isLoading ? (
{username} <span className="text-white w-5 h-5">⏳</span>
</div> ) : category.isFollowing ? (
<CircleMinus className="text-white w-5 h-5" />
) : (
<CirclePlus className="text-white w-5 h-5" />
)}
</button> </button>
</div>
</div>
<div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full"> <img
{followedCategories.map((category: Category) => ( src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
<div alt={category.category_name}
key={category.category_id} className="w-full h-28 object-cover"
className="relative flex flex-col items-center justify-center border border-[--text-color] rounded-lg overflow-hidden hover:shadow-lg transition-all" />
> <div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
<Button {category.category_name}
className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[9999]"
onClick={() => toggleFollow(category.category_id, category.category_name)}
>
{category.isFollowing ? (
<RemoveIcon className="text-white w-5 h-5" />
) : (
<AddIcon className="text-white w-5 h-5" />
)}
</Button>
<img
src={getCategoryThumbnail(category.category_name)}
alt={category.category_name}
className="w-full h-28 object-cover"
/>
<div className="absolute bottom-2 bg-black bg-opacity-60 w-full text-center text-white py-1">
{category.category_name}
</div>
</div> </div>
))} </div>
</div> ))}
</div> </div>
</DynamicPageContent> </div>
</> </DynamicPageContent>
); );
}; };