FRESHHHH

src/components/producer/Producer.jsx

@@ -0,0 +1,102 @@
+import { useNavigate, useParams, useSearchParams } from "react-router-dom";
+import Error from "../error/Error";
+import Topten from "../topten/Topten";
+import Genre from "../genres/Genre";
+import SidecardLoader from "../Loader/Sidecard.loader";
+import PageSlider from "../pageslider/PageSlider";
+import CategoryCard from "../categorycard/CategoryCard";
+import { useEffect, useState } from "react";
+import { useHomeInfo } from "@/src/context/HomeInfoContext";
+import getProducer from "@/src/utils/getProducer.utils";
+import Loader from "../Loader/Loader";
+
+function Producer() {
+  const { id } = useParams();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [producerInfo, setProducerInfo] = useState(null);
+  const [loading, setLoading] = useState(true);
+  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 fetchProducerInfo = async () => {
+      setLoading(true);
+      try {
+        const data = await getProducer(id, page);
+        setProducerInfo(data.data);
+        setTotalPages(data.totalPages);
+        setLoading(false);
+      } catch (err) {
+        setError(err);
+        console.error("Error fetching category info:", err);
+      }
+    };
+    fetchProducerInfo();
+    window.scrollTo(0, 0);
+  }, [id, page]);
+  if (loading) return <Loader type="producer" />;
+  if (error) {
+    navigate("/error-page");
+    return <Error />;
+  }
+  if (!producerInfo) {
+    navigate("/404-not-found-page");
+    return null;
+  }
+  const handlePageChange = (newPage) => {
+    setSearchParams({ page: newPage });
+  };
+
+  return (
+    <div className="w-full flex flex-col gap-y-4 mt-[100px] max-md:mt-[50px]">
+      {producerInfo ? (
+        <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">
+          {page > totalPages ? (
+            <p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6">
+              You came a long way, go back <br className="max-[300px]:hidden" />
+              nothing is here
+            </p>
+          ) : (
+            <div>
+              {producerInfo && (
+                <CategoryCard
+                  label={
+                    (id.charAt(0).toUpperCase() + id.slice(1))
+                      .split("-")
+                      .join(" ") + " Anime"
+                  }
+                  data={producerInfo}
+                  showViewMore={false}
+                  className={"mt-0"}
+                  categoryPage={true}
+                />
+              )}
+              <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 />
+      )}
+    </div>
+  );
+}
+export default Producer;