pagination added to product page

components/pages/products/product/mianProduct.tsx

@@ -5,50 +5,71 @@ import { useQuery } from "@tanstack/react-query";
 import ProductCard from "./productCard";
 import { useCategory } from "@/store/useCategory";
 import { useFilter } from "@/lib/filter-zustand";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { useProductPageInfo } from "@/store/useProduct";
 import { useSubCategory } from "@/store/useSubCategory";
 import { useTranslations } from "next-intl";
+import PaginationLite from "@/components/paginationUI";
 
 export default function MainProduct() {
   const t = useTranslations();
-  const category = useCategory((state) => state.category);
-  const subCategory = useSubCategory((state) => state.subCategory);
-  const filter = useFilter((state) => state.filter);
-  const getFiltersByType = useFilter((state) => state.getFiltersByType);
-  const setProduct = useProductPageInfo((state) => state.setProducts);
-  // Query params yaratish
+  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 [currentPage, setCurrentPage] = useState(1);
+
   const queryParams = useMemo(() => {
     const catalog = getFiltersByType("catalog");
     const size = getFiltersByType("size");
-
-    // Har bir filter uchun query string yaratish
-    const catalogParams = catalog.map((item) => `catalog=${item.id}`).join("&");
-    const sizeParams = size.map((item) => `size=${item.id}`).join("&");
-
-    // Barcha paramslarni birlashtirish for gitea
+    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("&");
-
+    setCurrentPage(1);
     return allParams ? `&${allParams}` : "";
-  }, [filter, getFiltersByType]);
+  }, [filter]);
 
-  // Request link yaratish
   const requestLink = useMemo(() => {
     const baseLink = category.have_sub_category
-      ? endPoints.product.bySubCategory(subCategory.id)
-      : endPoints.product.byCategory(category.id || 0);
-
-    // Query params qo'shish
+      ? endPoints.product.bySubCategory({ id: subCategory.id, currentPage })
+      : endPoints.product.byCategory({ id: category.id, currentPage });
     return `${baseLink}${queryParams}`;
-  }, [category.id, category.have_sub_category, queryParams, subCategory.id]);
+  }, [
+    category.id,
+    category.have_sub_category,
+    queryParams,
+    subCategory.id,
+    currentPage,
+  ]);
 
   const { data, isLoading, error } = useQuery({
-    queryKey: ["products", subCategory.id, queryParams],
+    queryKey: [
+      "products",
+      subCategory.id,
+      category.id,
+      queryParams,
+      currentPage,
+    ],
     queryFn: () => httpClient(requestLink),
-    select: (data) => data?.data?.data?.results,
+    placeholderData: (prev) => prev, // ✅ pagination da flicker yo'q
+    select: (res) => ({
+      results: res?.data?.data?.results ?? [],
+      totalPages: res?.data?.data?.total_pages ?? 1,
+    }),
   });
 
-  if (isLoading) {
+  // ✅ To'g'ridan select dan olamiz — useEffect + let emas
+  const results = useMemo(() => {
+    return data?.results ?? [];
+  }, [data]);
+  const totalPages = useMemo(() => {
+    return data?.totalPages ?? 1;
+  }, [data]);
+
+  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) => (
@@ -59,10 +80,12 @@ export default function MainProduct() {
   }
 
   if (error) {
-    return <div className="text-center text-red-500 py-10">{t("loadingError")}</div>;
+    return (
+      <div className="text-center text-red-500 py-10">{t("loadingError")}</div>
+    );
   }
 
-  if (!data || data.length === 0) {
+  if (!results.length) {
     return (
       <div className="text-center text-gray-400 py-10">
         {t("productsNotFound")}
@@ -71,16 +94,29 @@ export default function MainProduct() {
   }
 
   return (
-    <div className="grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
-      {data.map((item: any) => (
-        <ProductCard
-          key={item.id} // ✅ index o'rniga id ishlatish
-          getProduct={() => setProduct(item)}
-          title={item.name}
-          image={item?.images[0]?.image || ""}
-          slug="special_product"
+    <div >
+      {/* ✅ isLoading da overlay — list o'rnini saqlab, ustidan opacity */}
+      <div
+        className={`grid lg:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5 transition-opacity ${isLoading ? "opacity-50 pointer-events-none" : "opacity-100"}`}
+      >
+        {results.map((item: any) => (
+          <ProductCard
+            key={item.id}
+            getProduct={() => setProduct(item)}
+            title={item.name}
+            image={item?.images?.[0]?.image || ""}
+            slug="special_product"
+          />
+        ))}
+      </div>
+
+      {totalPages > 1 && (
+        <PaginationLite
+          currentPage={currentPage}
+          totalPages={totalPages}
+          onChange={(p) => setCurrentPage(p)}
         />
-      ))}
+      )}
     </div>
   );
 }