get product request fixed from catalog_selection bug
This commit is contained in:
@@ -14,40 +14,33 @@ import PaginationLite from "@/components/paginationUI";
|
|||||||
import { useCatalog } from "@/zustand/useCatalog";
|
import { useCatalog } from "@/zustand/useCatalog";
|
||||||
|
|
||||||
export default function MainProduct() {
|
export default function MainProduct() {
|
||||||
const t = useTranslations();
|
const t = useTranslations();
|
||||||
const category = useCategory((s) => s.category);
|
const category = useCategory((s) => s.category);
|
||||||
const subCategory = useSubCategory((s) => s.subCategory);
|
const subCategory = useSubCategory((s) => s.subCategory);
|
||||||
const filter = useFilter((s) => s.filter);
|
const filter = useFilter((s) => s.filter);
|
||||||
const getFiltersByType = useFilter((s) => s.getFiltersByType);
|
const getFiltersByType = useFilter((s) => s.getFiltersByType);
|
||||||
const setProduct = useProductPageInfo((s) => s.setProducts);
|
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 parentID = useCatalog((state) => state.parentID);
|
|
||||||
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
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(() => {
|
useEffect(() => {
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
}, [parentID]);
|
}, [parentID]);
|
||||||
|
|
||||||
// ── Filter params ────────────────────────────────────────────────────────
|
// ── Filter params ────────────────────────────────────────────────────────
|
||||||
const queryParams = useMemo(() => {
|
const queryParams = useMemo(() => {
|
||||||
const catalog = getFiltersByType("catalog");
|
const catalog = getFiltersByType("catalog");
|
||||||
const size = getFiltersByType("size");
|
const size = getFiltersByType("size");
|
||||||
const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
|
const catalogParams = catalog.map((i) => `catalog=${i.id}`).join("&");
|
||||||
const sizeParams = size.map((i) => `size=${i.id}`).join("&");
|
const sizeParams = size.map((i) => `size=${i.id}`).join("&");
|
||||||
const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
|
const allParams = [catalogParams, sizeParams].filter(Boolean).join("&");
|
||||||
setCurrentPage(1);
|
setCurrentPage(1);
|
||||||
return allParams ? `&${allParams}` : "";
|
return allParams ? `&${allParams}` : "";
|
||||||
}, [filter]);
|
}, [filter]);
|
||||||
|
|
||||||
// ── Request URL ──────────────────────────────────────────────────────────
|
// ── 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 requestLink = useMemo(() => {
|
||||||
const baseLink = category.have_sub_category
|
const baseLink = category.have_sub_category
|
||||||
? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
|
? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
|
||||||
@@ -61,7 +54,7 @@ export default function MainProduct() {
|
|||||||
category.have_sub_category,
|
category.have_sub_category,
|
||||||
subCategory.id,
|
subCategory.id,
|
||||||
currentPage,
|
currentPage,
|
||||||
parentID, // ✅ was missing
|
parentID,
|
||||||
queryParams,
|
queryParams,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
@@ -72,22 +65,20 @@ export default function MainProduct() {
|
|||||||
category.id,
|
category.id,
|
||||||
category.have_sub_category,
|
category.have_sub_category,
|
||||||
subCategory.id,
|
subCategory.id,
|
||||||
parentID, // ✅ FIX 1: was missing — cache was never invalidated on parentID change
|
parentID,
|
||||||
queryParams,
|
queryParams,
|
||||||
currentPage,
|
currentPage,
|
||||||
],
|
],
|
||||||
queryFn: () => httpClient(requestLink),
|
queryFn: () => httpClient(requestLink),
|
||||||
placeholderData: (prev) => prev, // no flicker on pagination
|
placeholderData: (prev) => prev, // no flicker on pagination
|
||||||
select: (res) => ({
|
select: (res) => ({
|
||||||
results: res?.data?.data?.results ?? [],
|
results: res?.data?.data?.results ?? [],
|
||||||
totalPages: res?.data?.data?.total_pages ?? 1,
|
totalPages: res?.data?.data?.total_pages ?? 1,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
const results = data?.results ?? [];
|
const results = data?.results ?? [];
|
||||||
const totalPages = data?.totalPages ?? 1;
|
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 ────────────────────────────────────────────────────────
|
// ── Render states ────────────────────────────────────────────────────────
|
||||||
if (isLoading && !data) {
|
if (isLoading && !data) {
|
||||||
|
|||||||
Reference in New Issue
Block a user