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,16 +134,22 @@ 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.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}
+                    username={
+                      item.type === "category" ? undefined : item.username
+                    }
                    streamCategory={
                      item.type === "stream" ? item.streamCategory : undefined
                    }
@@ -155,9 +161,11 @@ const ListRow = forwardRef<
                        ? onItemClick?.(item.username)
                        : onItemClick?.(item.title)
                    }
-                extraClasses={`${itemExtraClasses} w-[20vw]`}
+                    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,49 +27,15 @@ 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 && (
+        <div id="results" className="flex flex-col flex-grow gap-10 w-full">
          <ListRow
            variant="search"
            type="stream"
@@ -86,12 +52,11 @@ const ResultsPage: React.FC = ({ }) => {
            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"
@@ -109,12 +74,11 @@ const ResultsPage: React.FC = ({ }) => {
              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"
@@ -131,24 +95,15 @@ const ResultsPage: React.FC = ({ }) => {
              (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>