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;

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) => {
-    console.log(`Navigating to stream by user ${streamerId}`);
+  const handleStreamClick = (streamerName: string) => {
     navigate(`/${streamerName}`);
   };
 
-  const handleCategoryClick = (categoryID: number, categoryName: string) => {
-    console.log(`Navigating to category ${categoryID}`);
+  const handleCategoryClick = (categoryName: string) => {
     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>