filter added
This commit is contained in:
nabijonovdavronbek619@gmail.com
@@ -6,7 +6,7 @@ import { endPoints } from "@/request/links";
|
||||
import { useCategory } from "@/store/useCategory";
|
||||
import { useSubCategory } from "@/store/useSubCategory";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Check } from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
export default function Filter() {
|
||||
@@ -14,11 +14,19 @@ export default function Filter() {
|
||||
const toggleFilter = useFilter((state) => state.toggleFilter);
|
||||
const hasData = useFilter((state) => state.hasFilter);
|
||||
const category = useCategory((state) => state.category);
|
||||
const setCategory = useCategory((state) => state.setCategory);
|
||||
const subCategory = useSubCategory((state) => state.subCategory);
|
||||
const setSubCategory = useSubCategory((state) => state.setSubCategory);
|
||||
const clearSubCategory = useSubCategory((state) => state.clearSubCategory);
|
||||
|
||||
const [dataExpanded, setDataExpanded] = useState<boolean>(false);
|
||||
const [numberExpanded, setNumberExpanded] = useState<boolean>(false);
|
||||
|
||||
// ⭐ YANGI: Dropdown state'lar - har bir kategoriya uchun
|
||||
const [openDropdowns, setOpenDropdowns] = useState<Record<number, boolean>>(
|
||||
{},
|
||||
);
|
||||
|
||||
const [catalogData, setCatalogData] = useState<
|
||||
{ id: number; name: string; type: string }[]
|
||||
>(result[0].items);
|
||||
@@ -26,11 +34,40 @@ export default function Filter() {
|
||||
{ id: number; name: string; type: string }[]
|
||||
>(result[1].items);
|
||||
|
||||
const { data: catalog } = useQuery({
|
||||
queryKey: ["catalog"],
|
||||
queryFn: () => httpClient(endPoints.filter.catalogCategoryId(category.id)),
|
||||
// Category data
|
||||
const { data: categoryBack } = useQuery({
|
||||
queryKey: ["category"],
|
||||
queryFn: () => httpClient(endPoints.category.all),
|
||||
select: (data) => {
|
||||
const catalogData = data?.data?.results;
|
||||
console.log("category data on filter: ", data?.data?.results);
|
||||
return data?.data?.results;
|
||||
},
|
||||
});
|
||||
|
||||
// ⭐ O'ZGARTIRILDI: subCategory so'rovi faqat dropdown ochilganda va have_sub_category true bo'lganda
|
||||
const { data: subCategoryBack, isLoading: subCategoryLoading } = useQuery({
|
||||
queryKey: ["subCategory", category.id],
|
||||
queryFn: () => httpClient(endPoints.subCategory.byId(category.id)),
|
||||
// ⭐ YANGI: Faqat category tanlangan va have_sub_category true bo'lsa ishlaydi
|
||||
enabled:
|
||||
!!category.id &&
|
||||
category.have_sub_category === true &&
|
||||
openDropdowns[category.id] === true,
|
||||
select: (data) => {
|
||||
console.log("subCategory filter data: ", data?.data?.results);
|
||||
return data?.data?.results;
|
||||
},
|
||||
});
|
||||
|
||||
// ⭐ O'ZGARTIRILDI: Catalog va Size query'lari category yoki subCategory ID'ga qarab ishlaydi
|
||||
const activeId = subCategory.id || category.id;
|
||||
|
||||
const { data: catalog } = useQuery({
|
||||
queryKey: ["catalog", activeId],
|
||||
queryFn: () => httpClient(endPoints.filter.catalogCategoryId(activeId)),
|
||||
enabled: !!activeId,
|
||||
select: (data) => {
|
||||
const catalogData = data?.data?.results || [];
|
||||
return catalogData.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
@@ -40,10 +77,11 @@ export default function Filter() {
|
||||
});
|
||||
|
||||
const { data: size } = useQuery({
|
||||
queryKey: ["size"],
|
||||
queryFn: () => httpClient(endPoints.filter.sizeCategoryId(category.id)),
|
||||
queryKey: ["size", activeId],
|
||||
queryFn: () => httpClient(endPoints.filter.sizeCategoryId(activeId)),
|
||||
enabled: !!activeId,
|
||||
select: (data) => {
|
||||
const sizedata = data?.data?.results;
|
||||
const sizedata = data?.data?.results || [];
|
||||
return sizedata.map((item: any) => ({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
@@ -67,20 +105,140 @@ export default function Filter() {
|
||||
? sizeData
|
||||
: sizeData.slice(0, 10);
|
||||
|
||||
// ⭐ O'ZGARTIRILDI: Category bosilganda dropdown toggle qilish
|
||||
const handleCategoryClick = (item: any) => {
|
||||
if (item.have_sub_category) {
|
||||
// Agar subCategory bo'lsa, dropdown ochish/yopish
|
||||
setOpenDropdowns((prev) => ({
|
||||
...prev,
|
||||
[item.id]: !prev[item.id],
|
||||
}));
|
||||
|
||||
// Category'ni set qilish (filterlar yangilanishi uchun)
|
||||
setCategory(item);
|
||||
|
||||
// SubCategory'ni tozalash (yangisini tanlash uchun)
|
||||
if (!openDropdowns[item.id]) {
|
||||
clearSubCategory();
|
||||
}
|
||||
} else {
|
||||
// Agar subCategory bo'lmasa, to'g'ridan-to'g'ri category ni set qilish
|
||||
setCategory(item);
|
||||
clearSubCategory();
|
||||
|
||||
// Barcha dropdown'larni yopish
|
||||
setOpenDropdowns({});
|
||||
}
|
||||
};
|
||||
|
||||
// ⭐ YANGI: SubCategory bosilganda
|
||||
const handleSubCategoryClick = (item: any) => {
|
||||
setSubCategory(item);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white">
|
||||
<div className="space-y-3 lg:max-w-70 lg:px-0 px-3 w-full text-white ">
|
||||
{/* ⭐ O'ZGARTIRILDI: Category filter with dropdown */}
|
||||
<div className="bg-gray-500 rounded-lg w-full">
|
||||
<p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
|
||||
Kategoriyalar
|
||||
</p>
|
||||
<div className="lg:space-y-2 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
|
||||
{categoryBack?.map((item: any) => (
|
||||
<div key={item.id} className="w-full">
|
||||
{/* Main Category */}
|
||||
<div
|
||||
onClick={() => handleCategoryClick(item)}
|
||||
className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
|
||||
>
|
||||
{/* Checkbox yoki Dropdown icon */}
|
||||
{!item.have_sub_category ? (
|
||||
<span
|
||||
className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
|
||||
category.id === item.id
|
||||
? "border-red-600 bg-red-600"
|
||||
: "border-gray-400 bg-transparent"
|
||||
}`}
|
||||
aria-label="Filter checkbox"
|
||||
>
|
||||
{category.id === item.id && (
|
||||
<Check className="h-3 w-3 text-white" strokeWidth={3} />
|
||||
)}
|
||||
</span>
|
||||
) : (
|
||||
<span
|
||||
className={`flex h-5 w-5 items-center justify-center rounded transition ${
|
||||
openDropdowns[item.id] ? "text-red-500" : "text-gray-400"
|
||||
}`}
|
||||
aria-label="Dropdown icon"
|
||||
>
|
||||
{openDropdowns[item.id] ? (
|
||||
<ChevronUp className="h-4 w-4" strokeWidth={2.5} />
|
||||
) : (
|
||||
<ChevronDown className="h-4 w-4" strokeWidth={2.5} />
|
||||
)}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<p className="whitespace-nowrap font-medium">{item.name}</p>
|
||||
</div>
|
||||
|
||||
{/* ⭐ YANGI: SubCategory Dropdown */}
|
||||
{item.have_sub_category && openDropdowns[item.id] && (
|
||||
<div className="ml-7 mt-2 space-y-2 border-l-2 border-gray-400 pl-3">
|
||||
{subCategoryLoading ? (
|
||||
<p className="text-sm text-gray-300">Yuklanmoqda...</p>
|
||||
) : subCategoryBack && subCategoryBack.length > 0 ? (
|
||||
subCategoryBack.map((subItem: any) => (
|
||||
<div
|
||||
key={subItem.id}
|
||||
onClick={() => handleSubCategoryClick(subItem)}
|
||||
className="hover:cursor-pointer flex items-center gap-2 hover:bg-gray-600 p-1.5 rounded transition-colors"
|
||||
>
|
||||
<span
|
||||
className={`flex h-4 w-4 items-center justify-center rounded border-2 transition ${
|
||||
subCategory.id === subItem.id
|
||||
? "border-red-600 bg-red-600"
|
||||
: "border-gray-400 bg-transparent"
|
||||
}`}
|
||||
aria-label="SubCategory checkbox"
|
||||
>
|
||||
{subCategory.id === subItem.id && (
|
||||
<Check
|
||||
className="h-2.5 w-2.5 text-white"
|
||||
strokeWidth={3}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<p className="text-sm whitespace-nowrap">
|
||||
{subItem.name}
|
||||
</p>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-gray-300">
|
||||
SubCategory topilmadi
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bo'lim filtri */}
|
||||
{visibleSectionData && (
|
||||
{visibleSectionData && visibleSectionData.length > 0 && (
|
||||
<div className="bg-gray-500 rounded-lg w-full">
|
||||
<p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
|
||||
Bo'lim
|
||||
</p>
|
||||
<div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
|
||||
{visibleSectionData.map((item) => (
|
||||
{visibleSectionData.map((item: any) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => toggleFilter(item)}
|
||||
className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
|
||||
className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
|
||||
>
|
||||
<span
|
||||
className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
|
||||
@@ -108,17 +266,17 @@ export default function Filter() {
|
||||
)}
|
||||
|
||||
{/* O'lcham filtri */}
|
||||
{visibleSectionNumber && (
|
||||
{visibleSectionNumber && visibleSectionNumber.length > 0 && (
|
||||
<div className="bg-gray-500 rounded-lg">
|
||||
<p className="bg-red-500 text-white p-2 font-semibold font-almarai text-lg rounded-t-lg">
|
||||
O'lcham
|
||||
</p>
|
||||
<div className="lg:space-y-3 space-x-6 lg:p-2 p-5 flex lg:flex-col overflow-x-auto lg:overflow-x-hidden items-start justify-start w-full">
|
||||
{visibleSectionNumber.map((item) => (
|
||||
{visibleSectionNumber.map((item: any) => (
|
||||
<div
|
||||
key={item.id}
|
||||
onClick={() => toggleFilter(item)}
|
||||
className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0"
|
||||
className="hover:cursor-pointer flex items-center gap-2 w-auto shrink-0 hover:bg-gray-600 lg:p-2 rounded transition-colors"
|
||||
>
|
||||
<span
|
||||
className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
|
||||
|
||||
@@ -16,6 +16,7 @@ export default function MainProduct() {
|
||||
const getFiltersByType = useFilter((state) => state.getFiltersByType);
|
||||
const setProduct = useProductPageInfo((state) => state.setProducts);
|
||||
|
||||
console.log("subCategory data: ", subCategory);
|
||||
// Query params yaratish
|
||||
const queryParams = useMemo(() => {
|
||||
const catalog = getFiltersByType("catalog");
|
||||
@@ -39,7 +40,7 @@ export default function MainProduct() {
|
||||
|
||||
// Query params qo'shish
|
||||
return `${baseLink}${queryParams}`;
|
||||
}, [category.id, category.have_sub_category, queryParams]);
|
||||
}, [category.id, category.have_sub_category, queryParams , subCategory.id]);
|
||||
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ["products", subCategory.id, queryParams],
|
||||
@@ -83,8 +84,8 @@ export default function MainProduct() {
|
||||
key={item.id} // ✅ index o'rniga id ishlatish
|
||||
getProduct={() => setProduct(item)}
|
||||
title={item.name}
|
||||
image={item?.images[0]?.image ||''}
|
||||
slug='special_product'
|
||||
image={item?.images[0]?.image || ""}
|
||||
slug="special_product"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import MainProduct from "./mianProduct";
|
||||
|
||||
export function Products() {
|
||||
return (
|
||||
<div className="bg-[#1e1d1c] py-10">
|
||||
<div className="bg-[#1e1d1c] pb-10 pt-5 px-2">
|
||||
<div className="max-w-300 mx-auto w-full z-20 relative">
|
||||
<div className="flex lg:flex-row flex-col lg:items-start items-center gap-5">
|
||||
{/* filter part */}
|
||||
|
||||
Reference in New Issue
Block a user