Update: UserCategoryPage

frontend/src/components/Layout/Footer.tsx

@@ -36,7 +36,7 @@ const Footer = () => {
   };
 
   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">
         {/* About Section */}
         <div className="flex-1 min-w-[250px]">

frontend/src/pages/FollowedCategories.tsx

@@ -1,19 +1,18 @@
 import React, { useState, useEffect, useRef } from "react";
 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 Button from "../components/Input/Button";
+import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
 import { ListItemProps as StreamData } from "../components/Layout/ListItem";
 import LoadingScreen from "../components/Layout/LoadingScreen";
-import { getCategoryThumbnail } from "../utils/thumbnailUtils";
 
 interface Category {
-    isFollowing: any;
+    isFollowing: boolean;
     category_id: number;
     category_name: string;
+    isLoading?: boolean;
 }
 
 interface FollowedCategoryProps {
@@ -25,41 +24,44 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
     const { username, isLoggedIn } = useAuth();
     const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
     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 {
-            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);
             } else {
                 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) {
             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 () => {
             try {
                 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();
                 setFollowedCategories(data);
             } catch (error) {
@@ -81,57 +82,39 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
         fetchFollowedCategories();
     }, [isLoggedIn]);
 
-    useEffect(() => {
-        if (categoryName) checkCategoryFollowStatus(categoryName);
-    }, [categoryName]);
-
-    if (hasMoreData && !streams.length) return <LoadingScreen />;
-
     return (
-        <>
         <DynamicPageContent>
-                <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}`}>
+            <div
-                    <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
+                id="sidebar"
-                        <img
+                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}`}
-                            src="/images/monkey.png"
-                            alt="profile picture"
-                            className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
-                            onClick={() => navigate(`/user/${username}`)}
-                        />
-                        <div className="text-center flex flex-col items-center justify-center">
-                            <h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
-                                Logged in as
-                            </h5>
-                            <button
-                                className="font-black text-[1.4rem] hover:underline"
-                                onClick={() => navigate(`/user/${username}`)}
             >
-                                <div className="text-[var(--sideBar-profile-text)]">
+                {/* Followed Categories */}
-                                    {username}
-                                </div>
-                            </button>
-                        </div>
-                    </div>
-
                 <div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full">
                     {followedCategories.map((category: Category) => (
                         <div
                             key={category.category_id}
                             className="relative flex flex-col items-center justify-center border border-[--text-color] rounded-lg overflow-hidden hover:shadow-lg transition-all"
+                            onClick={() => navigate(`/category/${category.category_name}`)}
                         >
-                                <Button
+                            <button
                                 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)}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    toggleFollow(category.category_id, category.category_name, category.isFollowing);
+                                }}
+                                disabled={category.isLoading}
                             >
-                                    {category.isFollowing ? (
+                                {category.isLoading ? (
-                                        <RemoveIcon className="text-white w-5 h-5" />
+                                    <span className="text-white w-5 h-5">⏳</span>
+                                ) : category.isFollowing ? (
+                                    <CircleMinus className="text-white w-5 h-5" />
                                 ) : (
-                                        <AddIcon className="text-white w-5 h-5" />
+                                    <CirclePlus className="text-white w-5 h-5" />
                                 )}
-                                </Button>
+                            </button>
 
                             <img
-                                    src={getCategoryThumbnail(category.category_name)}
+                                src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
                                 alt={category.category_name}
                                 className="w-full h-28 object-cover"
                             />
@@ -143,7 +126,6 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
                 </div>
             </div>
         </DynamicPageContent>
-        </>
     );
 };