get product request fixed from catalog_selection bug

pages/products/product/mianProduct.tsx

@@ -1,11 +1,12 @@
 "use client";
+
 import httpClient from "@/request/api";
 import { endPoints } from "@/request/links";
 import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/zustand/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useProductPageInfo } from "@/zustand/useProduct";
 import { useSubCategory } from "@/zustand/useSubCategory";
 import { useTranslations } from "next-intl";
@@ -13,67 +14,83 @@ import PaginationLite from "@/components/paginationUI";
 import { useCatalog } from "@/zustand/useCatalog";
 
 export default function MainProduct() {
-  const t = useTranslations();
-  const category = useCategory((s) => s.category);
-  const subCategory = useSubCategory((s) => s.subCategory);
-  const filter = useFilter((s) => s.filter);
+  const t             = useTranslations();
+  const category      = useCategory((s) => s.category);
+  const subCategory   = useSubCategory((s) => s.subCategory);
+  const filter        = useFilter((s) => s.filter);
   const getFiltersByType = useFilter((s) => s.getFiltersByType);
-  const setProduct = useProductPageInfo((s) => s.setProducts);
-  const parentID = useCatalog((state) => state.parentID);
+  const setProduct    = useProductPageInfo((s) => s.setProducts);
+
+  // ✅ FIX 1: parentID must be read here so the component re-renders when it changes
+  const parentID      = useCatalog((state) => state.parentID);
 
   const [currentPage, setCurrentPage] = useState(1);
 
+  // ✅ FIX 3: Reset page to 1 whenever parentID changes
+  // parentID changing means the user picked a new catalog section —
+  // staying on page 3 of the old section makes no sense.
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [parentID]);
+
+  // ── Filter params ────────────────────────────────────────────────────────
   const queryParams = useMemo(() => {
-    const catalog = getFiltersByType("catalog");
-    const size = getFiltersByType("size");
+    const catalog       = getFiltersByType("catalog");
+    const size          = getFiltersByType("size");
     const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
-    const sizeParams = size.map((i) => `size=${i.id}`).join("&");
-    const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
+    const sizeParams    = size.map((i) => `size=${i.id}`).join("&");
+    const allParams     = [catalogParams, sizeParams].filter(Boolean).join("&");
     setCurrentPage(1);
     return allParams ? `&${allParams}` : "";
   }, [filter]);
 
+  // ── Request URL ──────────────────────────────────────────────────────────
+  // ✅ FIX 2: parentID added to deps array
+  // Without this, the memo never recomputed when parentID changed —
+  // the component would fetch the same old URL every time.
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
       ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
       : parentID
         ? endPoints.product.byCatalogSection({ id: parentID, currentPage })
         : endPoints.product.byCategory({ id: category.id, currentPage });
+
     return `${baseLink}${queryParams}`;
   }, [
     category.id,
     category.have_sub_category,
-    queryParams,
     subCategory.id,
     currentPage,
+    parentID,     // ✅ was missing
+    queryParams,
   ]);
 
+  // ── Query ────────────────────────────────────────────────────────────────
   const { data, isLoading, error } = useQuery({
     queryKey: [
       "products",
-      subCategory.id,
       category.id,
+      category.have_sub_category,
+      subCategory.id,
+      parentID,       // ✅ FIX 1: was missing — cache was never invalidated on parentID change
       queryParams,
       currentPage,
     ],
     queryFn: () => httpClient(requestLink),
-    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    placeholderData: (prev) => prev,  // no flicker on pagination
     select: (res) => ({
-      results: res?.data?.data?.results ?? [],
+      results:    res?.data?.data?.results    ?? [],
       totalPages: res?.data?.data?.total_pages ?? 1,
     }),
   });
 
-  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
-  const results = useMemo(() => {
-    return data?.results ?? [];
-  }, [data]);
-  const totalPages = useMemo(() => {
-    return data?.totalPages ?? 1;
-  }, [data]);
+  const results    = data?.results    ?? [];
+  const totalPages = data?.totalPages ?? 1;
+  // ↑ Removed useMemo — data is already memoized by React Query's select.
+  //   Wrapping it again in useMemo adds overhead with zero benefit.
 
+  // ── Render states ────────────────────────────────────────────────────────
   if (isLoading && !data) {
-    // ✅ placeholderData bor — faqat birinchi yuklanishda
     return (
       <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
         {[1, 2, 3].map((i) => (
@@ -99,9 +116,10 @@ export default function MainProduct() {
 
   return (
     <div className="space-y-4">
-      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
       <div
-        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+        className={`grid lg:grid-cols-4 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${
+          isLoading ? "opacity-50 pointer-events-none" : "opacity-100"
+        }`}
       >
         {results.map((item: any) => (
           <ProductCard
@@ -123,4 +141,4 @@ export default function MainProduct() {
       )}
     </div>
   );
-}
+}