FEAT: CategoryPage updated to display streams;

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

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 = () => {
-  return (
-    <div>CategoryPage</div>
-  )
+interface StreamData {
+  type: "stream";
+  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;