From 5b787922f2f6a8f82daab3e9fde3ec817eae7727 Mon Sep 17 00:00:00 2001
From: Tejas Panchal <tejaspanchal127@gmail.com>
Date: Mon, 11 Aug 2025 12:10:13 +0530
Subject: [PATCH] updated category page

---
 src/components/categorycard/CategoryCard.jsx |  73 ++++++++-----
 src/pages/category/Category.jsx              | 102 ++++++++++---------
 2 files changed, 102 insertions(+), 73 deletions(-)

diff --git a/src/components/categorycard/CategoryCard.jsx b/src/components/categorycard/CategoryCard.jsx
index b5cbf7b..579d93f 100644
--- a/src/components/categorycard/CategoryCard.jsx
+++ b/src/components/categorycard/CategoryCard.jsx
@@ -159,18 +159,31 @@ const CategoryCard = React.memo(
                             </p>
                           </div>
                         )}
-                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
-                          {item.tvInfo.showType.split(" ").shift()}
-                        </div>
-                        <div className="w-0.5 h-0.5 rounded-full bg-white/60"></div>
-                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
-                          {item.tvInfo?.duration === "m" ||
-                          item.tvInfo?.duration === "?" ||
-                          item.duration === "m" ||
-                          item.duration === "?"
-                            ? "N/A"
-                            : item.tvInfo?.duration || item.duration || "N/A"}
-                        </div>
+                        {item.tvInfo?.showType && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.tvInfo.showType.split(" ").shift()}
+                          </div>
+                        )}
+                        {item.releaseDate && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.releaseDate}
+                          </div>
+                        )}
+                        {!item.tvInfo?.showType && item.type && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.type}
+                          </div>
+                        )}
+                        {(item.tvInfo?.duration || item.duration) && (
+                          <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
+                            {item.tvInfo?.duration === "m" ||
+                            item.tvInfo?.duration === "?" ||
+                            item.duration === "m" ||
+                            item.duration === "?"
+                              ? "N/A"
+                              : item.tvInfo?.duration || item.duration || "N/A"}
+                          </div>
+                        )}
                       </div>
                     </div>
                   </div>
@@ -253,17 +266,31 @@ const CategoryCard = React.memo(
                           </p>
                         </div>
                       )}
-                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
-                        {item.tvInfo.showType.split(" ").shift()}
-                      </div>
-                      <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
-                        {item.tvInfo?.duration === "m" ||
-                        item.tvInfo?.duration === "?" ||
-                        item.duration === "m" ||
-                        item.duration === "?"
-                          ? "N/A"
-                          : item.tvInfo?.duration || item.duration || "N/A"}
-                      </div>
+                      {item.tvInfo?.showType && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
+                          {item.tvInfo.showType.split(" ").shift()}
+                        </div>
+                      )}
+                      {item.releaseDate && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
+                          {item.releaseDate}
+                        </div>
+                      )}
+                      {!item.tvInfo?.showType && item.type && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1">
+                          {item.type}
+                        </div>
+                      )}
+                      {(item.tvInfo?.duration || item.duration) && (
+                        <div className="bg-[#2a2a2a] text-white rounded-[2px] px-1.5 py-0.5 text-[10px] font-medium max-[478px]:py-0.5 max-[478px]:px-1 max-[478px]:hidden">
+                          {item.tvInfo?.duration === "m" ||
+                          item.tvInfo?.duration === "?" ||
+                          item.duration === "m" ||
+                          item.duration === "?"
+                            ? "N/A"
+                            : item.tvInfo?.duration || item.duration || "N/A"}
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>
diff --git a/src/pages/category/Category.jsx b/src/pages/category/Category.jsx
index f16f80e..9b4b39b 100644
--- a/src/pages/category/Category.jsx
+++ b/src/pages/category/Category.jsx
@@ -2,14 +2,9 @@ import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import getCategoryInfo from "@/src/utils/getCategoryInfo.utils";
 import CategoryCard from "@/src/components/categorycard/CategoryCard";
-import Genre from "@/src/components/genres/Genre";
-import Topten from "@/src/components/topten/Topten";
-import Loader from "@/src/components/Loader/Loader";
-import Error from "@/src/components/error/Error";
+import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
 import { useNavigate } from "react-router-dom";
-import { useHomeInfo } from "@/src/context/HomeInfoContext";
 import PageSlider from "@/src/components/pageslider/PageSlider";
-import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
 
 function Category({ path, label }) {
   const [searchParams, setSearchParams] = useSearchParams();
@@ -18,8 +13,8 @@ function Category({ path, label }) {
   const [error, setError] = useState(null);
   const [totalPages, setTotalPages] = useState(0);
   const page = parseInt(searchParams.get("page")) || 1;
-  const { homeInfo, homeInfoLoading } = useHomeInfo();
   const navigate = useNavigate();
+  
   useEffect(() => {
     const fetchCategoryInfo = async () => {
       setLoading(true);
@@ -31,68 +26,75 @@ function Category({ path, label }) {
       } catch (err) {
         setError(err);
         console.error("Error fetching category info:", err);
+        setLoading(false);
       }
     };
     fetchCategoryInfo();
-    window.scrollTo(0, 0);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
   }, [path, page]);
-  if (loading) return <Loader type="category" />;
-  if (error) {
-    navigate("/error-page");
-    return <Error />;
-  }
-  if (!categoryInfo) {
-    navigate("/404-not-found-page");
-    return null;
-  }
+
   const handlePageChange = (newPage) => {
     setSearchParams({ page: newPage });
   };
 
+  const categoryGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
+
   return (
-    <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
-      {categoryInfo ? (
-        <div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-[478px]:px-2">
-          {page > totalPages ? (
-            <p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6">
+    <div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
+      <div className="w-full flex flex-col gap-y-8 mt-6">
+        {loading ? (
+          <CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={categoryGridClass} />
+        ) : page > totalPages ? (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6">
               You came a long way, go back <br className="max-[300px]:hidden" />
               nothing is here
             </p>
-          ) : (
-            <div>
-              {categoryInfo && categoryInfo.length > 0 && (
-                <CategoryCard
-                  label={label.split("/").pop()}
-                  data={categoryInfo}
-                  showViewMore={false}
-                  className={"mt-0"}
-                  categoryPage={true}
-                  path={path}
-                />
-              )}
+          </div>
+        ) : categoryInfo && categoryInfo.length > 0 ? (
+          <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <CategoryCard
+              data={categoryInfo}
+              showViewMore={false}
+              className="mt-0"
+              gridClass={categoryGridClass}
+              categoryPage={true}
+              path={path}
+            />
+            <div className="flex justify-center w-full mt-8">
               <PageSlider
                 page={page}
                 totalPages={totalPages}
                 handlePageChange={handlePageChange}
               />
             </div>
-          )}
-          <div className="w-full flex flex-col gap-y-10">
-            {homeInfoLoading ? (
-              <SidecardLoader />
-            ) : (
-              <>
-                {homeInfo && homeInfo.topten && (
-                  <Topten data={homeInfo.topten} className="mt-0" />
-                )}
-                {homeInfo?.genres && <Genre data={homeInfo.genres} />}
-              </>
-            )}
           </div>
-        </div>
-      ) : (
-        <Error />
-      )}
+        ) : error ? (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px]">
+              Couldn't get {label.split("/").pop()} results, please try again
+            </p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-y-4">
+            <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
+              {label.split("/").pop()}
+            </h1>
+            <p className="text-white text-lg max-[478px]:text-[16px]">
+              No results found for: {label.split("/").pop()}
+            </p>
+          </div>
+        )}
+      </div>
     </div>
   );
 }