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,124 +22,120 @@ interface ListRowProps {
   children?: React.ReactNode;
 }
 
-// Row of entries
+const ListRow = forwardRef<{ addMoreItems: (newItems: ListItemProps[]) => void }, ListRowProps>(
-const ListRow: React.FC<ListRowProps> = ({
+  ({ variant, type, title = "", description = "", items, wrap, onClick, titleClickable, extraClasses = "", itemExtraClasses = "", amountForScroll, children }, ref) => {
-  variant = "default",
+    const [currentItems, setCurrentItems] = useState(items);
-  type,
+    const slider = useRef<HTMLDivElement>(null);
-  title = "",
+    const scrollAmount = window.innerWidth * 0.3;
-  description = "",
+    const navigate = useNavigate();
-  items,
-  wrap = false,
-  titleClickable = false,
-  onClick,
-  extraClasses = "",
-  itemExtraClasses = "",
-  amountForScroll = 4,
-  children,
-}) => {
-  const slider = useRef<HTMLDivElement>(null);
-  const scrollAmount = window.innerWidth * 0.3;
-  const navigate = useNavigate();
 
-  const slideRight = () => {
+    const addMoreItems = (newItems: ListItemProps[]) => {
-    if (!wrap && slider.current) {
+      setCurrentItems((prevItems) => [...prevItems, ...newItems]);
-      slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
+    };
-    }
-  };
 
-  const slideLeft = () => {
+    useImperativeHandle(ref, () => ({
-    if (!wrap && slider.current) {
+      addMoreItems,
-      slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
+    }));
-    }
-  };
 
-  const handleTitleClick = (type: string) => {
+    const slideRight = () => {
-    switch (type) {
+      if (!wrap && slider.current) {
-      case "stream":
+        slider.current.scrollBy({ left: +scrollAmount, behavior: "smooth" });
-        break;
+      }
-      case "category":
+    };
-        navigate("/categories");
-        break;
-      case "user":
-        break;
-      default:
-        break;
-    }
-  };
 
-  return (
+    const slideLeft = () => {
-    <div
+      if (!wrap && slider.current) {
-      className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
+        slider.current.scrollBy({ left: -scrollAmount, behavior: "smooth" });
-        variant === "search"
+      }
-          ? "items-center"
+    };
-          : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
+
-      }`}
+    const handleTitleClick = (type: string) => {
-    >
+      switch (type) {
+        case "stream":
+          break;
+        case "category":
+          navigate("/categories");
+          break;
+        case "user":
+          break;
+        default:
+          break;
+      }
+    };
+
+    return (
       <div
-        className={`text-center ${
+        className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
-          variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
+          variant === "search"
+            ? "items-center"
+            : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
         }`}
       >
-        <h2
-          className={`${
-            titleClickable ? "cursor-pointer hover:underline" : "cursor-default"
-          } text-2xl font-bold`}
-          onClick={titleClickable ? () => handleTitleClick(type) : undefined}
-        >
-          {title}
-        </h2>
-        <p>{description}</p>
-      </div>
-
-      <div className="relative overflow-hidden flex flex-grow items-center z-0">
-        {!wrap && items.length > amountForScroll && (
-          <>
-            <ArrowLeftIcon
-              onClick={slideLeft}
-              size={30}
-              className="absolute left-0 cursor-pointer z-[999]"
-            />
-            <ArrowRightIcon
-              onClick={slideRight}
-              size={30}
-              className="absolute right-0 cursor-pointer z-[999]"
-            />
-          </>
-        )}
-
         <div
-          ref={slider}
+          className={`text-center ${
-          className={`flex ${
+            variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
-            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) => (
+          <h2
-            <ListItem
+            className={`${
-              key={`${item.type}-${item.id}`}
+              titleClickable ? "cursor-pointer hover:underline" : "cursor-default"
-              id={item.id}
+            } text-2xl font-bold`}
-              type={type}
+            onClick={titleClickable ? () => handleTitleClick(type) : undefined}
-              title={item.title}
+          >
-              username={item.type === "category" ? undefined : item.username}
+            {title}
-              streamCategory={
+          </h2>
-                item.type === "stream" ? item.streamCategory : undefined
+          <p>{description}</p>
-              }
-              viewers={item.viewers}
-              thumbnail={item.thumbnail}
-              onItemClick={() =>
-                (item.type === "stream" || item.type === "user") &&
-                item.username
-                  ? onClick?.(item.username)
-                  : onClick?.(item.title)
-              }
-              extraClasses={`${itemExtraClasses} min-w-[20vw]`}
-            />
-          ))}
         </div>
-      </div>
 
-      {children}
+        <div className="relative overflow-hidden flex flex-grow items-center z-0">
-    </div>
+          {!wrap && currentItems.length > (amountForScroll || 0) && (
-  );
+            <>
-};
+              <ArrowLeftIcon
+                onClick={slideLeft}
+                size={30}
+                className="absolute left-0 cursor-pointer z-[999]"
+              />
+              <ArrowRightIcon
+                onClick={slideRight}
+                size={30}
+                className="absolute right-0 cursor-pointer z-[999]"
+              />
+            </>
+          )}
+
+          <div
+            ref={slider}
+            className={`flex ${
+              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`}
+          >
+            {currentItems.map((item) => (
+              <ListItem
+                key={`${item.type}-${item.id}`}
+                id={item.id}
+                type={type}
+                title={item.title}
+                username={item.type === "category" ? undefined : item.username}
+                streamCategory={
+                  item.type === "stream" ? item.streamCategory : undefined
+                }
+                viewers={item.viewers}
+                thumbnail={item.thumbnail}
+                onItemClick={() =>
+                  (item.type === "stream" || item.type === "user") &&
+                  item.username
+                    ? onClick?.(item.username)
+                    : onClick?.(item.title)
+                }
+                extraClasses={`${itemExtraClasses} min-w-[20vw] max-w-[20vw]`}
+              />
+            ))}
+          </div>
+        </div>
+        {children}
+      </div>
+    );
+  }
+);
 
 export default ListRow;

frontend/src/components/Stream/ChatPanel.tsx

@@ -21,7 +21,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   streamId,
   onViewerCountChange,
 }) => {
-  const { isLoggedIn, username, userId} = useAuth();
+  const { isLoggedIn, username, userId } = useAuth();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { socket, isConnected } = useSocket();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -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,13 +136,12 @@ 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 ${
+              className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${msg.chatter_username === username ? "" : "cursor-pointer"
-                msg.chatter_username === username ? "" : "cursor-pointer"
+                }`}
-              }`}
               onClick={() =>
                 msg.chatter_username === username
                   ? null
@@ -160,11 +160,10 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
               <div className="flex items-center space-x-0.5em">
                 {/* Username */}
                 <span
-                  className={`font-bold text-[1em] ${
+                  className={`font-bold text-[1em] ${msg.chatter_username === username
-                    msg.chatter_username === username
                       ? "text-purple-600"
                       : "text-green-400 cursor-pointer"
-                  }`}
+                    }`}
                   onClick={() =>
                     msg.chatter_username === username
                       ? null
@@ -181,8 +180,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
             </div>
 
             {/* Time sent */}
-            <div className="text-gray-500 text-[0.8em] self-start">
+            <div className="text-gray-500 text-[0.8em] absolute top-0 right-0 p-2">
-              {new Date(msg.time_sent).toLocaleTimeString()}
+            {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,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);
   
-  useEffect(() => {
+  const listRowRef = useRef<any>(null);
-    const fetchCategories = async () => {
+  const isLoading = useRef(false);
-      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 fetchCategories = async () => {
-        const processedCategories = data.map((category: any) => ({
+    // If already loading, skip this fetch
-          type: "category" as const,
+    if (isLoading.current) return;
-          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);
+    isLoading.current = true;
-      } catch (error) {
+    
-        console.error("Error fetching categories:", error);
+    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();
       
-    fetchCategories();
+      if (data.length === 0) {
-  }, [setCategories]);
+        setHasMoreData(false);
+        return [];
+      }
 
-  const logOnScroll = () => {
+      setCategoryOffset(prev => prev + data.length);
-    console.log("hi")
+
+      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;
+    }
   };
-  fetchContentOnScroll(logOnScroll,hasMoreData)
 
-  if (!categories.length) {
+  useEffect(() => {
+    fetchCategories();
+  }, []);
+
+  const loadOnScroll = async () => {
+    if (hasMoreData && listRowRef.current) {
+      const newCategories = await fetchCategories();
+      if (newCategories?.length > 0) {
+        listRowRef.current.addMoreItems(newCategories);
+      }
+    }
+  };
+
+  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(() => {
-    const fetchCategoryStreams = async () => {
+    checkCategoryFollowStatus(categoryName);
-      try {
+  }, [categoryName]);
-        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);
-      }
-    };
 
+  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`}
+          title={`${categoryName} Streams`}
-          description={`Live streams in the ${category_name} category`}
+          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