fixed some bugs
This commit is contained in:
Jelaletdin12
@@ -2,16 +2,18 @@
|
||||
|
||||
import { useEffect, useState, useMemo, useCallback } from "react";
|
||||
import { ScrollArea } from "@/components/ui/scroll-area";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Product } from "@/lib/types/api";
|
||||
import CollectionFilters from "./CollectionFilters";
|
||||
import CollectionProductsGrid from "./CollectionProductsGrid";
|
||||
import CollectionFiltersSheet from "./CollectionFiltersSheet";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
useCollections,
|
||||
useCollectionFilters,
|
||||
useFilteredCollectionProducts,
|
||||
} from "@/features/collections/hooks/useCollections";
|
||||
import { useTranslations } from "next-intl";
|
||||
import type { Product } from "@/lib/types/api";
|
||||
import CollectionFilters from "./CollectionFilters";
|
||||
import CollectionProductsGrid from "./CollectionProductsGrid";
|
||||
import CollectionFiltersSheet from "./CollectionFiltersSheet";
|
||||
import ErrorPage from "@/components/ErrorPage";
|
||||
|
||||
interface CollectionPageClientProps {
|
||||
params: { locale: string; slug: string };
|
||||
@@ -24,8 +26,11 @@ export default function CollectionPageClient({
|
||||
const t = useTranslations();
|
||||
const [isSheetOpen, setIsSheetOpen] = useState(false);
|
||||
|
||||
const { data: collectionsData, isLoading: collectionsLoading } =
|
||||
useCollections();
|
||||
const {
|
||||
data: collectionsData,
|
||||
isLoading: collectionsLoading,
|
||||
isError: collectionsError,
|
||||
} = useCollections();
|
||||
|
||||
const selectedCollection = useMemo(() => {
|
||||
if (!collectionsData || !slug) return null;
|
||||
@@ -35,13 +40,21 @@ export default function CollectionPageClient({
|
||||
// State management
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [allProducts, setAllProducts] = useState<Product[]>([]);
|
||||
const [priceSort, setPriceSort] = useState<"none" | "lowToHigh" | "highToLow">("none");
|
||||
const [priceSort, setPriceSort] = useState<
|
||||
"none" | "lowToHigh" | "highToLow"
|
||||
>("none");
|
||||
const [priceRange, setPriceRange] = useState<[number, number]>([0, 10000]);
|
||||
const [selectedBrands, setSelectedBrands] = useState<Set<number>>(new Set());
|
||||
const [selectedCategories, setSelectedCategories] = useState<Set<number>>(new Set());
|
||||
const [selectedCategories, setSelectedCategories] = useState<Set<number>>(
|
||||
new Set()
|
||||
);
|
||||
|
||||
// Fetch filters
|
||||
const { data: filtersData } = useCollectionFilters(selectedCollection?.id, {
|
||||
const {
|
||||
data: filtersData,
|
||||
isLoading: filtersLoading,
|
||||
isError: filtersError,
|
||||
} = useCollectionFilters(selectedCollection?.id, {
|
||||
enabled: !!selectedCollection,
|
||||
});
|
||||
|
||||
@@ -60,19 +73,18 @@ export default function CollectionPageClient({
|
||||
params.categories = Array.from(selectedCategories);
|
||||
}
|
||||
|
||||
if (priceRange[0] > 0) {
|
||||
params.min_price = priceRange[0];
|
||||
}
|
||||
|
||||
if (priceRange[1] < 10000) {
|
||||
params.max_price = priceRange[1];
|
||||
}
|
||||
params.min_price = priceRange[0];
|
||||
params.max_price = priceRange[1];
|
||||
|
||||
return params;
|
||||
}, [currentPage, selectedBrands, selectedCategories, priceRange]);
|
||||
|
||||
// Fetch filtered products
|
||||
const { data: productsData, isFetching } = useFilteredCollectionProducts(
|
||||
const {
|
||||
data: productsData,
|
||||
isFetching,
|
||||
isError: productsError,
|
||||
} = useFilteredCollectionProducts(
|
||||
selectedCollection?.id?.toString() || "",
|
||||
filterParams,
|
||||
{ enabled: !!selectedCollection }
|
||||
@@ -97,14 +109,20 @@ export default function CollectionPageClient({
|
||||
if (currentPage === 1) {
|
||||
return productsData.data;
|
||||
}
|
||||
|
||||
const existingIds = new Set(prev.map((p) => p.id));
|
||||
const newProducts = productsData.data.filter(
|
||||
(p: Product) => !existingIds.has(p.id)
|
||||
);
|
||||
|
||||
if (newProducts.length === 0) {
|
||||
return prev;
|
||||
}
|
||||
|
||||
return [...prev, ...newProducts];
|
||||
});
|
||||
}
|
||||
}, [productsData, currentPage]);
|
||||
}, [productsData?.data, currentPage]);
|
||||
|
||||
const hasMore = useMemo(() => {
|
||||
return !!productsData?.pagination?.next_page_url;
|
||||
@@ -115,6 +133,7 @@ export default function CollectionPageClient({
|
||||
setCurrentPage((prev) => prev + 1);
|
||||
}, [hasMore, isFetching]);
|
||||
|
||||
// Client-side sorting
|
||||
const sortedProducts = useMemo(() => {
|
||||
const products = [...allProducts];
|
||||
if (priceSort === "lowToHigh") {
|
||||
@@ -146,7 +165,9 @@ export default function CollectionPageClient({
|
||||
const handleCategoryToggle = useCallback((categoryId: number) => {
|
||||
setSelectedCategories((prev) => {
|
||||
const newSet = new Set(prev);
|
||||
newSet.has(categoryId) ? newSet.delete(categoryId) : newSet.add(categoryId);
|
||||
newSet.has(categoryId)
|
||||
? newSet.delete(categoryId)
|
||||
: newSet.add(categoryId);
|
||||
return newSet;
|
||||
});
|
||||
setCurrentPage(1);
|
||||
@@ -191,9 +212,63 @@ export default function CollectionPageClient({
|
||||
[t]
|
||||
);
|
||||
|
||||
|
||||
if (!selectedCollection)
|
||||
// ERROR STATE
|
||||
if (collectionsError || productsError || filtersError) {
|
||||
return <ErrorPage />;
|
||||
}
|
||||
|
||||
// LOADING STATE
|
||||
if (collectionsLoading) {
|
||||
return (
|
||||
<div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
|
||||
{/* Title Skeleton */}
|
||||
<Skeleton className="h-16 w-full rounded-t-lg mb-0 bg-white" />
|
||||
|
||||
<div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg mt-0">
|
||||
{/* Desktop Filters Skeleton */}
|
||||
<div className="hidden sm:block w-[280px] shrink-0 border-r px-4 space-y-6">
|
||||
<Skeleton className="h-8 w-32" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-32" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-8 w-32" />
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
|
||||
{/* Products Grid Skeleton */}
|
||||
<div className="flex-1">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
|
||||
{Array.from({ length: 8 }).map((_, i) => (
|
||||
<div key={i} className="space-y-2">
|
||||
<Skeleton className="w-full aspect-square rounded-lg" />
|
||||
<Skeleton className="h-4 w-3/4" />
|
||||
<Skeleton className="h-6 w-1/2" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// COLLECTION NOT FOUND
|
||||
if (!selectedCollection) {
|
||||
return <div className="text-center py-8">{t("collection_not_found")}</div>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col mx-auto max-w-[1504px] px-2 md:px-4 lg:px-6 pb-12">
|
||||
@@ -201,23 +276,47 @@ export default function CollectionPageClient({
|
||||
{selectedCollection.name}
|
||||
</h2>
|
||||
|
||||
<div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg">
|
||||
<div className="flex p-2 md:p-4 gap-4 bg-white rounded-b-lg">
|
||||
{/* Desktop Filters Sidebar */}
|
||||
<div className="hidden sm:block w-[280px] shrink-0 border-r px-4">
|
||||
<ScrollArea className="h-auto">
|
||||
<CollectionFilters
|
||||
filtersData={filtersData}
|
||||
selectedBrands={selectedBrands}
|
||||
selectedCategories={selectedCategories}
|
||||
priceSort={priceSort}
|
||||
priceRange={priceRange}
|
||||
onBrandToggle={handleBrandToggle}
|
||||
onCategoryToggle={handleCategoryToggle}
|
||||
onPriceSortChange={handlePriceSortChange}
|
||||
onPriceChange={handlePriceChange}
|
||||
onReset={resetFilters}
|
||||
translations={filterTranslations}
|
||||
/>
|
||||
{filtersLoading ? (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
) : (
|
||||
<CollectionFilters
|
||||
filtersData={filtersData}
|
||||
selectedBrands={selectedBrands}
|
||||
selectedCategories={selectedCategories}
|
||||
priceSort={priceSort}
|
||||
priceRange={priceRange}
|
||||
onBrandToggle={handleBrandToggle}
|
||||
onCategoryToggle={handleCategoryToggle}
|
||||
onPriceSortChange={handlePriceSortChange}
|
||||
onPriceChange={handlePriceChange}
|
||||
onReset={resetFilters}
|
||||
translations={filterTranslations}
|
||||
/>
|
||||
)}
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
@@ -227,6 +326,7 @@ export default function CollectionPageClient({
|
||||
products={sortedProducts}
|
||||
hasMore={hasMore}
|
||||
onLoadMore={loadMoreData}
|
||||
isFetching={isFetching}
|
||||
translations={{
|
||||
loading: t("common.loading"),
|
||||
no_results: t("no_results"),
|
||||
@@ -242,20 +342,44 @@ export default function CollectionPageClient({
|
||||
filterLabel={t("filter")}
|
||||
closeLabel={t("close")}
|
||||
>
|
||||
<CollectionFilters
|
||||
filtersData={filtersData}
|
||||
selectedBrands={selectedBrands}
|
||||
selectedCategories={selectedCategories}
|
||||
priceSort={priceSort}
|
||||
priceRange={priceRange}
|
||||
onBrandToggle={handleBrandToggle}
|
||||
onCategoryToggle={handleCategoryToggle}
|
||||
onPriceSortChange={handlePriceSortChange}
|
||||
onPriceChange={handlePriceChange}
|
||||
onReset={resetFilters}
|
||||
translations={filterTranslations}
|
||||
/>
|
||||
{filtersLoading ? (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-6 w-24" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
<Skeleton className="h-5 w-full" />
|
||||
</div>
|
||||
<Skeleton className="h-32 w-full" />
|
||||
<Skeleton className="h-10 w-full rounded-lg" />
|
||||
</div>
|
||||
) : (
|
||||
<CollectionFilters
|
||||
filtersData={filtersData}
|
||||
selectedBrands={selectedBrands}
|
||||
selectedCategories={selectedCategories}
|
||||
priceSort={priceSort}
|
||||
priceRange={priceRange}
|
||||
onBrandToggle={handleBrandToggle}
|
||||
onCategoryToggle={handleCategoryToggle}
|
||||
onPriceSortChange={handlePriceSortChange}
|
||||
onPriceChange={handlePriceChange}
|
||||
onReset={resetFilters}
|
||||
translations={filterTranslations}
|
||||
/>
|
||||
)}
|
||||
</CollectionFiltersSheet>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user