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

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 && (