<Miqdad> popular product now ssr

1 files changed, 56 insertions, 54 deletions

diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
index 92b2a1b6..0740798d 100644
--- a/src/components/ui/PopularProduct.jsx
+++ b/src/components/ui/PopularProduct.jsx
@@ -1,61 +1,63 @@
-import { popularProductApi } from '@/api/productApi'
-import MobileView from '@/core/components/views/MobileView'
-import ProductSlider from '@/lib/product/components/ProductSlider'
-import { useQuery } from 'react-query'
-import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton'
-import DesktopView from '@/core/components/views/DesktopView'
-import ProductCard from '@/lib/product/components/ProductCard'
-import Link from '@/core/components/elements/Link/Link'
+import MobileView from '@/core/components/views/MobileView';
+import DesktopView from '@/core/components/views/DesktopView';
+import ProductSlider from '@/lib/product/components/ProductSlider';
+import ProductCard from '@/lib/product/components/ProductCard';
+import Link from '@/core/components/elements/Link/Link';
+import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton';
+import { useQuery } from 'react-query';
+import { popularProductApi } from '@/api/productApi';
 
-const PopularProduct = () => {
-  const popularProduct = useQuery('popularProduct', popularProductApi())
+export default function PopularProduct({ initialData }) {
+  const query = useQuery(
+    'popularProducts',
+    popularProductApi(),
+    {
+      initialData: initialData ? { products: initialData.products } : undefined,
+      refetchOnMount: false
+    }
+  );
 
-  if (popularProduct.isLoading) return <PopularProductSkeleton />
+  if (query.isLoading) return <PopularProductSkeleton />;
+
+  const data = query.data;
+
+  if (!data) return null;
 
   return (
-    popularProduct.data && (
-      <>
-        <MobileView>
-          <div className='px-4'>
-          <div className='font-semibold mb-4 flex justify-between items-center'><p>
-              Produk Ready Stock
-              </p> 
-              <Link
-                href='/shop/search?orderBy=stock'
-                className=''
-              >
-                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
-                </Link></div>
-            <ProductSlider products={popularProduct.data} simpleTitle />
+    <>
+      {/* Mobile */}
+      <MobileView>
+        <div className="px-4">
+          <div className="font-semibold mb-4 flex justify-between items-center">
+            <p>Produk Ready Stock</p>
+            <Link href="/shop/search?orderBy=stock">
+              <p className="text-danger-500 font-semibold">Lihat Semua</p>
+            </Link>
           </div>
-        </MobileView>
-
-        <DesktopView>
-          <div className='border border-gray_r-6 h-full overflow-auto'>
-          <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center'>
-             <p>
-              Produk Ready Stock
-              </p> 
-              <Link
-                href='/shop/search?orderBy=stock'
-                className=''
-              >
-                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
-                </Link>
-            </div>
-            <div className='h-full divide-y divide-gray_r-6'>
-              {popularProduct.data &&
-                popularProduct.data.products.map((product) => (
-                  <div className='py-2' key={product.id}>
-                    <ProductCard product={product} variant='horizontal' />
-                  </div>
-                ))}
-            </div>
+
+          <ProductSlider products={data.products} simpleTitle />
+        </div>
+      </MobileView>
+
+      {/* Desktop */}
+      <DesktopView>
+        <div className="border border-gray_r-6 h-full overflow-auto">
+          <div className="font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center">
+            <p>Produk Ready Stock</p>
+            <Link href="/shop/search?orderBy=stock">
+              <p className="text-danger-500 font-semibold">Lihat Semua</p>
+            </Link>
           </div>
-        </DesktopView>
-      </>
-    )
-  )
-}
 
-export default PopularProduct
+          <div className="h-full divide-y divide-gray_r-6">
+            {data.products.map((product) => (
+              <div className="py-2" key={product.id}>
+                <ProductCard product={product} variant="horizontal" />
+              </div>
+            ))}
+          </div>
+        </div>
+      </DesktopView>
+    </>
+  );
+}