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

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;