From 06ac90c3919031f2785d56a9cb55ebda55c0cc79 Mon Sep 17 00:00:00 2001 From: "nabijonovdavronbek619@gmail.com" Date: Sun, 8 Mar 2026 12:39:16 +0500 Subject: [PATCH] get product request fixed from catalog_selection bug --- pages/products/product/mianProduct.tsx | 70 ++++++++++++++++---------- 1 file changed, 44 insertions(+), 26 deletions(-) diff --git a/pages/products/product/mianProduct.tsx b/pages/products/product/mianProduct.tsx index f5cdbbf..dcf830e 100644 --- a/pages/products/product/mianProduct.tsx +++ b/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 (
{[1, 2, 3].map((i) => ( @@ -99,9 +116,10 @@ export default function MainProduct() { return (
- {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
{results.map((item: any) => ( ); -} +} \ No newline at end of file