get products by filter connected

2026-02-06 21:47:56 +05:00
parent d4a242b169
commit 873bbb82a9
8 changed files with 253 additions and 147 deletions
--- a/components/pages/products/filter/filter.tsx
+++ b/components/pages/products/filter/filter.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { result } from "@/lib/demoData";
 import { useFilter } from "@/lib/filter-zustand";
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
@@ -18,125 +19,43 @@ export default function Filter() {
  const [dataExpanded, setDataExpanded] = useState<boolean>(false);
  const [numberExpanded, setNumberExpanded] = useState<boolean>(false);

-  const sectionData = [
-    "SLT-Aqua",
-    "Вварное седло",
-    "Кран шаровый",
-    "Муфты",
-    "Муфты комбинированные",
-    "Муфты переходные",
-    "Тройник комбинированный",
-    "Тройники",
-    "Трубы SDR 6",
-    "Трубы SDR 7,4",
-    "Угол 45",
-    "Угол 90",
-    "Угольник комбинированный",
-    "Фланцы+бурты",
-  ];
-
-  const sectionNumber = [
-    "25",
-    '25х1/2"',
-    '25х3/4"',
-    "32",
-    "32x25x25",
-    "32x25x32",
-    '32х1"',
-    '32х1/2"',
-    "32х25",
-    '32х3/4"',
-    "40",
-    "40x25x40",
-    "40x32x40",
-    '40х1 1/4"',
-    '40х1 3/4"',
-    '40х1/2"',
-    "40х25",
-    "40х32",
-    "50",
-    "50x25x50",
-    "50x32x50",
-    "50x40x50",
-    '50х1 1/2"',
-    '50х1/2"',
-    "50х25",
-    "50х32",
-    "50х40",
-    "63",
-    "63x25x63",
-    "63x32x63",
-    "63x40x63",
-    "63x50x63",
-    '63х1/2"',
-    '63х2"',
-    "63х25",
-    "63х32",
-    "63х40",
-    "63х50",
-    "75",
-    "75x25x75",
-    "75x32x75",
-    "75x40x75",
-    "75x50x75",
-    "75x63x75",
-    '75х1/2"',
-    "75х32",
-    "75х40",
-    "75х50",
-    "75х63",
-    "90",
-    "90x40x90",
-    "90x50x90",
-    "90x63x90",
-    "90x75x90",
-    '90х1/2"',
-    "90х32",
-    "90х40",
-    "90х50",
-    "90х63",
-    "90х75",
-    "110",
-    "110x50x110",
-    "110x63x110",
-    "110x75x110",
-    "110x90x110",
-    '110х1/2"',
-    "110х25",
-    "110х32",
-    "110х40",
-    "110х50",
-    "110х63",
-    "110х75",
-    "110х90",
-    "125",
-    "160",
-  ];
-
-  const [catalogData, setCatalogData] = useState<string[]>(sectionData);
-  const [sizeData, setSizeData] = useState<string[]>(sectionNumber);
+  const [catalogData, setCatalogData] = useState<
+    { id: number; name: string; type: string }[]
+  >(result[0].items);
+  const [sizeData, setSizeData] = useState<
+    { id: number; name: string; type: string }[]
+  >(result[1].items);

  const { data: catalog } = useQuery({
    queryKey: ["catalog"],
-    queryFn: () => httpClient(endPoints.filter.catalogPageItems),
+    queryFn: () => httpClient(endPoints.filter.catalogCategoryId(category.id)),
    select: (data) => {
-      const catalog = data?.data?.results;
-      return catalog.map((item: any) => item.name) || [];
+      const catalogData = data?.data?.results;
+      return catalogData.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        type: "catalog",
+      }));
    },
  });

  const { data: size } = useQuery({
    queryKey: ["size"],
-    queryFn: () => httpClient(endPoints.filter.sizePageItems),
+    queryFn: () => httpClient(endPoints.filter.sizeCategoryId(category.id)),
    select: (data) => {
-      const size = data?.data?.results;
-      return size.map((item: any) => item.name) || [];
+      const sizedata = data?.data?.results;
+      return sizedata.map((item: any) => ({
+        id: item.id,
+        name: item.name,
+        type: "size",
+      }));
    },
  });

  useEffect(() => {
    catalog && setCatalogData(catalog);
    size && setSizeData(size);
+    console.log("catalog: ", catalog, "size: ", size);
  }, [size, catalog]);

  // Bo'lim uchun ko'rsatiladigan itemlar
@@ -150,9 +69,10 @@ export default function Filter() {
    : sizeData.slice(0, 10);

  console.log("have suncategory: ", category.have_sub_category);
-  if (category.have_sub_category || subCategory.id!==0) {
+  if (category.have_sub_category || subCategory.id !== 0) {
    return null;
  }
+  console.log("filter: ",filter);

  return (
    <div className="space-y-3 max-w-70 w-full text-white">
@@ -164,23 +84,23 @@ export default function Filter() {
        <div className="space-y-3 p-2">
          {visibleSectionData.map((item) => (
            <div
-              key={item}
+              key={item.id}
              onClick={() => toggleFilter(item)}
              className="hover:cursor-pointer flex items-center gap-2"
            >
              <span
                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                  hasData(item)
+                  hasData(item.name)
                    ? "border-red-600 bg-red-600"
                    : "border-gray-400 bg-transparent"
                }`}
                aria-label="Filter checkbox"
              >
-                {hasData(item) && (
+                {hasData(item.name) && (
                  <Check className="h-3 w-3 text-white" strokeWidth={3} />
                )}
              </span>
-              <p>{item}</p>
+              <p>{item.name}</p>
            </div>
          ))}
        </div>
@@ -200,23 +120,23 @@ export default function Filter() {
        <div className="grid grid-cols-2 gap-3 p-2">
          {visibleSectionNumber.map((item) => (
            <div
-              key={item}
+              key={item.id}
              onClick={() => toggleFilter(item)}
              className="hover:cursor-pointer flex items-center gap-2"
            >
              <span
                className={`flex h-5 w-5 items-center justify-center rounded border-2 transition ${
-                  hasData(item)
+                  hasData(item.name)
                    ? "border-red-600 bg-red-600"
                    : "border-gray-400 bg-transparent"
                }`}
                aria-label="Filter checkbox"
              >
-                {hasData(item) && (
+                {hasData(item.name) && (
                  <Check className="h-3 w-3 text-white" strokeWidth={3} />
                )}
              </span>
-              <p>{item}</p>
+              <p>{item.name}</p>
            </div>
          ))}
        </div>
--- a/components/pages/products/filter/filterInfo.tsx
+++ b/components/pages/products/filter/filterInfo.tsx
@@ -17,13 +17,13 @@ export default function FilterInfo() {
        {filtered &&
          filtered.map((item) => (
            <div
-              key={item}
+              key={item.id}
              className="flex items-center gap-1 p-1 rounded-lg bg-gray-700 text-white text-sm "
            >
              <button onClick={() => togleFilter(item)}>
                <X size={16} />
              </button>
-              {item}
+              {item.name}
            </div>
          ))}
      </div>
--- a/components/pages/products/product/mianProduct.tsx
+++ b/components/pages/products/product/mianProduct.tsx
@@ -4,16 +4,41 @@ import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
+import { useFilter } from "@/lib/filter-zustand";
+import { useMemo } from "react";

 export default function MainProduct() {
  const category = useCategory((state) => state.category);
+  const filter = useFilter((state) => state.filter);
+  const getFiltersByType = useFilter((state)=>state.getFiltersByType)

-  const requestLink = category.have_sub_category
-    ? endPoints.subCategory.byId(category.id)
-    : endPoints.product.byCategory(category.id || 0);
+  // Query params yaratish
+  const queryParams = useMemo(() => {
+    const catalog = getFiltersByType("catalog");
+    const size = getFiltersByType("size");
+
+    // Har bir filter uchun query string yaratish
+    const catalogParams = catalog.map((item) => `catalog=${item.id}`).join("&");
+    const sizeParams = size.map((item) => `size=${item.id}`).join("&");
+
+    // Barcha paramslarni birlashtirish
+    const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
+
+    return allParams ? `&${allParams}` : "";
+  }, [filter, getFiltersByType]);
+
+  // Request link yaratish
+  const requestLink = useMemo(() => {
+    const baseLink = category.have_sub_category
+      ? endPoints.subCategory.byId(category.id)
+      : endPoints.product.byCategory(category.id || 0);
+
+    // Query params qo'shish
+    return `${baseLink}${queryParams}`;
+  }, [category.id, category.have_sub_category, queryParams]);

  const { data, isLoading, error } = useQuery({
-    queryKey: ["products", category.id],
+    queryKey: ["products", category.id , queryParams],
    queryFn: () => httpClient(requestLink),
    select: (data) => data?.data?.data?.results,
  });