REFACTOR: Update list components style;

REFACTOR: Correct loading handling in `AllCategoriesPage`; REFACTOR: Update to `ResultsPage`
2025-02-26 13:25:40 +00:00
parent d36eaffafb
commit 379140852a
4 changed files with 105 additions and 145 deletions
--- 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>
--- 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>