Feat: Update to VideoPage to display stream data;

frontend/src/context/StreamsContext.tsx

@@ -1,26 +1,34 @@
 import { createContext, useContext, useState, useEffect } from "react";
 import { useAuth } from "./AuthContext";
 
-interface StreamItem {
+interface Item {
   id: number;
   title: string;
-  streamer: string;
   viewers: number;
   thumbnail?: string;
 }
 
+interface StreamItem extends Item {
+  type: "stream";
+  streamer: string;
+}
+
+interface CategoryItem extends Item {
+  type: "category";
+}
+
 interface StreamsContextType {
   featuredStreams: StreamItem[];
-  featuredCategories: StreamItem[];
+  featuredCategories: CategoryItem[];
   setFeaturedStreams: (streams: StreamItem[]) => void;
-  setFeaturedCategories: (categories: StreamItem[]) => void;
+  setFeaturedCategories: (categories: CategoryItem[]) => void;
 }
 
 const StreamsContext = createContext<StreamsContextType | undefined>(undefined);
 
 export function StreamsProvider({ children }: { children: React.ReactNode }) {
   const [featuredStreams, setFeaturedStreams] = useState<StreamItem[]>([]);
-  const [featuredCategories, setFeaturedCategories] = useState<StreamItem[]>(
+  const [featuredCategories, setFeaturedCategories] = useState<CategoryItem[]>(
     []
   );
   const { isLoggedIn } = useAuth();
@@ -30,15 +38,34 @@ export function StreamsProvider({ children }: { children: React.ReactNode }) {
     : ["/api/get_streams", "/api/get_categories"];
 
   useEffect(() => {
+    // Streams
     fetch(fetch_url[0])
       .then((response) => response.json())
-      .then((data: StreamItem[]) => {
-        setFeaturedStreams(data);
+      .then((data) => {
+        const extractedData: StreamItem[] = data.streams.map((stream: any) => ({
+          type: "stream",
+          id: stream.stream_id,
+          title: stream.title,
+          streamer: stream.user_id,
+          viewers: stream.num_viewers,
+          thumbnail: stream.thumbnail,
+        }));
+        setFeaturedStreams(extractedData);
       });
+
+    // Categories
     fetch(fetch_url[1])
       .then((response) => response.json())
-      .then((data: StreamItem[]) => {
-        setFeaturedCategories(data);
+      .then((data) => {
+        const extractedData: CategoryItem[] = data.categories.map(
+          (category: any) => ({
+            type: "category",
+            id: category.category_id,
+            title: category.category_name,
+            viewers: category.num_viewers,
+          })
+        );
+        setFeaturedCategories(extractedData);
       });
   }, []);