shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-17 22:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

updated category page

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-11 12:10:13 +05:30
parent 0381e72367
commit 5b787922f2
2 changed files with 102 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/components/categorycard/CategoryCard.jsx
View File

@@ -159,18 +159,31 @@ const CategoryCard = React.memo(
</p> </p>
</div> </div>
)} )}
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium"> {item.tvInfo?.showType && (
{item.tvInfo.showType.split(" ").shift()} <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
</div> {item.tvInfo.showType.split(" ").shift()}
<div className="w-0.5 h-0.5 rounded-full bg-white/60"></div> </div>
<div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium"> )}
{item.tvInfo?.duration === "m" || {item.releaseDate && (
item.tvInfo?.duration === "?" || <div className="bg-[#2a2a2a] text-white rounded-[2px] px-2 py-1 text-[11px] font-medium">
item.duration === "m" || {item.releaseDate}
item.duration === "?" </div>
? "N/A" )}
: item.tvInfo?.duration || item.duration || "N/A"} {!item.tvInfo?.showType && item.type && (
</div> <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> </div>
</div> </div>
@@ -253,17 +266,31 @@ const CategoryCard = React.memo(
</p> </p>
</div> </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 && (
{item.tvInfo.showType.split(" ").shift()} <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">
</div> {item.tvInfo.showType.split(" ").shift()}
<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"> </div>
{item.tvInfo?.duration === "m" || )}
item.tvInfo?.duration === "?" || {item.releaseDate && (
item.duration === "m" || <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.duration === "?" {item.releaseDate}
? "N/A" </div>
: item.tvInfo?.duration || item.duration || "N/A"} )}
</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> </div>
</div> </div>

102
src/pages/category/Category.jsx
View File

@@ -2,14 +2,9 @@ import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom"; import { useSearchParams } from "react-router-dom";
import getCategoryInfo from "@/src/utils/getCategoryInfo.utils"; import getCategoryInfo from "@/src/utils/getCategoryInfo.utils";
import CategoryCard from "@/src/components/categorycard/CategoryCard"; import CategoryCard from "@/src/components/categorycard/CategoryCard";
import Genre from "@/src/components/genres/Genre"; import CategoryCardLoader from "@/src/components/Loader/CategoryCard.loader";
import Topten from "@/src/components/topten/Topten";
import Loader from "@/src/components/Loader/Loader";
import Error from "@/src/components/error/Error";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { useHomeInfo } from "@/src/context/HomeInfoContext";
import PageSlider from "@/src/components/pageslider/PageSlider"; import PageSlider from "@/src/components/pageslider/PageSlider";
import SidecardLoader from "@/src/components/Loader/Sidecard.loader";
function Category({ path, label }) { function Category({ path, label }) {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
@@ -18,8 +13,8 @@ function Category({ path, label }) {
const [error, setError] = useState(null); const [error, setError] = useState(null);
const [totalPages, setTotalPages] = useState(0); const [totalPages, setTotalPages] = useState(0);
const page = parseInt(searchParams.get("page")) || 1; const page = parseInt(searchParams.get("page")) || 1;
const { homeInfo, homeInfoLoading } = useHomeInfo();
const navigate = useNavigate(); const navigate = useNavigate();
useEffect(() => { useEffect(() => {
const fetchCategoryInfo = async () => { const fetchCategoryInfo = async () => {
setLoading(true); setLoading(true);
@@ -31,68 +26,75 @@ function Category({ path, label }) {
} catch (err) { } catch (err) {
setError(err); setError(err);
console.error("Error fetching category info:", err); console.error("Error fetching category info:", err);
setLoading(false);
} }
}; };
fetchCategoryInfo(); fetchCategoryInfo();
window.scrollTo(0, 0); window.scrollTo({ top: 0, behavior: 'smooth' });
}, [path, page]); }, [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) => { const handlePageChange = (newPage) => {
setSearchParams({ page: 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 ( return (
<div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]"> <div className="max-w-[1600px] mx-auto flex flex-col mt-[64px] max-md:mt-[50px]">
{categoryInfo ? ( <div className="w-full flex flex-col gap-y-8 mt-6">
<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"> {loading ? (
{page > totalPages ? ( <CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={categoryGridClass} />
<p className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6"> ) : 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" /> You came a long way, go back <br className="max-[300px]:hidden" />
nothing is here nothing is here
</p> </p>
) : ( </div>
<div> ) : categoryInfo && categoryInfo.length > 0 ? (
{categoryInfo && categoryInfo.length > 0 && ( <div className="flex flex-col gap-y-2 max-[478px]:gap-y-0">
<CategoryCard <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
label={label.split("/").pop()} {label.split("/").pop()}
data={categoryInfo} </h1>
showViewMore={false} <CategoryCard
className={"mt-0"} data={categoryInfo}
categoryPage={true} showViewMore={false}
path={path} className="mt-0"
/> gridClass={categoryGridClass}
)} categoryPage={true}
path={path}
/>
<div className="flex justify-center w-full mt-8">
<PageSlider <PageSlider
page={page} page={page}
totalPages={totalPages} totalPages={totalPages}
handlePageChange={handlePageChange} handlePageChange={handlePageChange}
/> />
</div> </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>
</div> ) : error ? (
) : ( <div className="flex flex-col gap-y-4">
<Error /> <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> </div>
); );
} }