From 379140852a0f5ada6fba20b5bae9d2563b17492a Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Wed, 26 Feb 2025 13:25:40 +0000
Subject: [PATCH] REFACTOR: Update list components style; REFACTOR: Correct
 loading handling in `AllCategoriesPage`; REFACTOR: Update to `ResultsPage`

---
 frontend/src/components/Layout/ListItem.tsx |   6 +-
 frontend/src/components/Layout/ListRow.tsx  |  56 ++++---
 frontend/src/pages/AllCategoriesPage.tsx    |  17 +-
 frontend/src/pages/ResultsPage.tsx          | 171 ++++++++------------
 4 files changed, 105 insertions(+), 145 deletions(-)

diff --git a/frontend/src/components/Layout/ListItem.tsx b/frontend/src/components/Layout/ListItem.tsx
index 6e0f569..4fe6af0 100644
--- a/frontend/src/components/Layout/ListItem.tsx
+++ b/frontend/src/components/Layout/ListItem.tsx
@@ -26,13 +26,13 @@ const ListItem: React.FC<ListItemProps> = ({
     return (
       <div className="p-4 pb-10">
         <div
-          className={`group relative w-fit flex flex-col bg-blue-600 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((20vw+20vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-blue-800 z-50`}
+          className={`group relative w-fit flex flex-col bg-purple-900 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((27vw+27vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 z-50 transition-all`}
           onClick={onItemClick}
         >
           <img
             src="/images/monkey.png"
             alt={`user ${username}`}
-            className="rounded-xl max-w-[calc((20vw+20vh)/2)] border-[0.15em] border-purple-500 cursor-pointer"
+            className="rounded-xl border-[0.15em] border-[var(--bg-color)] cursor-pointer"
           />
           <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
             {title}
@@ -50,7 +50,7 @@ const ListItem: React.FC<ListItemProps> = ({
   return (
     <div className="p-4">
       <div
-        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-pink-700 hover:scale-105 transition-all`}
+        className={`${extraClasses} overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg cursor-pointer mx-auto hover:bg-purple-600 hover:scale-105 transition-all`}
         onClick={onItemClick}
       >
         <div className="relative w-full aspect-video overflow-hidden rounded-t-lg">
diff --git a/frontend/src/components/Layout/ListRow.tsx b/frontend/src/components/Layout/ListRow.tsx
index ba10380..5f98440 100644
--- a/frontend/src/components/Layout/ListRow.tsx
+++ b/frontend/src/components/Layout/ListRow.tsx
@@ -89,7 +89,7 @@ const ListRow = forwardRef<
 
     return (
       <div
-        className={`${extraClasses} flex w-full relative rounded-[1.5rem] text-white transition-all ${
+        className={`${extraClasses} flex relative rounded-[1.5rem] text-white transition-all ${
           variant === "search"
             ? "items-center"
             : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
@@ -134,30 +134,38 @@ const ListRow = forwardRef<
           <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`}
+              wrap ? "flex-wrap justify-between" : "overflow-x-scroll whitespace-nowrap"
+            } max-w-[95%] items-center w-full mx-auto scroll-smooth scrollbar-hide`}
           >
-            {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
-                    ? onItemClick?.(item.username)
-                    : onItemClick?.(item.title)
-                }
-                extraClasses={`${itemExtraClasses} w-[20vw]`}
-              />
-            ))}
+            {currentItems.length === 0 ? (
+              <h1 className="mx-auto">Nothing Found</h1>
+            ) : (
+              <>
+                {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
+                        ? onItemClick?.(item.username)
+                        : onItemClick?.(item.title)
+                    }
+                    extraClasses={`${itemExtraClasses}`}
+                  />
+                ))}
+              </>
+            )}
           </div>
         </div>
         {children}
diff --git a/frontend/src/pages/AllCategoriesPage.tsx b/frontend/src/pages/AllCategoriesPage.tsx
index 3e05cd4..d75aaa2 100644
--- a/frontend/src/pages/AllCategoriesPage.tsx
+++ b/frontend/src/pages/AllCategoriesPage.tsx
@@ -5,7 +5,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
 import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
 import LoadingScreen from "../components/Layout/LoadingScreen";
 
-interface categoryData {
+interface CategoryData {
   type: "category";
   id: number;
   title: string;
@@ -13,20 +13,16 @@ interface categoryData {
   thumbnail: string;
 }
 const AllCategoriesPage: React.FC = () => {
-  const [categories, setCategories] = useState<categoryData[]>([]);
+  const [categories, setCategories] = useState<CategoryData[]>([]);
   const navigate = useNavigate();
   const [categoryOffset, setCategoryOffset] = useState(0);
   const [noCategories, setNoCategories] = useState(12);
   const [hasMoreData, setHasMoreData] = useState(true);
-
+  const [isLoading, setIsLoading] = 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;
+    if (isLoading) return;
 
     try {
       const response = await fetch(
@@ -60,7 +56,7 @@ const AllCategoriesPage: React.FC = () => {
       console.error("Error fetching categories:", error);
       return [];
     } finally {
-      isLoading.current = false;
+      setIsLoading(false);
     }
   };
 
@@ -87,7 +83,7 @@ const AllCategoriesPage: React.FC = () => {
   };
 
   return (
-    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]  bg-[url(/images/background-pattern.svg)]">
+    <DynamicPageContent className="min-h-screen">
       <ListRow
         ref={listRowRef}
         type="category"
@@ -95,6 +91,7 @@ const AllCategoriesPage: React.FC = () => {
         items={categories}
         onItemClick={handleCategoryClick}
         extraClasses="bg-[var(--recommend)] text-center"
+        itemExtraClasses="w-[20vw]"
         wrap={true}
       />
     </DynamicPageContent>
diff --git a/frontend/src/pages/ResultsPage.tsx b/frontend/src/pages/ResultsPage.tsx
index a80fcf6..6b4d3d6 100644
--- a/frontend/src/pages/ResultsPage.tsx
+++ b/frontend/src/pages/ResultsPage.tsx
@@ -27,128 +27,83 @@ const ResultsPage: React.FC = ({ }) => {
     return () => window.removeEventListener("resize", checkHeight);
   }, []);
 
-  if (
-    searchResults.categories.length === 0 &&
-    searchResults.users.length === 0 &&
-    searchResults.streams.length === 0
-  ) {
-    return (
-      <DynamicPageContent
-        id="results-page"
-        navbarVariant="no-navbar"
-        className="flex flex-col items-stretch justify-stretch h-[70vh] my-[15vh] p-4"
-        contentClassName="flex flex-col items-center h-full p-4"
-        style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
-      >
-        {/* Hide Scrollbar for WebKit-based Browsers */}
-        <style>
-          {`
-              ::-webkit-scrollbar {
-                display: none;
-              }
-            `}
-        </style>
-        <h1 className="text-3xl font-bold mb-4">
-          Search results for "{query}"
-        </h1>
-        <SearchBar value={query} />
-        <h3 className="flex items-center flex-grow text-2xl text-gray-400">Nothing Found</h3>
-        <div className="flex gap-8">
-          <Button onClick={() => navigate(-1)}>Go Back</Button>
-        </div>
-      </DynamicPageContent>
-    );
-  }
-
   return (
-    <DynamicPageContent id="results-page" navbarVariant="no-navbar">
-      <div className="flex flex-col items-center justify-evenly min-h-[96vh] p-4">
+    <DynamicPageContent id="results-page" navbarVariant="no-searchbar">
+      <div className="flex flex-col items-center justify-evenly gap-4 p-4">
         <h1 className="text-3xl font-bold mb-4">
           Search results for "{query}"
         </h1>
         <SearchBar value={query} />
 
-        <div id="results" className="flex flex-col flex-grow w-full">
-          {searchResults.streams.length > 0 && (
-            <ListRow
-              variant="search"
-              type="stream"
-              items={searchResults.streams.map((stream: any) => ({
-                id: stream.user_id,
-                type: "stream",
-                title: stream.title,
-                username: stream.username,
-                streamCategory: stream.category_name,
-                viewers: stream.num_viewers,
-                thumbnail: stream.thumbnail_url,
-              }))}
-              title="Streams"
-              onItemClick={(streamer_name: string) =>
-                (window.location.href = `/${streamer_name}`)
-              }
-              itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-              amountForScroll={3}
-            />
-          )}
+        <div id="results" className="flex flex-col flex-grow gap-10 w-full">
+          <ListRow
+            variant="search"
+            type="stream"
+            items={searchResults.streams.map((stream: any) => ({
+              id: stream.user_id,
+              type: "stream",
+              title: stream.title,
+              username: stream.username,
+              streamCategory: stream.category_name,
+              viewers: stream.num_viewers,
+              thumbnail: stream.thumbnail_url,
+            }))}
+            title="Streams"
+            onItemClick={(streamer_name: string) =>
+              (window.location.href = `/${streamer_name}`)
+            }
+            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
 
-          {searchResults.categories.length > 0 && (
-            <ListRow
-              variant="search"
-              type="category"
-              items={searchResults.categories.map((category: any) => ({
-                id: category.category_id,
-                type: "category",
-                title: category.category_name,
-                viewers: 0,
-                thumbnail: `/images/category_thumbnails/${category.category_name
-                  .toLowerCase()
-                  .replace(/ /g, "_")}.webp`,
-              }))}
-              title="Categories"
-              onItemClick={(category_name: string) =>
-                navigate(`/category/${category_name}`)
-              }
-              titleClickable={true}
-              itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-              amountForScroll={3}
-            />
-          )}
+          <ListRow
+            variant="search"
+            type="category"
+            items={searchResults.categories.map((category: any) => ({
+              id: category.category_id,
+              type: "category",
+              title: category.category_name,
+              viewers: 0,
+              thumbnail: `/images/category_thumbnails/${category.category_name
+                .toLowerCase()
+                .replace(/ /g, "_")}.webp`,
+            }))}
+            title="Categories"
+            onItemClick={(category_name: string) =>
+              navigate(`/category/${category_name}`)
+            }
+            titleClickable={true}
+            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
 
-          {searchResults.users.length > 0 && (
-            <ListRow
-              variant="search"
-              type="user"
-              items={searchResults.users.map((user: any) => ({
-                id: user.user_id,
-                type: "user",
-                title: `${user.is_live ? "🔴" : ""} ${user.username}`,
-                viewers: 0,
-                username: user.username,
-                thumbnail: user.profile_picture,
-              }))}
-              title="Users"
-              onItemClick={(username: string) =>
-                (window.location.href = `/user/${username}`)
-              }
-              amountForScroll={3}
-              itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
-            />
-          )}
+          <ListRow
+            variant="search"
+            type="user"
+            items={searchResults.users.map((user: any) => ({
+              id: user.user_id,
+              type: "user",
+              title: `${user.is_live ? "🔴" : ""} ${user.username}`,
+              viewers: 0,
+              username: user.username,
+              thumbnail: user.profile_picture,
+            }))}
+            title="Users"
+            onItemClick={(username: string) =>
+              (window.location.href = `/user/${username}`)
+            }
+            amountForScroll={3}
+            extraClasses="min-h-[calc((20vw+20vh)/4)] bg-[var(--liveNow)]"
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+          />
         </div>
 
         <div
           className={`${overflow && "absolute top-[5vh] right-[2vw]"
             } flex gap-[2vw]`}
         >
-          <Button
-            extraClasses="text-[2vw]"
-            onClick={() => (window.location.href = "/")}
-          >
-            Go Home
-          </Button>
-          <Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
-            Go Back
-          </Button>
         </div>
       </div>
     </DynamicPageContent>