UPDATE: Following Page now Works

frontend/src/App.tsx

@@ -76,7 +76,6 @@ function App() {
 								<Route path="/results" element={<ResultsPage />}></Route>
 								<Route path="/404" element={<NotFoundPage />} />
 								<Route path="/user/:username/following" element={<Following />} />
-								<Route path="/user/:username/yourCategories" element={<FollowedCategories />} />
 								<Route path="*" element={<Navigate to="/404" replace />} />
 							</Routes>
 						</BrowserRouter>

frontend/src/pages/FollowUsers.tsx

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import { useNavigate } from "react-router-dom";
+import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { useFollow } from "../hooks/useFollow";
+import { useAuthModal } from "../hooks/useAuthModal";
+import FollowUserButton from "../components/Input/FollowUserButton";
+
+interface Streamer {
+  user_id: number;
+  username: string;
+}
+
+interface FollowingStreamerProps {
+  extraClasses?: string;
+}
+
+const FollowUsers: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
+  const navigate = useNavigate();
+  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();
+
+  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);
+
+        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);
+      }
+    };
+
+    if (isLoggedIn) {
+      fetchFollowedStreamers();
+    }
+  }, [isLoggedIn]);
+
+
+  const handleFollowToggle = async (userId: number) => {
+    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>
+      <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 transition-all duration-500 ease-in-out ${extraClasses}`}
+      >
+        <div
+          id="followed-users"
+          className={`grid grid-cols-2 gap-4 p-4 w-full`}>
+          {followedStreamers.map((streamer: any) => (
+            <div
+              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 font-bold transition-colors"
+            /*onClick={() => navigate(`/user/${streamer.username}`)}*/
+            >
+              {streamer.username}
+              <FollowUserButton
+                user={{
+                  user_id: streamer.user_id,
+                  username: streamer.username,
+                  isFollowing: followingStatus[streamer.user_id] || true,
+                }}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </DynamicPageContent>
+  );
+};
+
+export default FollowUsers;

frontend/src/pages/Following.tsx

@@ -1,71 +1,79 @@
 import React, { useEffect, useState } from "react";
 import { useAuth } from "../context/AuthContext";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { useFollow } from "../hooks/useFollow";
-import { useAuthModal } from "../hooks/useAuthModal";
 import FollowUserButton from "../components/Input/FollowUserButton";
 
 interface Streamer {
-	user_id: number;
+  user_id: number;
-	username: string;
+  username: string;
 }
 
-interface FollowingStreamerProps {
+interface Category {
+  category_id: number;
+  category_name: string;
+}
+
+interface FollowingProps {
   extraClasses?: string;
 }
 
-const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
+const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
   const navigate = useNavigate();
   const { isLoggedIn } = useAuth();
   const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
-  const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({}); // Store follow status for each streamer
+  const [followedCategories, setFollowedCategories] = useState<Category[]>([]);
+  const [followingStatus, setFollowingStatus] = useState<{ [key: number]: boolean }>({});
 
-  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+  const { checkFollowStatus, followUser, unfollowUser } = useFollow();
-    useFollow();
+
+  const location = useLocation();
+  const queryParams = new URLSearchParams(location.search);
+  const initialTab = queryParams.get("tab") === "streamers" ? "streamers" : "categories";
+
+  const [activeTab, setActiveTab] = useState<"categories" | "streamers">(initialTab);
+  //const [followingStatus, setFollowingStatus] = useState<Record<number, boolean>>({});
 
   useEffect(() => {
-    const fetchFollowedStreamers = async () => {
+    const newTab = queryParams.get("tab") as "categories" | "streamers";
+    if (newTab) {
+      setActiveTab(newTab);
+    }
+  }, [location.search]);
+
+  useEffect(() => {
+    const fetchFollowedContent = async () => {
       try {
         const response = await fetch("/api/user/following");
-        if (!response.ok) throw new Error("Failed to fetch followed streamers");
+        if (!response.ok) throw new Error("Failed to fetch followed content");
-        const data = await response.json();
-        setFollowedStreamers(data);
 
+        const data = await response.json();
+        if (!Array.isArray(data.streams) || !Array.isArray(data.categories)) {
+          throw new Error("API response structure is incorrect");
+        }
+
+        setFollowedStreamers(data.streams);
+        setFollowedCategories(data.categories);
+
+        // Fetch follow status for streamers
         const updatedStatus: { [key: number]: boolean } = {};
-        for (const streamer of data || []) {
+        for (const streamer of data.streams) {
           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);
+        console.error("Error fetching followed content:", error);
+        setFollowedStreamers([]);
+        setFollowedCategories([]);
       }
     };
 
-		if (isLoggedIn) {
+    if (isLoggedIn) {
-			fetchFollowedStreamers();
+      fetchFollowedContent();
-		}
-	}, [isLoggedIn]);
-
-
-  const handleFollowToggle = async (userId: number) => {
-    const isCurrentlyFollowing = followingStatus[userId];
-
-    if (isCurrentlyFollowing) {
-      await unfollowUser(userId);
-    } else {
-      await followUser(userId);
     }
-
+  }, [isLoggedIn]);
-    // Update local state for this specific streamer
-    setFollowingStatus((prev) => ({
-      ...prev,
-      [userId]: !isCurrentlyFollowing, // Toggle based on previous state
-    }));
-  };
 
   return (
     <DynamicPageContent>
@@ -73,28 +81,33 @@ const Following: React.FC<FollowingStreamerProps> = ({ extraClasses = "" }) => {
         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 transition-all duration-500 ease-in-out ${extraClasses}`}
       >
-        <div
+        {activeTab === "streamers" && (
-          id="followed-users"
+          <div
-          className={`grid grid-cols-2 gap-4 p-4 w-full`}>
+            id="followed-users"
-          {followedStreamers.map((streamer: any) => (
+            className={`grid grid-cols-2 gap-4 p-4 w-full`}>
-            <div
+            {followedStreamers.map((streamer: any) => (
-              key={`streamer-${streamer.username}`}
+              <div
-              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"
+                key={`streamer-${streamer.username}`}
-            /*onClick={() => navigate(`/user/${streamer.username}`)}*/
+                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"
-            >
+              /*onClick={() => navigate(`/user/${streamer.username}`)}*/
-              {streamer.username}
+              >
-              <FollowUserButton
+                {streamer.username}
-                user={{
+                <FollowUserButton
-                  user_id: streamer.user_id,
+                  user={{
-                  username: streamer.username,
+                    user_id: streamer.user_id,
-                  isFollowing: followingStatus[streamer.user_id] || true,
+                    username: streamer.username,
-                }}
+                    isFollowing: followingStatus[streamer.user_id] || true,
-              />
+                  }}
-            </div>
+                />
-          ))}
+              </div>
-        </div>
+            ))}
+          </div>
+        )}
       </div>
-    </DynamicPageContent>
+  
+
+
+    </DynamicPageContent >
   );
 };
 

frontend/src/pages/UserPage.tsx

@@ -82,13 +82,13 @@ const UserPage: React.FC = () => {
 
 	const handleNavigation = (path: string) => {
 		if (profilePicture === initialProfilePicture.current) {
-		  // Variable hasn't changed - use React Router navigation
+			// Variable hasn't changed - use React Router navigation
-		  navigate(path);
+			navigate(path);
 		} else {
-		  // Variable has changed - use full page reload
+			// Variable has changed - use full page reload
-		  window.location.href = path;
+			window.location.href = path;
 		}
-	  };
+	};
 
 	// Store initial profile picture to know if it changes later
 	useEffect(() => {
@@ -138,8 +138,7 @@ const UserPage: React.FC = () => {
 						{/* Profile Picture */}
 						<div
 							className={`relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
-               rounded-full flex-shrink-0 border-4 ${
+               rounded-full flex-shrink-0 border-4 ${profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
-									profileData.isLive ? "border-[#ff0000]" : "border-[var(--user-pfp-border)]"
 								} inset-0 z-20`}
 							style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
 						>
@@ -269,7 +268,7 @@ const UserPage: React.FC = () => {
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following`)}>
+							<button className="text-[var(--follow-text)] whitespace-pre-wrap" onClick={() => handleNavigation(`/user/${username}/following?tab=streamers`)}>
 								Following
 							</button>
 						</div>
@@ -289,7 +288,7 @@ const UserPage: React.FC = () => {
 							onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
 							onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
 						>
-							<button onClick={() => handleNavigation(`/user/${username}/followedCategories`)}>Categories</button>
+							<button onClick={() => handleNavigation(`/user/${username}/following?tab=categories`)}>Categories</button>
 						</div>
 					</div>
 				</div>