FEAT: CategoryPage updated to display streams;

General fixes and cleanup of unecessary logging;
Update to 404 (NotFound) Page;

frontend/src/components/Layout/ListRow.tsx

@@ -17,7 +17,7 @@ interface ListRowProps {
   description: string;
   items: ListItemProps[];
   extraClasses?: string;
-  onClick: (itemId: number, itemName: string) => void;
+  onClick: (itemName: string) => void;
 }
 
 // Row of entries
@@ -26,10 +26,12 @@ const ListRow: React.FC<ListRowProps> = ({
   description,
   items,
   onClick,
-  extraClasses="",
+  extraClasses = "",
 }) => {
   return (
-    <div className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}>
+    <div
+      className={`flex flex-col space-y-4 py-6 bg-black/50 text-white px-5 mx-2 mt-5 rounded-[1.5rem] ${extraClasses}`}
+    >
       <div className="space-y-1">
         <h2 className="text-2xl font-bold">{title}</h2>
         <p>{description}</p>
@@ -42,10 +44,16 @@ const ListRow: React.FC<ListRowProps> = ({
             type={item.type}
             title={item.title}
             streamer={item.type === "stream" ? item.streamer : undefined}
-            streamCategory={item.type === "stream" ? item.streamCategory : undefined}
+            streamCategory={
+              item.type === "stream" ? item.streamCategory : undefined
+            }
             viewers={item.viewers}
             thumbnail={item.thumbnail}
-            onItemClick={() => onClick?.(item.id, item.streamer || item.title)}
+            onItemClick={() =>
+              item.type === "stream" && item.streamer
+                ? onClick?.(item.streamer)
+                : onClick?.(item.title)
+            }
           />
         ))}
       </div>
@@ -82,7 +90,9 @@ export const ListItem: React.FC<ListItemProps> = ({
       <div className="p-3">
         <h3 className="font-semibold text-lg text-center">{title}</h3>
         {type === "stream" && <p className="font-bold">{streamer}</p>}
-        {type === "stream" && <p className="text-sm text-gray-300">{streamCategory}</p>}
+        {type === "stream" && (
+          <p className="text-sm text-gray-300">{streamCategory}</p>
+        )}
         <p className="text-sm text-gray-300">{viewers} viewers</p>
       </div>
     </div>

frontend/src/components/Stream/StreamerRoute.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import VideoPage from "../../pages/VideoPage";
-import UserPage from "../../pages/UserPage";
 
 const StreamerRoute: React.FC = () => {
   const { streamerName } = useParams();
@@ -42,13 +41,16 @@ const StreamerRoute: React.FC = () => {
   }
 
   // streamId=0 is a special case for the streamer's latest stream
-  return isLive ? (
-    <VideoPage streamerId={streamId} />
-  ) : streamerName ? (
-    navigate(`/user/${streamerName}`)
-  ) : (
-    <div>Streamer not found</div>
-  );
+  if (isLive) {
+    return <VideoPage streamerId={streamId} />;
+  }
+  
+  if (streamerName) {
+    navigate(`/user/${streamerName}`);
+    return null;
+  }
+  
+  return <div>Streamer not found</div>;
 };
 
 export default StreamerRoute;

frontend/src/components/Video/ChatPanel.tsx

@@ -67,7 +67,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
 
       // Handle live viewership
       socket.on("status", (data: any) => {
-        console.log("Live viewership: ", data); // returns dictionary {message: message, num_viewers: num_viewers}
         if (onViewerCountChange && data.num_viewers) {
           onViewerCountChange(data.num_viewers);
         }