UPDATE: Finished categories and category pages, added infinite scrolling and follow category button on login

2025-02-23 17:23:09 +00:00
parent f192518382
commit 634c02a9bc
17 changed files with 341 additions and 209 deletions
--- a/frontend/src/pages/AllCategoriesPage.tsx
+++ b/frontend/src/pages/AllCategoriesPage.tsx
@@ -1,58 +1,82 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
-import { useCategories } from "../context/ContentContext";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";

+interface categoryData {
+  type: "category";
+  id: number;
+  title: string;
+  viewers: number;
+  thumbnail: string;
+}
 const AllCategoriesPage: React.FC = () => {
-  const { categories, setCategories } = useCategories();
+  const [categories, setCategories] = useState<categoryData[]>([]);
  const navigate = useNavigate();
  const [categoryOffset, setCategoryOffset] = useState(0);
  const [noCategories, setNoCategories] = useState(12);
  const [hasMoreData, setHasMoreData] = useState(true);
+  
+  const listRowRef = useRef<any>(null);
+  const isLoading = useRef(false);
+  
+  const fetchCategories = async () => {
+    // If already loading, skip this fetch
+    if (isLoading.current) return;
+    
+    isLoading.current = true;
+    
+    try {
+      const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch categories");
+      }
+      const data = await response.json();
+      
+      if (data.length === 0) {
+        setHasMoreData(false);
+        return [];
+      }
+
+      setCategoryOffset(prev => prev + data.length);
+
+      const processedCategories = data.map((category: any) => ({
+        type: "category" as const,
+        id: category.category_id,
+        title: category.category_name,
+        viewers: category.num_viewers,
+        thumbnail: `/images/category_thumbnails/${category.category_name
+          .toLowerCase()
+          .replace(/ /g, "_")}.webp`,
+      }));
+
+      setCategories(prev => [...prev, ...processedCategories]);
+      return processedCategories;
+    } catch (error) {
+      console.error("Error fetching categories:", error);
+      return [];
+    } finally {
+      isLoading.current = false;
+    }
+  };

  useEffect(() => {
-    const fetchCategories = async () => {
-      try {
-        const response = await fetch(`/api/categories/popular/${noCategories}/${categoryOffset}`);
-        if (!response.ok) {
-          throw new Error("Failed to fetch categories");
-        }
-        const data = await response.json();
-        // Adds to offset once data is returned
-        if (data.length > 0) {
-          setCategoryOffset(prev => prev + data.length);
-        } else {
-          setHasMoreData(false);
-        }
-
-        // Transform the data to match CategoryItem interface
-        const processedCategories = data.map((category: any) => ({
-          type: "category" as const,
-          id: category.category_id,
-          title: category.category_name,
-          viewers: category.num_viewers,
-          thumbnail: `/images/category_thumbnails/${category.category_name
-            .toLowerCase()
-            .replace(/ /g, "_")}.webp`,
-        }));
-
-        setCategories(processedCategories);
-      } catch (error) {
-        console.error("Error fetching categories:", error);
-      }
-    };
-
    fetchCategories();
-  }, [setCategories]);
+  }, []);

-  const logOnScroll = () => {
-    console.log("hi")
+  const loadOnScroll = async () => {
+    if (hasMoreData && listRowRef.current) {
+      const newCategories = await fetchCategories();
+      if (newCategories?.length > 0) {
+        listRowRef.current.addMoreItems(newCategories);
+      }
+    }
  };
-  fetchContentOnScroll(logOnScroll,hasMoreData)

-  if (!categories.length) {
+  fetchContentOnScroll(loadOnScroll, hasMoreData);
+
+  if (hasMoreData && !categories.length) {
    return (
      <div className="h-screen w-screen flex items-center justify-center text-white">
        Loading...
@@ -71,16 +95,16 @@ const AllCategoriesPage: React.FC = () => {
      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
    >
      <ListRow
+        ref={listRowRef}
        type="category"
        title="All Categories"
        items={categories}
        onClick={handleCategoryClick}
        extraClasses="bg-[var(--recommend)] text-center"
        wrap={true}
-
      />
    </DynamicPageContent>
  );
 };

-export default AllCategoriesPage;
+export default AllCategoriesPage;
--- a/frontend/src/pages/CategoryPage.tsx
+++ b/frontend/src/pages/CategoryPage.tsx
@@ -1,7 +1,11 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { useParams } from "react-router-dom";
 import ListRow from "../components/Layout/ListRow";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
+import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
+import Button from "../components/Input/Button";
+import { useAuth } from "../context/AuthContext";
+import { useCategoryFollow } from "../hooks/useCategoryFollow";

 interface StreamData {
  type: "stream";
@@ -14,48 +18,84 @@ interface StreamData {
 }

 const CategoryPage: React.FC = () => {
-  const { category_name } = useParams<{ category_name: string }>();
+  const { categoryName } = useParams<{ categoryName: string }>();
  const [streams, setStreams] = useState<StreamData[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
+  const listRowRef = useRef<any>(null);
+  const isLoading = useRef(false);
+  const [streamOffset, setStreamOffset] = useState(0);
+  const [noStreams, setNoStreams] = useState(12);
+  const [hasMoreData, setHasMoreData] = useState(true);
+  const { isLoggedIn } = useAuth();
+  const { isCategoryFollowing, checkCategoryFollowStatus, followCategory, unfollowCategory } = useCategoryFollow()

  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/category_thumbnails/${category_name
-                .toLowerCase()
-                .replace(/ /g, "_")}.webp`),
-        }));
-        setStreams(formattedData);
-      } catch (error) {
-        console.error("Error fetching category streams:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
+    checkCategoryFollowStatus(categoryName);
+  }, [categoryName]);

+  const fetchCategoryStreams = async () => {
+    // If already loading, skip this fetch
+    if (isLoading.current) return;
+
+    isLoading.current = true;
+    try {
+      const response = await fetch(`/api/streams/popular/${categoryName}/${noStreams}/${streamOffset}`);
+      if (!response.ok) {
+        throw new Error("Failed to fetch category streams");
+      }
+      const data = await response.json();
+
+      if (data.length === 0) {
+        setHasMoreData(false);
+        return [];
+      }
+
+      setStreamOffset(prev => prev + data.length);
+
+      const processedStreams = data.map((stream: any) => ({
+        type: "stream",
+        id: stream.user_id,
+        title: stream.title,
+        streamer: stream.username,
+        streamCategory: categoryName,
+        viewers: stream.num_viewers,
+        thumbnail:
+          stream.thumbnail ||
+          (categoryName &&
+            `/images/category_thumbnails/${categoryName
+              .toLowerCase()
+              .replace(/ /g, "_")}.webp`),
+      }));
+
+      setStreams(prev => [...prev, ...processedStreams]);
+      return processedStreams
+    } catch (error) {
+      console.error("Error fetching category streams:", error);
+    } finally {
+      isLoading.current = false;
+    }
+  };
+
+  useEffect(() => {
    fetchCategoryStreams();
-  }, [category_name]);
+  }, []);
+
+  const logOnScroll = async () => {
+    if (hasMoreData && listRowRef.current) {
+      const newCategories = await fetchCategoryStreams();
+      if (newCategories?.length > 0) {
+        listRowRef.current.addMoreItems(newCategories);
+      }
+    }
+  };
+
+  fetchContentOnScroll(logOnScroll, hasMoreData);
+

  const handleStreamClick = (streamerName: string) => {
    window.location.href = `/${streamerName}`;
  };

-  if (isLoading) {
+  if (hasMoreData && !streams.length) {
    return (
      <div className="h-screen w-screen flex items-center justify-center text-white">
        Loading...
@@ -71,13 +111,24 @@ const CategoryPage: React.FC = () => {
      <div className="pt-8">
        <ListRow
          type="stream"
-          title={`${category_name} Streams`}
-          description={`Live streams in the ${category_name} category`}
+          title={`${categoryName} Streams`}
+          description={`Live streams in the ${categoryName} category`}
          items={streams}
          wrap={true}
          onClick={handleStreamClick}
          extraClasses="bg-[var(--recommend)]"
-        />
+        >
+          {isLoggedIn && (
+            <Button
+              extraClasses="absolute right-10"
+              onClick={() => {
+                isCategoryFollowing ? unfollowCategory(categoryName) : followCategory(categoryName)
+              }}
+            >
+              {isCategoryFollowing ? "Unfollow" : "Follow"}
+            </Button>
+          )}
+        </ListRow>
      </div>

      {streams.length === 0 && !isLoading && (
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import ListRow from "../components/Layout/ListRow";
 import { useNavigate } from "react-router-dom";
 import { useStreams, useCategories } from "../context/ContentContext";
@@ -22,13 +22,16 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
    navigate(`/category/${categoryName}`);
  };

+  if (!categories || categories.length === 0) {
+    return <div>Loading categories...</div>;
+  }
+
  return (
    <DynamicPageContent
      navbarVariant="home"
      className="h-full min-h-screen animate-moving_bg"
      style={{ backgroundImage: "url(/images/background-pattern.svg)" }}
    >
-      {/* If Personalised_HomePage, display Streams recommended for the logged-in user. Else, live streams with the most viewers. */}
      <ListRow
        type="stream"
        title={
@@ -44,11 +47,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
        wrap={false}
        onClick={handleStreamClick}
        extraClasses="bg-[var(--liveNow)]"
-      >
-        {/* <Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
-          Show More
-        </Button> */}
-      </ListRow>
+      />

      {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
      <ListRow
@@ -80,4 +79,4 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
  );
 };

-export default HomePage;
+export default HomePage;