filter connected to backend

components/pages/products/filter.tsx

@@ -1,7 +1,10 @@
 "use client";
 import { useFilter } from "@/lib/filter-zustand";
+import httpClient from "@/request/api";
+import { endPoints } from "@/request/links";
+import { useQuery } from "@tanstack/react-query";
 import { Check } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 export default function Filter() {
   const filter = useFilter((state) => state.filter);
@@ -29,27 +32,118 @@ export default function Filter() {
   ];
 
   const sectionNumber = [
-    "25", '25х1/2"', '25х3/4"', "32", "32x25x25", "32x25x32",
+    "25",
-    '32х1"', '32х1/2"', "32х25", '32х3/4"', "40", "40x25x40",
+    '25х1/2"',
-    "40x32x40", '40х1 1/4"', '40х1 3/4"', '40х1/2"', "40х25",
+    '25х3/4"',
-    "40х32", "50", "50x25x50", "50x32x50", "50x40x50",
+    "32",
-    '50х1 1/2"', '50х1/2"', "50х25", "50х32", "50х40", "63",
+    "32x25x25",
-    "63x25x63", "63x32x63", "63x40x63", "63x50x63", '63х1/2"',
+    "32x25x32",
-    '63х2"', "63х25", "63х32", "63х40", "63х50", "75",
+    '32х1"',
-    "75x25x75", "75x32x75", "75x40x75", "75x50x75", "75x63x75",
+    '32х1/2"',
-    '75х1/2"', "75х32", "75х40", "75х50", "75х63", "90",
+    "32х25",
-    "90x40x90", "90x50x90", "90x63x90", "90x75x90", '90х1/2"',
+    '32х3/4"',
-    "90х32", "90х40", "90х50", "90х63", "90х75", "110",
+    "40",
-    "110x50x110", "110x63x110", "110x75x110", "110x90x110",
+    "40x25x40",
-    '110х1/2"', "110х25", "110х32", "110х40", "110х50",
+    "40x32x40",
-    "110х63", "110х75", "110х90", "125", "160",
+    '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 { data: catalog } = useQuery({
+    queryKey: ["catalog"],
+    queryFn: () => httpClient(endPoints.filter.catalogPageItems),
+    select: (data) => {
+      const catalog = data?.data?.results;
+      return catalog.map((item: any) => item.name) || [];
+    },
+  });
+
+  const { data: size } = useQuery({
+    queryKey: ["size"],
+    queryFn: () => httpClient(endPoints.filter.sizePageItems),
+    select: (data) => {
+      const size = data?.data?.results;
+      return size.map((item: any) => item.name) || [];
+    },
+  });
+
+  useEffect(() => {
+    catalog && setCatalogData(catalog);
+    size && setSizeData(size);
+  }, [size, catalog]);
+
   // Bo'lim uchun ko'rsatiladigan itemlar
-  const visibleSectionData = dataExpanded ? sectionData : sectionData.slice(0, 5);
+  const visibleSectionData = dataExpanded
+    ? catalogData
+    : catalogData.slice(0, 5);
 
   // O'lcham uchun ko'rsatiladigan itemlar
-  const visibleSectionNumber = numberExpanded ? sectionNumber : sectionNumber.slice(0, 10);
+  const visibleSectionNumber = numberExpanded
+    ? sizeData
+    : sizeData.slice(0, 10);
 
   return (
     <div className="space-y-3 max-w-70 w-full text-white">

request/links.ts

@@ -15,6 +15,12 @@ export const endPoints = {
   gallery: "gallery/",
   contact: "contact/",
   statistics: "statistics/",
+  filter: {
+    size: "size/",
+    sizePageItems: "size/?page_size=500",
+    catalog: "catalog/",
+    catalogPageItems: "catalog/?page_size=500",
+  },
   post: {
     sendNumber: "callBack/",
     productContact: "customer/",