FEAT: CategoryPage updated to display streams;

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

frontend/src/App.tsx

@@ -45,7 +45,7 @@ function App() {
             <Route path="/reset_password/:token" element={<ResetPasswordPage />}></Route>
             <Route path="/category/:category_name" element={<CategoryPage />}></Route>
 
-            <Route path="*" element={<NotFoundPage />} />
+            <Route path="/404" element={<NotFoundPage />} />
           </Routes>
         </BrowserRouter>
       </StreamsProvider>

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 ? (
+  if (isLive) {
-    <VideoPage streamerId={streamId} />
+    return <VideoPage streamerId={streamId} />;
-  ) : streamerName ? (
+  }
-    navigate(`/user/${streamerName}`)
+  
-  ) : (
+  if (streamerName) {
-    <div>Streamer not found</div>
+    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);
         }

frontend/src/context/SocketContext.tsx

@@ -23,15 +23,12 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    console.log("Start of useEffect");
-
     // Check if we already have a socket instance
     if (socketRef.current) {
       console.log("Socket already exists, closing existing socket");
       socketRef.current.close();
     }
 
-    console.log("Creating new socket connection");
     const newSocket = io("http://localhost:8080", {
       path: "/socket.io/",
       transports: ["websocket"],
@@ -82,7 +79,6 @@ export const SocketProvider: React.FC<{ children: React.ReactNode }> = ({
 
     return () => {
       if (socketRef.current) {
-        console.log("Cleaning up socket connection...");
         socketRef.current.disconnect();
         socketRef.current.close();
         socketRef.current = null;

frontend/src/pages/CategoryPage.tsx

@@ -1,9 +1,95 @@
-import React from 'react'
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import Navbar from "../components/Layout/Navbar";
+import ListRow from "../components/Layout/ListRow";
+import { useNavigate } from "react-router-dom";
 
-const CategoryPage = () => {
+interface StreamData {
-  return (
+  type: "stream";
-    <div>CategoryPage</div>
+  id: number;
-  )
+  title: string;
+  streamer: string;
+  streamCategory: string;
+  viewers: number;
+  thumbnail?: string;
 }
 
-export default CategoryPage
+const CategoryPage: React.FC = () => {
+  const { category_name } = useParams<{ category_name: string }>();
+  const [streams, setStreams] = useState<StreamData[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const fetchCategoryStreams = async () => {
+      try {
+        const response = await fetch(`/api/streams/popular/${category_name}`);
+        if (!response.ok) {
+          throw new Error("Failed to fetch category streams");
+        }
+        const data = await response.json();
+        const formattedData = data.map((stream: any) => ({
+          type: "stream",
+          id: stream.user_id,
+          title: stream.title,
+          streamer: stream.username,
+          streamCategory: category_name,
+          viewers: stream.num_viewers,
+          thumbnail:
+            stream.thumbnail ||
+            (category_name &&
+              `/images/thumbnails/categories/${category_name
+                .toLowerCase()
+                .replace(/ /g, "_")}.webp`),
+        }));
+        setStreams(formattedData);
+      } catch (error) {
+        console.error("Error fetching category streams:", error);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchCategoryStreams();
+  }, [category_name]);
+
+  const handleStreamClick = (streamerName: string) => {
+    navigate(`/${streamerName}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="h-screen w-screen flex items-center justify-center text-white">
+        Loading...
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]"
+      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
+    >
+      <Navbar />
+
+      <div className="pt-8">
+        <ListRow
+          type="stream"
+          title={`${category_name} Streams`}
+          description={`Live streams in the ${category_name} category`}
+          items={streams}
+          onClick={handleStreamClick}
+          extraClasses="bg-purple-950/60"
+        />
+      </div>
+
+      {streams.length === 0 && !isLoading && (
+        <div className="text-white text-center text-2xl mt-8">
+          No live streams found in this category
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CategoryPage;

frontend/src/pages/HomePage.tsx

@@ -12,13 +12,11 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   const { featuredStreams, featuredCategories } = useStreams();
   const navigate = useNavigate();
 
-  const handleStreamClick = (streamerId: number, streamerName: string) => {
+  const handleStreamClick = (streamerName: string) => {
-    console.log(`Navigating to stream by user ${streamerId}`);
     navigate(`/${streamerName}`);
   };
 
-  const handleCategoryClick = (categoryID: number, categoryName: string) => {
+  const handleCategoryClick = (categoryName: string) => {
-    console.log(`Navigating to category ${categoryID}`);
     navigate(`category/${categoryName}`);
   };
 

frontend/src/pages/NotFoundPage.tsx

@@ -1,7 +1,68 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import Button from "../components/Layout/Button";
 
 const NotFoundPage: React.FC = () => {
-  return <div></div>;
+  const navigate = useNavigate();
+  const [stars, setStars] = useState<{ x: number; y: number }[]>([]);
+  const starSize = 20;
+
+  useEffect(() => {
+    const loop = setInterval(() => {
+      if (Math.random() < 0.1) {
+        const newStar = {
+          x: Math.random() * (window.innerWidth - starSize),
+          y: -starSize,
+        };
+        setStars((prev) => [...prev, newStar]);
+      }
+
+      setStars((prev) => {
+        const newStars = prev.filter((star) => {
+          if (
+            star.y > window.innerHeight - starSize &&
+            star.y < window.innerHeight
+          ) {
+            return false;
+          }
+          if (star.y > window.innerHeight) return false;
+          return true;
+        });
+
+        return newStars.map((star) => ({
+          ...star,
+          y: star.y + 5,
+        }));
+      });
+    }, 10);
+
+    return () => clearInterval(loop);
+  }, []);
+
+  return (
+    <div className="h-screen w-screen bg-gray-900 text-white overflow-hidden relative">
+      <div>
+        {stars.map((star, index) => (
+          <div
+            key={index}
+            className="absolute w-5 h-5 text-yellow-300"
+            style={{ left: `${star.x}px`, top: `${star.y}px` }}
+          >
+            ★
+          </div>
+        ))}
+      </div>
+      <div className="absolute flex justify-center items-center h-full z-0 inset-0 bg-[radial-gradient(rgba(255,255,255,0.5)_1px,transparent_1px)] bg-[length:50px_50px]">
+        <div className="w-full text-center animate-floating">
+          <h1 className="text-6xl font-bold mb-4">404</h1>
+          <p className="text-2xl mb-8">Page Not Found</p>
+          <Button extraClasses="z-[100]" onClick={() => navigate("/")}>
+            Go Home
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default NotFoundPage;

frontend/src/pages/UserPage.tsx

@@ -28,7 +28,8 @@ const UserPage: React.FC = () => {
     "personal" | "streamer" | "user" | "admin"
   >("user");
   const [profileData, setProfileData] = useState<UserProfileData>();
-  const { isFollowing, checkFollowStatus, followUser, unfollowUser } = useFollow();
+  const { isFollowing, checkFollowStatus, followUser, unfollowUser } =
+    useFollow();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { username: loggedInUsername } = useAuth();
   const { username } = useParams();
@@ -90,7 +91,10 @@ const UserPage: React.FC = () => {
             .catch((err) => console.error("Error fetching stream data:", err));
         }
       })
-      .catch((err) => console.error("Error fetching profile data:", err));
+      .catch((err) => {
+        console.error("Error fetching profile data:", err);
+        navigate("/404");
+      });
 
     // Check if the *logged-in* user is following this user
     if (loggedInUsername && username) checkFollowStatus(username);
@@ -167,14 +171,18 @@ const UserPage: React.FC = () => {
                   {!isFollowing ? (
                     <Button
                       extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
-                      onClick={() => followUser(profileData.id, setShowAuthModal)}
+                      onClick={() =>
+                        followUser(profileData.id, setShowAuthModal)
+                      }
                     >
                       Follow
                     </Button>
                   ) : (
                     <Button
                       extraClasses="w-full bg-[#a80000]"
-                      onClick={() => unfollowUser(profileData?.id, setShowAuthModal)}
+                      onClick={() =>
+                        unfollowUser(profileData?.id, setShowAuthModal)
+                      }
                     >
                       Unfollow
                     </Button>

web_server/blueprints/streams.py

@@ -31,6 +31,17 @@ def get_popular_streams(no_streams) -> list[dict]:
     streams = get_highest_view_streams(no_streams)
     return jsonify(streams)
 
+@stream_bp.route('/streams/popular/<string:category_name>')
+def get_popular_streams_by_category(category_name) -> list[dict]:
+    """
+    Returns a list of streams live now with the highest viewers in a given category
+    """
+
+    category_id = get_category_id(category_name)
+    print(category_id, flush=True)
+    streams = get_streams_based_on_category(category_id)
+    return jsonify(streams)
+
 @login_required 
 @stream_bp.route('/streams/recommended')
 def get_recommended_streams() -> list[dict]:

web_server/utils/recommendation_utils.py

@@ -19,7 +19,7 @@ def get_user_preferred_category(user_id: int) -> Optional[int]:
 
 def followed_categories_recommendations(user_id: int) -> Optional[List[dict]]:
     """
-    Returns top 25 streams given a users category following
+    Returns top 25 streams given a user's category following
     """
     with Database() as db:
         streams = db.fetchall("""
@@ -40,11 +40,11 @@ def get_streams_based_on_category(category_id: int) -> Optional[List[dict]]:
     """
     with Database() as db:
         streams = db.fetchall("""
-            SELECT u.user_id, title, username, num_viewers, category_name
+            SELECT u.user_id, title, username, num_viewers, c.category_name
-            FROM streams 
+            FROM streams s
-            JOIN users u ON streams.user_id = u.user_id
+            JOIN users u ON s.user_id = u.user_id
-            JOIN categories ON streams.category_id = categories.category_id
+            JOIN categories c ON s.category_id = c.category_id
-            WHERE categories.category_id = ? 
+            WHERE c.category_id = ? 
             ORDER BY num_viewers DESC 
             LIMIT 25
         """, (category_id,))

web_server/utils/stream_utils.py

@@ -48,6 +48,18 @@ def get_current_stream_data(user_id: int) -> Optional[dict]:
         """, (user_id,))
     return most_recent_stream
 
+def get_category_id(category_name: str) -> Optional[int]:
+    """
+    Returns the category_id given a category name
+    """
+    with Database() as db:
+        data = db.fetchone("""
+            SELECT category_id 
+            FROM categories 
+            WHERE category_name = ?;
+        """, (category_name,))
+    return data['category_id'] if data else None
+
 def get_vod(vod_id: int) -> dict:
     """
     Returns data of a streamers vod