- Refactor of StreamsContext:

Added `featuredCategories` section,
Added personalised variations of HomePage contents;
- Removal of redundant/unused files from backend;
- Update to README: Updated to current method for deploying;
- Known bug: StreamsContext is being called before AuthContext, leading to unpersonalised streams & categories each time, even when logged in;

frontend/src/components/Layout/StreamListRow.tsx

@@ -8,29 +8,29 @@ interface StreamItem {
   thumbnail?: string;
 }
 
-interface ListEntryProps {
+interface StreamListEntryProps {
   stream: StreamItem;
   onClick?: () => void;
 }
 
-interface ListRowProps {
+interface StreamListRowProps {
   title: string;
   description: string;
   streams: StreamItem[];
-  onStreamClick?: (streamerId: string) => void;
+  onStreamClick?: (streamId: string) => void;
 }
 
 // Individual stream entry component
-const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
+const StreamListEntry: React.FC<StreamListEntryProps> = ({ stream, onClick }) => {
   return (
     <div
-      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 border border-gray-100 hover:border-purple-500 hover:border-b-4 hover:border-l-4 transition-all"
+      className="flex flex-col bg-gray-800 rounded-lg overflow-hidden cursor-pointer hover:bg-gray-700 transition-colors"
       onClick={onClick}
     >
       <div className="relative w-full pt-[56.25%]">
         {stream.thumbnail ? (
           <img
-            src={`images/` + stream.thumbnail}
+            src={`images/`+stream.thumbnail}
             alt={stream.title}
             className="absolute top-0 left-0 w-full h-full object-cover"
           />
@@ -48,24 +48,24 @@ const ListEntry: React.FC<ListEntryProps> = ({ stream, onClick }) => {
 };
 
 // Row of stream entries
-const ListRow: React.FC<ListRowProps> = ({
+const StreamListRow: React.FC<StreamListRowProps> = ({
   title,
   description,
   streams,
   onStreamClick,
 }) => {
   return (
-    <div className="flex flex-col space-y-4 py-6 mx-4">
+    <div className="flex flex-col space-y-4 py-6">
       <div className="space-y-1">
         <h2 className="text-2xl font-bold">{title}</h2>
         <p className="text-gray-400">{description}</p>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
         {streams.map((stream) => (
-          <ListEntry
+          <StreamListEntry
             key={stream.id}
             stream={stream}
-            onClick={() => onStreamClick?.(stream.streamer)}
+            onClick={() => onStreamClick?.(stream.id)}
           />
         ))}
       </div>
@@ -73,4 +73,4 @@ const ListRow: React.FC<ListRowProps> = ({
   );
 };
 
-export default ListRow;
+export default StreamListRow;

frontend/src/context/StreamsContext.tsx

@@ -1,4 +1,5 @@
 import { createContext, useContext, useState, useEffect } from "react";
+import { useAuth } from "./AuthContext";
 
 interface StreamItem {
   id: number;
@@ -10,24 +11,46 @@ interface StreamItem {
 
 interface StreamsContextType {
   featuredStreams: StreamItem[];
+  featuredCategories: StreamItem[];
   setFeaturedStreams: (streams: StreamItem[]) => void;
+  setFeaturedCategories: (categories: StreamItem[]) => 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 { isLoggedIn } = useAuth();
+
+  const fetch_url = isLoggedIn
+    ? ["/api/get_recommended_streams", "/api/get_followed_categories"]
+    : ["/api/get_streams", "/api/get_categories"];
 
   useEffect(() => {
-    fetch("/api/get_streams")
+    fetch(fetch_url[0])
       .then((response) => response.json())
       .then((data: StreamItem[]) => {
         setFeaturedStreams(data);
       });
+    fetch(fetch_url[1])
+      .then((response) => response.json())
+      .then((data: StreamItem[]) => {
+        setFeaturedCategories(data);
+      });
   }, []);
 
   return (
-    <StreamsContext.Provider value={{ featuredStreams, setFeaturedStreams }}>
+    <StreamsContext.Provider
+      value={{
+        featuredStreams,
+        featuredCategories,
+        setFeaturedStreams,
+        setFeaturedCategories,
+      }}
+    >
       {children}
     </StreamsContext.Provider>
   );

frontend/src/pages/HomePage.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import Navbar from "../components/Layout/Navbar";
-import ListRow from "../components/Layout/ListRow";
+import StreamListRow from "../components/Layout/StreamListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
 
 const HomePage: React.FC = () => {
-  const { featuredStreams } = useStreams();
+  const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerId: string) => {
@@ -19,24 +19,24 @@ const HomePage: React.FC = () => {
     >
       <Navbar />
 
-      <ListRow
+      <StreamListRow
         title="Live Now"
         description="Streamers that are currently live"
         streams={featuredStreams}
         onStreamClick={handleStreamClick}
       />
-      <ListRow
+      <StreamListRow
         title="Trending Categories"
         description="Categories that have been 'popping off' lately"
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
+        streams={featuredCategories}
+        onStreamClick={() => {}} //TODO
       />
     </div>
   );
 };
 
 export const PersonalisedHomePage: React.FC = () => {
-  const { featuredStreams } = useStreams();
+  const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
   const handleStreamClick = (streamerId: string) => {
@@ -49,18 +49,18 @@ export const PersonalisedHomePage: React.FC = () => {
       style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
     >
       <Navbar />
-
-      <ListRow
+      {/*//TODO Extract StreamListRow away to ListRow so that it makes sense for categories to be there also */}
+      <StreamListRow
         title="Live Now - Recommended"
         description="We think you might like these streams - Streamers recommended for you"
         streams={featuredStreams}
         onStreamClick={handleStreamClick}
       />
-      <ListRow
+      <StreamListRow
         title="Followed Categories"
         description="Current streams from your followed categories"
-        streams={featuredStreams}
-        onStreamClick={handleStreamClick}
+        streams={featuredCategories}
+        onStreamClick={() => {}} //TODO
       />
     </div>
   );

frontend/src/pages/VideoPage.tsx

@@ -25,7 +25,7 @@ const VideoPage: React.FC = () => {
     if (streamerName) {
       // Fetch stream data for this streamer
       console.log(`Loading stream for ${streamerName}`);
-      // fetch(`/api/streams/${streamerName}`)
+      // fetch(`/api/get_stream_data/${streamerName}`)
     }
   }, [streamerName]);