UPDATE/REFACTOR: Change how followed content is obtained for Sidebar

frontend/src/components/Navigation/Sidebar.tsx

@@ -28,22 +28,23 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
   const [justToggled, setJustToggled] = useState(false);
   const sidebarId = useRef(Math.floor(Math.random() * 1000000));
 
-  // Fetch followed streamers
+  // Fetch followed streamers & categories
   useEffect(() => {
     if (!isLoggedIn) return;
 
-    const fetchFollowedStreamers = async () => {
+    const fetchFollowData = 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);
+        setFollowedStreamers(data.streams);
+        setFollowedCategories(data.categories);
       } catch (error) {
-        console.error("Error fetching followed streamers:", error);
+        console.error("Error fetching followed content:", error);
       }
     };
 
-    fetchFollowedStreamers();
+    fetchFollowData();
   }, [isLoggedIn]);
 
   const handleSideBar = () => {
@@ -70,24 +71,6 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
     };
   }, [showSideBar, setShowSideBar, isLoggedIn]);
 
-  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 (
     <>
       <ToggleButton
@@ -160,7 +143,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
               Streamers
             </h2>
             <div className="flex flex-col flex-grow justify-evenly w-full">
-              {followedStreamers.map((streamer: any) => (
+              {followedStreamers.map((streamer) => (
                 <button
                   key={`${sidebarId.current}-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"
@@ -192,7 +175,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses = "" }) => {
                     className="group relative flex flex-col items-center justify-center h-full max-h-[50px] border border-[--text-color]
                      rounded-lg overflow-hidden hover:shadow-lg transition-all text-white hover:text-purple-500 cursor-pointer"
                     onClick={() =>
-                      window.location.href = `/category/${category.category_name}`
+                      (window.location.href = `/category/${category.category_name}`)
                     }
                   >
                     <img

frontend/src/pages/HomePage.tsx

@@ -7,31 +7,20 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import LoadingScreen from "../components/Layout/LoadingScreen";
 import Footer from "../components/Layout/Footer";
 
-
+const HomePage: React.FC = () => {
-interface HomePageProps {
-  variant?: "default" | "personalised";
-}
-
-
-const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
 	const { streams, isLoading: isLoadingStreams } = useStreams();
 	const { categories, isLoading: isLoadingCategories } = useCategories();
-  const { vods, isLoading: isLoadingVods } = useVods();  // Fetch VODs
+	const { vods, isLoading: isLoadingVods } = useVods();
 	const navigate = useNavigate();
 
 	const handleVodClick = (vodUrl: string) => {
-    window.open(vodUrl, "_blank");  // Open VOD in new tab
+		window.open(vodUrl, "_blank");
 	};
 
-  if (isLoadingStreams || isLoadingCategories || isLoadingVods)
+	if (isLoadingStreams || isLoadingCategories || isLoadingVods) return <LoadingScreen>Loading Content...</LoadingScreen>;
-    return <LoadingScreen>Loading Content...</LoadingScreen>;
 
 	return (
-    <DynamicPageContent
+		<DynamicPageContent navbarVariant="home" className="relative min-h-screen animate-moving_bg" contentClassName="pb-[12vh]">
-      navbarVariant="home"
-      className="relative min-h-screen animate-moving_bg"
-      contentClassName="pb-[12vh]"
-    >
 			{/* Streams Section */}
 			<ListRow
 				type="stream"

web_server/blueprints/user.py

@@ -132,14 +132,15 @@ def user_unfollow(target_user_id: int):
 
 @login_required
 @user_bp.route('/user/following')
-def user_followed_streamers():
+def user_followed_content():
     """
-    Queries DB to get a list of followed streamers
+    Queries DB to get a dict of followed users and categories
     """
     user_id = session.get('user_id')
 
-    live_following_streams = get_followed_streamers(user_id)
+    streams = get_followed_streamers(user_id)
-    return live_following_streams
+    categories = get_followed_categories(user_id)
+    return jsonify({"streams": streams, "categories": categories})
 
 @login_required
 @user_bp.route('/user/category/follow/<string:category_name>')

web_server/utils/user_utils.py

@@ -216,6 +216,16 @@ def get_email(user_id: int) -> Optional[str]:
 def get_followed_streamers(user_id: int) -> Optional[List[dict]]:
     """
     Returns a list of streamers who the user follows
+
+    Returns:
+        List of dictionaries with the following structure:
+        [
+            {
+                "user_id": int,
+                "username": str
+            },
+            ...
+        ]
     """
     with Database() as db:
         followed_streamers = db.fetchall("""
@@ -225,6 +235,28 @@ def get_followed_streamers(user_id: int) -> Optional[List[dict]]:
         """, (user_id,))
     return followed_streamers
 
+def get_followed_categories(user_id: int) -> Optional[List[dict]]:
+    """
+    Returns a list of categories that the user follows
+
+    Returns:
+        List of dictionaries with the following structure:
+        [
+            {
+                "category_id": int,
+                "category_name": str
+            },
+            ...
+        ]
+    """
+    with Database() as db:
+        followed_categories = db.fetchall("""
+            SELECT category_id, category_name
+            FROM categories
+            WHERE category_id IN (SELECT category_id FROM followed_categories WHERE user_id = ?);
+        """, (user_id,))
+    return followed_categories
+
 def get_user(user_id: int) -> Optional[dict]:
     """
     Returns information about a user from user_id