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

frontend/src/App.tsx

@@ -62,7 +62,7 @@ function App() {
                   element={<ResetPasswordPage />}
                 ></Route>
                 <Route
-                  path="/category/:category_name"
+                  path="/category/:categoryName"
                   element={<CategoryPage />}
                 ></Route>
                 <Route path="/categories" element={<CategoriesPage />}></Route>

frontend/src/components/Layout/ListItem.tsx

@@ -65,7 +65,7 @@ const ListItem: React.FC<ListItemProps> = ({
           )}
         </div>
         <div className="p-3">
-          <h3 className="font-semibold text-lg text-center">{title}</h3>
+          <h3 className="font-semibold text-lg text-center truncate max-w-full">{title}</h3>
           {type === "stream" && <p className="font-bold">{username}</p>}
           {type === "stream" && (
             <p className="text-sm text-gray-300">{streamCategory}</p>

frontend/src/components/Layout/ListRow.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
 import {
   ArrowLeft as ArrowLeftIcon,
   ArrowRight as ArrowRightIcon,
@@ -22,25 +22,21 @@ interface ListRowProps {
   children?: React.ReactNode;
 }
 
-// Row of entries
-const ListRow: React.FC<ListRowProps> = ({
-  variant = "default",
-  type,
-  title = "",
-  description = "",
-  items,
-  wrap = false,
-  titleClickable = false,
-  onClick,
-  extraClasses = "",
-  itemExtraClasses = "",
-  amountForScroll = 4,
-  children,
-}) => {
+const ListRow = forwardRef<{ addMoreItems: (newItems: ListItemProps[]) => void }, ListRowProps>(
+  ({ variant, type, title = "", description = "", items, wrap, onClick, titleClickable, extraClasses = "", itemExtraClasses = "", amountForScroll, children }, ref) => {
+    const [currentItems, setCurrentItems] = useState(items);
     const slider = useRef<HTMLDivElement>(null);
     const scrollAmount = window.innerWidth * 0.3;
     const navigate = useNavigate();
 
+    const addMoreItems = (newItems: ListItemProps[]) => {
+      setCurrentItems((prevItems) => [...prevItems, ...newItems]);
+    };
+
+    useImperativeHandle(ref, () => ({
+      addMoreItems,
+    }));
+
     const slideRight = () => {
       if (!wrap && slider.current) {
         slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
@@ -92,7 +88,7 @@ const ListRow: React.FC<ListRowProps> = ({
         </div>
 
         <div className="relative overflow-hidden flex flex-grow items-center z-0">
-        {!wrap && items.length > amountForScroll && (
+          {!wrap && currentItems.length > (amountForScroll || 0) && (
             <>
               <ArrowLeftIcon
                 onClick={slideLeft}
@@ -113,7 +109,7 @@ const ListRow: React.FC<ListRowProps> = ({
               wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
             } max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
           >
-          {items.map((item) => (
+            {currentItems.map((item) => (
               <ListItem
                 key={`${item.type}-${item.id}`}
                 id={item.id}
@@ -131,15 +127,15 @@ const ListRow: React.FC<ListRowProps> = ({
                     ? onClick?.(item.username)
                     : onClick?.(item.title)
                 }
-              extraClasses={`${itemExtraClasses} min-w-[20vw]`}
+                extraClasses={`${itemExtraClasses} min-w-[20vw] max-w-[20vw]`}
               />
             ))}
           </div>
         </div>
-
         {children}
       </div>
     );
-};
+  }
+);
 
 export default ListRow;

frontend/src/components/Stream/ChatPanel.tsx

@@ -43,7 +43,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         socket.emit("leave", {
           userId: userId ? userId : null,
           username: username ? username : "Guest",
-          stream_id: streamId, });
+          stream_id: streamId,
+        });
         socket.disconnect();
       };
 
@@ -135,12 +136,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         {messages.map((msg, index) => (
           <div
             key={index}
-            className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white"
+            className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white relative"
           >
             {/* User avatar with image */}
             <div
-              className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
-                msg.chatter_username === username ? "" : "cursor-pointer"
+              className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${msg.chatter_username === username ? "" : "cursor-pointer"
                 }`}
               onClick={() =>
                 msg.chatter_username === username
@@ -160,8 +160,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               <div className="flex items-center space-x-0.5em">
                 {/* Username */}
                 <span
-                  className={`font-bold text-[1em] ${
-                    msg.chatter_username === username
+                  className={`font-bold text-[1em] ${msg.chatter_username === username
                       ? "text-purple-600"
                       : "text-green-400 cursor-pointer"
                     }`}
@@ -181,8 +180,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
             </div>
 
             {/* Time sent */}
-            <div className="text-gray-500 text-[0.8em] self-start">
-              {new Date(msg.time_sent).toLocaleTimeString()}
+            <div className="text-gray-500 text-[0.8em] absolute top-0 right-0 p-2">
+            {new Date(msg.time_sent).toLocaleTimeString('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' })}
             </div>
           </div>
         ))}

frontend/src/hooks/useCategoryFollow.ts

@@ -0,0 +1,63 @@
+import { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+
+export function useCategoryFollow() {
+  const [isCategoryFollowing, setIsCategoryFollowing] = useState<boolean>(false);
+  const { isLoggedIn } = useAuth();
+
+  const checkCategoryFollowStatus = async (categoryName: string) => {
+    try {
+      const response = await fetch(`/api/user/category/following/${categoryName}`);
+      const data = await response.json();
+      setIsCategoryFollowing(data.following);
+    } catch (error) {
+      console.error("Error checking follow status:", error);
+    }
+  };
+
+  const followCategory = async (categoryName: number) => {
+    if (!isLoggedIn) {
+      return;
+    }
+    
+    try {
+      const response = await fetch(`/api/user/category/follow/${categoryName}`);
+      const data = await response.json();
+      if (data.success) {
+        console.log(`Now following category ${categoryName}`);
+        setIsCategoryFollowing(true);
+      } else {
+        console.error(`Failed to follow category ${categoryName}`);
+      }
+    } catch (error) {
+      console.error("Error following category:", error);
+    }
+  };
+
+  const unfollowCategory = async (categoryName: number) => {
+    if (!isLoggedIn) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/user/category/unfollow/${categoryName}`);
+      const data = await response.json();
+      if (data.success) {
+        console.log(`Unfollowed category ${categoryName}`);
+        setIsCategoryFollowing(false);
+      } else {
+        console.error(`Failed to unfollow category ${categoryName}`);
+      }
+    } catch (error) {
+      console.error("Error unfollowing category:", error);
+    }
+  };
+
+  return {
+    isCategoryFollowing,
+    setIsCategoryFollowing,
+    checkCategoryFollowStatus,
+    followCategory,
+    unfollowCategory
+  };
+}

frontend/src/pages/AllCategoriesPage.tsx

@@ -1,33 +1,46 @@
-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);
   
-  useEffect(() => {
+  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();
-        // Adds to offset once data is returned
-        if (data.length > 0) {
-          setCategoryOffset(prev => prev + data.length);
-        } else {
+      
+      if (data.length === 0) {
         setHasMoreData(false);
+        return [];
       }
 
-        // Transform the data to match CategoryItem interface
+      setCategoryOffset(prev => prev + data.length);
+
       const processedCategories = data.map((category: any) => ({
         type: "category" as const,
         id: category.category_id,
@@ -38,21 +51,32 @@ const AllCategoriesPage: React.FC = () => {
           .replace(/ /g, "_")}.webp`,
       }));
 
-        setCategories(processedCategories);
+      setCategories(prev => [...prev, ...processedCategories]);
+      return processedCategories;
     } catch (error) {
       console.error("Error fetching categories:", error);
+      return [];
+    } finally {
+      isLoading.current = false;
     }
   };
 
+  useEffect(() => {
     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,13 +95,13 @@ 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>
   );

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(() => {
+    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/${category_name}`);
+      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();
-        const formattedData = data.map((stream: any) => ({
+
+      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: category_name,
+        streamCategory: categoryName,
         viewers: stream.num_viewers,
         thumbnail:
           stream.thumbnail ||
-            (category_name &&
-              `/images/category_thumbnails/${category_name
+          (categoryName &&
+            `/images/category_thumbnails/${categoryName
               .toLowerCase()
               .replace(/ /g, "_")}.webp`),
       }));
-        setStreams(formattedData);
+
+      setStreams(prev => [...prev, ...processedStreams]);
+      return processedStreams
     } catch (error) {
       console.error("Error fetching category streams:", error);
     } finally {
-        setIsLoading(false);
+      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 && (

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