FEAT: CategoryPage updated to display streams;

General fixes and cleanup of unecessary logging; Update to 404 (NotFound) Page;
2025-02-07 03:57:54 +00:00
parent 16dc8f1ea2
commit 45208a51be
12 changed files with 225 additions and 42 deletions
--- a/frontend/src/App.tsx
+++ b/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>
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/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>
--- a/frontend/src/components/Stream/StreamerRoute.tsx
+++ b/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;
--- a/frontend/src/components/Video/ChatPanel.tsx
+++ b/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);
        }
--- a/frontend/src/context/SocketContext.tsx
+++ b/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;
--- a/frontend/src/pages/CategoryPage.tsx
+++ b/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;
--- a/frontend/src/pages/HomePage.tsx
+++ b/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}`);
  };

--- a/frontend/src/pages/NotFoundPage.tsx
+++ b/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;
--- a/frontend/src/pages/UserPage.tsx
+++ b/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>