FIX: General fixes and update to HomePage

frontend/src/pages/HomePage.tsx

@@ -12,8 +12,8 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
-  const handleStreamClick = (streamId: number, streamerName: string) => {
-    console.log(`Navigating to stream ${streamId}`);
+  const handleStreamClick = (streamerId: number, streamerName: string) => {
+    console.log(`Navigating to stream by user ${streamerId}`);
     navigate(`/${streamerName}`);
   };
 
@@ -43,7 +43,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         }
         items={featuredStreams}
         onClick={handleStreamClick}
-        extraClasses="border border-gray-700 bg-[#FF7F50]/80"
+        extraClasses="bg-red-950/60"
       />
 
       {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
@@ -61,7 +61,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         }
         items={featuredCategories}
         onClick={handleCategoryClick}
-        extraClasses="border border-gray-700 bg-[#5AFF75]/80"
+        extraClasses="bg-green-950/60"
 
       />
     </div>

frontend/src/pages/UserPage.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
 import { useParams } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
 
 interface UserProfileData {
   username: string;
@@ -11,19 +12,28 @@ interface UserProfileData {
 
 const UserPage: React.FC = () => {
   const [profileData, setProfileData] = useState<UserProfileData | null>(null);
+  const { username: loggedInUsername } = useAuth();
   const { username } = useParams();
+  let userPageVariant = "user";
+
+  let setUserPageVariant = (currentStream: string) => {
+    if (username === loggedInUsername) userPageVariant = "personal";
+    else if (currentStream) userPageVariant = "streamer";
+  };
 
   useEffect(() => {
     // Fetch user profile data
-    fetch(`/api/get_streamer_data/${username}`)
+    fetch(`/api/user/${username}`)
       .then((res) => res.json())
       .then((data) => {
         setProfileData({
           username: data.username,
           bio: data.bio || "This user hasn't written a bio yet.",
-          followerCount: data.num_followering || 0,
+          followerCount: data.num_followers || 0,
           isPartnered: data.isPartnered || false,
         });
+
+        setUserPageVariant(data.current_stream_title);
       })
       .catch((err) => console.error("Error fetching profile data:", err));
   }, [username]);
@@ -42,9 +52,12 @@ const UserPage: React.FC = () => {
       <div className="mx-auto px-4 py-8">
         <div className="grid grid-cols-3 gap-8">
           {/* Profile Section - Left Third */}
-          <div className="col-span-1 bg-gray-800 rounded-lg p-6 shadow-lg">
-            {/* Profile Picture */}
+          <div
+            id="profile"
+            className="col-span-1 bg-gray-800 rounded-lg p-6 shadow-lg"
+          >
             <div className="flex flex-col items-center">
+              {/* Profile Picture */}
               <div className="relative w-48 h-48 rounded-full overflow-hidden mb-6">
                 <img
                   src="/images/monkey.png"
@@ -65,9 +78,11 @@ const UserPage: React.FC = () => {
                 )}
               </div>
 
+              {/* Username & Follower Count */}
               <h1 className="text-3xl font-bold mb-2">
                 {profileData.username}
               </h1>
+              <small className="text-green-400" >{userPageVariant.toUpperCase()}</small>
 
               <div className="flex items-center space-x-2 mb-6">
                 <span className="text-gray-400">
@@ -111,7 +126,10 @@ const UserPage: React.FC = () => {
           </div>
 
           {/* Content Section */}
-          <div className="col-span-2 bg-gray-800 rounded-lg p-6 flex flex-col">
+          <div
+            id="content"
+            className="col-span-2 bg-gray-800 rounded-lg p-6 flex flex-col"
+          >
             <h2 className="text-2xl font-bold mb-4">Past Broadcasts</h2>
             <div className="text-gray-400 flex h-full rounded-none">
               No past broadcasts found

frontend/src/pages/VideoPage.tsx

@@ -8,23 +8,21 @@ import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
 
 interface VideoPageProps {
-  streamId: number;
+  streamerId: number;
 }
 
 interface StreamDataProps {
-  streamId: number;
   streamTitle: string;
   streamerName: string;
-  streamerId: number;
   startTime: string;
   categoryName: string;
 }
 
-const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
+const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
   const { isLoggedIn } = useAuth();
   const { streamerName } = useParams<{ streamerName: string }>();
   const [streamData, setStreamData] = useState<StreamDataProps>();
-  const [viewerCount, setViewerCount] = useState(1000000);
+  const [viewerCount, setViewerCount] = useState(0);
   const [isChatOpen, setIsChatOpen] = useState(true);
   // const [showCheckout, setShowCheckout] = useState(false);
   // const showReturn = window.location.search.includes("session_id");
@@ -44,11 +42,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   // }, [showCheckout]);
   useEffect(() => {
     // Fetch stream data for this streamer
-    fetch(
-      `/api/get_stream_data/${streamerName}${
-        streamId == 0 ? "" : `/${streamId}`
-      }`
-    ).then((res) => {
+    fetch(`/api/streams/${streamerId}/data`).then((res) => {
       if (!res.ok) {
         console.error("Failed to load stream data:", res.statusText);
       }
@@ -57,9 +51,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
         .then((data) => {
           // Transform snake_case to camelCase
           const transformedData: StreamDataProps = {
-            streamId: streamId,
             streamerName: data.username,
-            streamerId: data.user_id,
             streamTitle: data.title,
             startTime: data.start_time,
             categoryName: data.category_name,
@@ -70,7 +62,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
           console.error("Error fetching stream data:", error);
         });
     });
-  }, [streamId, streamerName]);
+  }, [streamerId]);
 
   const toggleChat = () => {
     setIsChatOpen((prev) => !prev);
@@ -88,7 +80,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
           } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
-            <VideoPlayer streamId={streamId} />
+            <VideoPlayer streamId={streamerId} />
           </div>
 
           <ToggleButton
@@ -99,7 +91,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
             {isChatOpen ? "Hide Chat" : "Show Chat"}
           </ToggleButton>
 
-          <ChatPanel streamId={streamId} onViewerCountChange={(count: number) => setViewerCount(count)} />
+          <ChatPanel
+            streamId={streamerId}
+            onViewerCountChange={(count: number) => setViewerCount(count)}
+          />
 
           <div
             id="stream-info"