ADD: Following Page now Works

frontend/src/components/Input/FollowUserButton.tsx

@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from "react";
+import { useFollow } from "../../hooks/useFollow";
+
+interface FollowUserButtonProps {
+    user: {
+        user_id: number;
+        username: string;
+        isFollowing: boolean;
+    };
+}
+
+const FollowUserButton: React.FC<FollowUserButtonProps> = ({ user }) => {
+    const [isFollowing, setIsFollowing] = useState<boolean>(user.isFollowing);
+    const [isLoading, setIsLoading] = useState(false);
+
+    const { checkFollowStatus, followUser, unfollowUser } = useFollow();
+
+    useEffect(() => {
+        setIsFollowing(user.isFollowing);
+    }, [user.isFollowing]);
+
+    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.stopPropagation();
+        setIsLoading(true);
+        try {
+            if (isFollowing) {
+                await unfollowUser(user.user_id);
+                setIsFollowing(false);
+            } else {
+                await followUser(user.user_id);
+                setIsFollowing(true);
+            }
+        } catch (error) {
+            console.error("Error toggling follow state:", error);
+        }
+        setIsLoading(false);
+    };
+
+    return (
+        <button
+            onClick={handleClick}
+            disabled={isLoading}
+            className={`px-4 py-2 text-sm rounded-md font-bold transition-all ${
+                isFollowing
+                    ? "bg-gray-700 hover:bg-red-600 text-white"
+                    : "bg-purple-600 hover:bg-purple-700 text-white"
+            }`}
+        >
+            {isFollowing ? "Unfollow" : "Follow"}
+        </button>
+    );
+};
+
+export default FollowUserButton;

frontend/src/pages/FollowedCategories.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { useCategoryFollow } from "../hooks/useCategoryFollow";
 import FollowButton from "../components/Input/FollowButton";
+import { useAuthModal } from "../hooks/useAuthModal";
 
 
 interface Category {
@@ -22,6 +23,7 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
     const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
     const { categoryName } = useParams<{ categoryName: string }>();
     const { checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow();
+    
 
     useEffect(() => {
         if (categoryName) checkCategoryFollowStatus(categoryName);

frontend/src/pages/Following.tsx

@@ -1,35 +1,45 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useSidebar } from "../context/SidebarContext";
+import { useNavigate } from "react-router-dom";
-import { ToggleButton } from "../components/Input/Button";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
-import { Sidebar as SidebarIcon } from "lucide-react";
+import { useFollow } from "../hooks/useFollow";
-import { useNavigate } from "react-router-dom"; // Import useNavigate
+import { useAuthModal } from "../hooks/useAuthModal";
-import { CategoryType } from "../types/CategoryType";
+import FollowUserButton from "../components/Input/FollowUserButton";
 
-// Define TypeScript interfaces
 interface Streamer {
   user_id: number;
   username: string;
 }
 
-interface FollowingProps {
+interface FollowingStreamerProps {
   extraClasses?: string;
 }
 
-const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
+const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
-  const { showSideBar, setShowSideBar } = useSidebar();
   const navigate = useNavigate();
-  const { username, isLoggedIn } = useAuth();
+  const { isLoggedIn } = useAuth();
   const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
+  const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
+
+  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+    useFollow();
 
-  // Fetch followed streamers
   useEffect(() => {
     const fetchFollowedStreamers = async () => {
       try {
         const response = await fetch("/api/user/following");
         if (!response.ok) throw new Error("Failed to fetch followed streamers");
         const data = await response.json();
-        setFollowedStreamers(data.streamers || []);
+        setFollowedStreamers(data);
+
+        const updatedStatus: { [key: number]: boolean } = {};
+        for (const streamer of data || []) {
+          const status = await checkFollowStatus(streamer.username);
+          updatedStatus[streamer.user_id] = Boolean(status);
+        }
+        setFollowingStatus(updatedStatus);
+
+        console.log("Fetched Follow Status:", updatedStatus); // Log the status
       } catch (error) {
         console.error("Error fetching followed streamers:", error);
       }
@@ -40,103 +50,51 @@ const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
     }
   }, [isLoggedIn]);
 
-  // Handle sidebar toggle
+
-  const handleSideBar = () => {
+  const handleFollowToggle = async (userId: number) => {
-    setShowSideBar(!showSideBar);
+    const isCurrentlyFollowing = followingStatus[userId];
+
+    if (isCurrentlyFollowing) {
+      await unfollowUser(userId);
+    } else {
+      await followUser(userId);
+    }
+
+    // Update local state for this specific streamer
+    setFollowingStatus((prev) => ({
+      ...prev,
+      [userId]: !isCurrentlyFollowing, // Toggle based on previous state
+    }));
   };
 
   return (
-    <>
+    <DynamicPageContent>
-      {/* Sidebar Toggle Button */}
-      <ToggleButton
-        onClick={handleSideBar}
-        extraClasses={`absolute group text-[1rem] top-[9vh] ${
-          showSideBar
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
-        } ease-in-out cursor-pointer z-[50]`}
-        toggled={showSideBar}
-      >
-        <SidebarIcon className="h-[2vw] w-[2vw]" />
-
-        {showSideBar && (
-          <small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
-            Press S
-          </small>
-        )}
-      </ToggleButton>
-
-      {/* Sidebar Container */}
       <div
         id="sidebar"
-        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
+        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}`}
-        transition-all duration-500 ease-in-out ${
-          showSideBar ? "translate-x-0" : "-translate-x-full"
-        } ${extraClasses}`}
       >
-        {/* Profile Info */}
-        <div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
-          <img
-            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)]">
-                {username}
-              </div>
-            </button>
-          </div>
-        </div>
-
-        {/* Following Section */}
         <div
-          id="following"
+          id="followed-users"
-          className="flex flex-col flex-grow justify-evenly p-4 gap-4"
+          className={`grid grid-cols-2 gap-4 p-4 w-full`}>
-        >
+          {followedStreamers.map((streamer: any) => (
-          <div
+            <div
-            className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
+              key={`streamer-${streamer.username}`}
-            onMouseEnter={(e) =>
+              className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 font-bold transition-colors"
-              (e.currentTarget.style.boxShadow = "var(--follow-shadow)")
+            /*onClick={() => navigate(`/user/${streamer.username}`)}*/
-            }
+            >
-            onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
+              {streamer.username}
-          >
+              <FollowUserButton
-            <h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
+                user={{
-              Following
+                  user_id: streamer.user_id,
-            </h1>
+                  username: streamer.username,
-          </div>
+                  isFollowing: followingStatus[streamer.user_id] || true,
-
+                }}
-          {/* Streamers Followed */}
+              />
-          <div
-            id="streamers-followed"
-            className="flex flex-col flex-grow items-center"
-          >
-            <h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
-              Streamers
-            </h2>
-            <div className="flex flex-col flex-grow justify-evenly w-full">
-              {followedStreamers.map((streamer) => (
-                <button
-                  key={`streamer-${streamer.username}`}
-                  className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
-                  onClick={() => navigate(`/user/${streamer.username}`)}
-                >
-                  {streamer.username}
-                </button>
-              ))}
             </div>
-          </div>
+          ))}
         </div>
       </div>
-    </>
+    </DynamicPageContent>
   );
 };