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/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">
--- 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}
--- 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>