get products by filter connected

lib/demoData.ts

@@ -124,3 +124,117 @@ export const lede = [
     image: "/images/products/lede/troynik_perexadnoy-removebg-preview.png",
   },
 ];
+
+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",
+];
+
+export const result = [
+  {
+    type: "section",
+    items: sectionData.map((name, index) => ({
+      id: index + 1,
+      name,
+      type: "catalog",
+    })),
+  },
+  {
+    type: "size",
+    items: sectionNumber.map((name, index) => ({
+      id: index + 1,
+      name,
+      type: "size",
+    })),
+  },
+];

lib/filter-zustand.ts

@@ -1,33 +1,68 @@
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { immer } from "zustand/middleware/immer";
 
-interface FilterZustandTypes {
-  filter: string[];
-  removeFilter: (data: string) => void;
-  toggleFilter: (data: string) => void;
-  resetFilter: () => void;
-  hasFilter: (data: string) => boolean;
+export interface FilterItem {
+  id: number;
+  name: string;
+  type: string;
 }
 
-export const useFilter = create<FilterZustandTypes>((set, get) => ({
-  filter: [],
+interface FilterZustandTypes {
+  filter: FilterItem[];
+  removeFilter: (id: number) => void;
+  toggleFilter: (item: FilterItem) => void;
+  resetFilter: () => void;
+  hasFilter: (name: string) => boolean;
+  getFiltersByType: (type: string) => FilterItem[]; // ✅ Qo'shimcha
+  removeFiltersByType: (type: string) => void; // ✅ Qo'shimcha
+}
 
-  removeFilter: (data) =>
-    set((state) => ({
-      filter: state.filter.filter((item) => item !== data),
+export const useFilter = create<FilterZustandTypes>()(
+  persist(
+    immer((set, get) => ({
+      filter: [],
+
+      removeFilter: (id) =>
+        set((state) => {
+          state.filter = state.filter.filter((item:FilterItem) => item.id !== id);
+        }),
+
+      toggleFilter: (item) =>
+        set((state) => {
+          const index = state.filter.findIndex((f:FilterItem) => f.name === item.name);
+          if (index !== -1) {
+            // Agar bor bo'lsa o'chirish
+            state.filter.splice(index, 1);
+          } else {
+            // Agar yo'q bo'lsa qo'shish
+            state.filter.push(item);
+          }
+        }),
+
+      resetFilter: () =>
+        set((state) => {
+          state.filter = [];
+        }),
+
+      hasFilter: (name) => {
+        return get().filter.some((item) => item.name === name);
+      },
+
+      // ✅ Type bo'yicha filterlarni olish
+      getFiltersByType: (type) => {
+        return get().filter.filter((item) => item.type === type);
+      },
+
+      // ✅ Type bo'yicha filterlarni o'chirish
+      removeFiltersByType: (type) =>
+        set((state) => {
+          state.filter = state.filter.filter((item:FilterItem) => item.type !== type);
+        }),
     })),
-
-  // Toggle: mavjud bo'lsa o'chirish, yo'q bo'lsa qo'shish
-  toggleFilter: (data) =>
-    set((state) => {
-      if (state.filter.includes(data)) {
-        return { filter: state.filter.filter((item) => item !== data) };
-      }
-      return { filter: [...state.filter, data] };
-    }),
-
-  resetFilter: () => set({ filter: [] }),
-
-  hasFilter: (data) => {
-    return get().filter.includes(data);
-  },
-}));
+    {
+      name: "filter-storage", // localStorage key nomi
+      partialize: (state) => ({ filter: state.filter }), // Faqat filter'ni saqlash
+    }
+  )
+);