FINISH: User Category Page

frontend/src/components/Input/FollowButton.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect, useState } from "react";
-import { CircleMinus, CirclePlus } from "lucide-react";
+import { CircleMinus, CirclePlus, Pencil } from "lucide-react";
 import { useCategoryFollow } from "../../hooks/useCategoryFollow";
 
+
 interface FollowButtonProps {
     category: {
         category_id: number;
@@ -11,6 +12,7 @@ interface FollowButtonProps {
 }
 
 const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
+    const [mode, setMode] = useState<"pencil" | "minus" | "plus">("pencil");
     const [isFollowing, setIsFollowing] = useState<boolean | null>(category.isFollowing);
     const [isLoading, setIsLoading] = useState(false);
     const { followCategory, unfollowCategory } = useCategoryFollow();
@@ -23,6 +25,17 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
         e.stopPropagation();
         setIsLoading(true);
 
+        try {
+            // Cycle between modes
+            setMode((prevMode) => {
+                if (prevMode === "pencil") return "minus";
+                if (prevMode === "minus") return "plus";
+                return "minus"; 
+            });
+        } catch (error) {
+            console.error("Error toggling state:", error);
+        }
+
         try {
             if (isFollowing) {
                 await unfollowCategory(category.category_name);
@@ -40,13 +53,15 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
 
     return (
         <button
-            className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[9999]"
+            className="absolute top-2 right-2 bg-black bg-opacity-50 p-2 rounded-full hover:bg-opacity-75 transition z-[1]"
             onClick={handleClick}
             disabled={isLoading}
         >
-            {isLoading ? (
+                       {isLoading ? (
                 <span className="text-white w-5 h-5">⏳</span>
-            ) : isFollowing ? (
+            ) : mode === "pencil" ? (
+                <Pencil className="text-white w-5 h-5" />
+            ) : mode === "minus" ? (
                 <CircleMinus className="text-white w-5 h-5" />
             ) : (
                 <CirclePlus className="text-white w-5 h-5" />
@@ -54,5 +69,4 @@ const FollowButton: React.FC<FollowButtonProps> = ({ category }) => {
         </button>
     );
 };
-
 export default FollowButton;

frontend/src/pages/FollowedCategories.tsx

@@ -1,14 +1,11 @@
 import React, { useState, useEffect, useRef } from "react";
 import { useAuth } from "../context/AuthContext";
 import { useNavigate, useParams } from "react-router-dom";
-import { CircleMinus, CirclePlus } from "lucide-react";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
-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;
@@ -30,7 +27,6 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
         if (categoryName) checkCategoryFollowStatus(categoryName);
     }, [categoryName]);
 
-
     useEffect(() => {
         if (!isLoggedIn) return;
 
@@ -48,50 +44,6 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
         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
-                )
-            );
-
-            if (currentFollowState) {
-                await unfollowCategory(categoryName);
-            } else {
-                await followCategory(categoryName);
-            }
-
-            // Update only the clicked category
-            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
-                )
-            );
-        }
-    };
 
     return (
         <DynamicPageContent>