Feat: Update to VideoPage to display stream data;

frontend/src/pages/HomePage.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import Navbar from "../components/Layout/Navbar";
-import StreamListRow from "../components/Layout/StreamListRow";
+import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
 
@@ -20,24 +20,24 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   return (
     <div
       id="home-page"
-      className="animate-moving_bg"
+      className="animate-moving_bg h-full"
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
       <Navbar variant="home" />
 
-      {/*//TODO Extract StreamListRow away, to ListRow so that it makes sense for categories to be there also */}
-
-      <StreamListRow
+      <ListRow
+        type="stream"
         title={"Live Now" + (variant === "personalised" ? " - Recommended" : "")}
         description={variant === "personalised" ? "We think you might like these streams - Streamers recommended for you" : "Streamers that are currently live"}
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
+        items={featuredStreams}
+        onClick={handleStreamClick}
       />
-      <StreamListRow
+      <ListRow
+        type="category"
         title={variant === "personalised" ? "Followed Categories" : "Trending Categories"}
         description={variant === "personalised" ? "Current streams from your followed categories" : "Categories that have been 'popping off' lately"}
-        streams={featuredCategories}
-        onStreamClick={() => {}} //TODO
+        items={featuredCategories}
+        onClick={() => {}} //TODO
       />
 
     </div>

frontend/src/pages/UserPage.tsx

@@ -1,7 +1,16 @@
 import React from "react";
 
-const UserPage: React.FC = () => {
-  return <div></div>;
+interface UserPageProps {
+  username: string;
+}
+
+const UserPage: React.FC<UserPageProps> = ({ username }) => {
+  return (
+    <div className="bg-[#808080] h-screen w-screen flex flex-col items-center justify-center">
+      <h1>{username}</h1>
+      <p>Profile page for {username}</p>
+    </div>
+  );
 };
 
 export default UserPage;

frontend/src/pages/VideoPage.tsx

@@ -3,7 +3,7 @@ import Navbar from "../components/Layout/Navbar";
 import Button from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
 import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
-import { useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import VideoPlayer from "../components/Video/VideoPlayer";
 
@@ -11,11 +11,23 @@ interface VideoPageProps {
   streamId: number;
 }
 
+interface StreamDataProps {
+  streamId: number;
+  streamTitle: string;
+  streamerName: string;
+  streamerId: number;
+  startTime: string;
+  viewerCount: number;
+  categoryId: number;
+}
+
 const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
+  const { isLoggedIn } = useAuth();
   const [showCheckout, setShowCheckout] = useState(false);
   const showReturn = window.location.search.includes("session_id");
   const { streamerName } = useParams<{ streamerName: string }>();
-  const { isLoggedIn } = useAuth();
+  const [streamData, setStreamData] = useState<StreamDataProps>();
+  const navigate = useNavigate();
 
   useEffect(() => {
     // Prevent scrolling when checkout is open
@@ -30,12 +42,30 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
     };
   }, [showCheckout]);
   useEffect(() => {
-    if (streamerName) {
-      // Fetch stream data for this streamer
-      console.log(`Loading stream for ${streamerName}`);
-      // fetch(`/api/get_stream_data/${streamId}`)
-    }
-  }, [streamerName]);
+    // Fetch stream data for this streamer
+    fetch(
+      `/api/get_stream_data/${streamerName}${
+        streamId == 0 ? "" : `/${streamId}`
+      }`
+    ).then((res) => {
+      if (!res.ok) {
+        console.error("Failed to load stream data:", res.statusText);
+      }
+      res.json().then((data) => {
+        if (!data.validStream) navigate(`/`);
+        console.log(`Loading stream data for ${streamerName}`);
+        setStreamData({
+          streamId: data.streamId,
+          streamTitle: data.streamTitle,
+          streamerName: data.streamerName,
+          streamerId: data.streamerId,
+          startTime: data.startTime,
+          viewerCount: data.viewerCount,
+          categoryId: data.categoryId,
+        });
+      });
+    });
+  }, [streamId, streamerName]);
 
   return (
     <div id="videoPage" className="w-full">
@@ -44,20 +74,21 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
       <div id="container" className="bg-gray-900">
         <VideoPlayer streamId={streamId} />
 
-        {isLoggedIn ? (
-          <ChatPanel streamId={streamId} />
-        ) : (
-          <ChatPanel streamId={streamId} />
-        )}
+        <ChatPanel streamId={streamId} />
 
         <div
           id="stream-info"
           className="flex"
           style={{ gridArea: "3 / 1 / 4 / 2" }}
         >
-          <Button onClick={() => setShowCheckout(true)} extraClasses="mx-auto mb-4">
-            Payment Screen Test
-          </Button>
+          {isLoggedIn && (
+            <Button
+              onClick={() => setShowCheckout(true)}
+              extraClasses="mx-auto mb-4"
+            >
+              Payment Screen Test
+            </Button>
+          )}
         </div>
       </div>