Update: FollowedCategories page now have separate buttons

frontend/src/components/Input/FollowButton.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from "react";
+import { CircleMinus, CirclePlus } from "lucide-react";
+import { useCategoryFollow } from "../../hooks/useCategoryFollow";
+
+interface FollowButtonProps {
+    category: {
+        category_id: number;
+        category_name: string;
+        isFollowing: boolean;
+    };
+}
+
+const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
+    const [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
+    const [isLoading, setIsLoading] = useState(false);
+    const { followCategory, unfollowCategory } = useCategoryFollow();
+
+    useEffect(() => {
+        setIsFollowing(category.isFollowing);
+    }, [category.isFollowing]);
+
+    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        setIsLoading(true);
+
+        try {
+            if (isFollowing) {
+                await unfollowCategory(category.category_name);
+                setIsFollowing(false);
+            } else {
+                await followCategory(category.category_name);
+                setIsFollowing(true);
+            }
+        } catch (error) {
+            console.error("Error toggling follow state:", error);
+        }
+
+        setIsLoading(false);
+    };
+
+    return (
+        <button
+            className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[9999]"
+            onClick={handleClick}
+            disabled={isLoading}
+        >
+            {isLoading ? (
+                <span className="text-white w-5 h-5">⏳</span>
+            ) : isFollowing ? (
+                <CircleMinus className="text-white w-5 h-5" />
+            ) : (
+                <CirclePlus className="text-white w-5 h-5" />
+            )}
+        </button>
+    );
+};
+
+export default FollowButton;

frontend/src/pages/FollowedCategories.tsx

@@ -7,12 +7,12 @@ 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 FollowButton from "../components/Input/FollowButton";
 
 interface Category {
     isFollowing: boolean;
     category_id: number;
     category_name: string;
-    isLoading?: boolean;
 }
 
 interface FollowedCategoryProps {
@@ -30,9 +30,37 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
         if (categoryName) checkCategoryFollowStatus(categoryName);
     }, [categoryName]);
 
-    const toggleFollow = async (categoryId: number, categoryName: string, currentFollowState: boolean) => {
+
+    useEffect(() => {
+        if (!isLoggedIn) return;
+
+        const fetchFollowedCategories = async () => {
             try {
-            // Set local loading state per category
+                const response = await fetch("/api/categories/following");
+                if (!response.ok) throw new Error("Failed to fetch followed categories");
+                const data = await response.json();
+                setFollowedCategories(data);
+            } catch (error) {
+                console.error("Error fetching followed categories:", error);
+            }
+        };
+
+        fetchFollowedCategories();
+    }, [isLoggedIn]);
+
+    useEffect(() => {
+        toggleFollow;
+    })
+
+    const toggleFollow = async (categoryId: number, categoryName: string) => {
+        // Find the current category state from followedCategories
+        const category = followedCategories.find(cat => cat.category_id === categoryId);
+        if (!category) return;
+
+        const currentFollowState = category.isFollowing; // Use the actual state instead of isCategoryFollowing
+
+        try {
+            // Set local state per category (independent button states)
             setFollowedCategories(prevCategories =>
                 prevCategories.map(cat =>
                     cat.category_id === categoryId ? { ...cat, isLoading: true } : cat
@@ -45,7 +73,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
                 await followCategory(categoryName);
             }
 
-            // Toggle only the clicked button state
+            // Update only the clicked category
             setFollowedCategories(prevCategories =>
                 prevCategories.map(cat =>
                     cat.category_id === categoryId
@@ -65,23 +93,6 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
         }
     };
 
-    useEffect(() => {
-        if (!isLoggedIn) return;
-
-        const fetchFollowedCategories = async () => {
-            try {
-                const response = await fetch("/api/categories/following");
-                if (!response.ok) throw new Error("Failed to fetch followed categories");
-                const data = await response.json();
-                setFollowedCategories(data);
-            } catch (error) {
-                console.error("Error fetching followed categories:", error);
-            }
-        };
-
-        fetchFollowedCategories();
-    }, [isLoggedIn]);
-
     return (
         <DynamicPageContent>
             <div
@@ -90,29 +101,14 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
             >
                 {/* Followed Categories */}
                 <div id="categories-followed" className="grid grid-cols-3 gap-4 p-4 w-full">
-                    {followedCategories.map((category: Category) => (
+                    {followedCategories.map((category) => {
+                        return (
                             <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
+                                <FollowButton category={category}/>
-                                className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[9999]"
-                                onClick={(e) => {
-                                    e.stopPropagation();
-                                    toggleFollow(category.category_id, category.category_name, category.isFollowing);
-                                }}
-                                disabled={category.isLoading}
-                            >
-                                {category.isLoading ? (
-                                    <span className="text-white w-5 h-5">⏳</span>
-                                ) : category.isFollowing ? (
-                                    <CircleMinus className="text-white w-5 h-5" />
-                                ) : (
-                                    <CirclePlus className="text-white w-5 h-5" />
-                                )}
-                            </button>
-
                                 <img
                                     src={`/images/category_thumbnails/${category.category_name.toLowerCase().replace(/ /g, "_")}.webp`}
                                     alt={category.category_name}
@@ -122,7 +118,9 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
                                     {category.category_name}
                                 </div>
                             </div>
-                    ))}
+                        );
+                    })}
+
                 </div>
             </div>
         </DynamicPageContent>