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;