UPDATE: Updated chat message structure;

Bug: Session seems to be empty when chat.py routes are called.

frontend/src/components/Auth/LoginForm.tsx

@@ -69,7 +69,7 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit }) => {
 
         if (data.logged_in) {
           //TODO: Handle successful login (e.g., redirect to home page)
-          console.log("Login successful");
+          console.log("Login successful! Details: ", data);
           setIsLoggedIn(true);
           window.location.reload();
         } else {

frontend/src/components/Stream/StreamerRoute.tsx

@@ -25,7 +25,7 @@ const StreamerRoute: React.FC = () => {
     checkStreamStatus();
 
     // Poll for live status changes
-    const interval = setInterval(checkStreamStatus, 1000); // Check every 1 second
+    const interval = setInterval(checkStreamStatus, 10000); // Check every 10 second
 
     return () => clearInterval(interval);
   }, [streamerName]);

frontend/src/components/Video/ChatPanel.tsx

@@ -4,7 +4,7 @@ import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
 
 interface ChatMessage {
-  chatter_id: string;
+  chatter_username: string;
   message: string;
   time_sent: string;
 }
@@ -112,11 +112,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
             </span>
             <span
               className={`font-bold ${
-                msg.chatter_id === username ? "text-blue-400" : "text-green-400"
+                msg.chatter_username === username ? "text-blue-400" : "text-green-400"
               }`}
             >
               {" "}
-              {msg.chatter_id}:{" "}
+              {msg.chatter_username}:{" "}
             </span>
             <span>{msg.message}</span>
           </div>

frontend/src/pages/HomePage.tsx

@@ -3,7 +3,6 @@ import Navbar from "../components/Layout/Navbar";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams } from "../context/StreamsContext";
-import { useAuth } from "../context/AuthContext";
 
 interface HomePageProps {
   variant?: "default" | "personalised";
@@ -12,7 +11,6 @@ interface HomePageProps {
 const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
-  const { isLoggedIn } = useAuth();
 
   const handleStreamClick = (streamId: number, streamerName: string) => {
     console.log(`Navigating to ${streamId}`);
@@ -27,25 +25,15 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
     >
       <Navbar variant="home" />
 
-
-      {/* Not working - trying to display default streams */}
+      {/* If Personalised_HomePage, display Streams recommended for the logged-in user. Else, live streams with the most viewers. */}
       <ListRow
         type="stream"
-        title="Live Now"
-        description="Streamers that are currently live"
+        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"}
         items={featuredStreams}
         onClick={handleStreamClick}
       />
-
-      {isLoggedIn && variant === "personalised" && (
-        <ListRow
-          type="stream"
-          title="Live Now - Recommended"
-          description="We think you might like these streams - Streamers recommended for you"
-          items={featuredStreams}
-          onClick={handleStreamClick}
-        />
-      )}
+      {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
       <ListRow
         type="category"
         title={variant === "personalised" ? "Followed Categories" : "Trending Categories"}