1 files changed, 54 insertions, 56 deletions
diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
index 0740798d..d3ae9e27 100644
--- a/src/components/ui/PopularProduct.jsx
+++ b/src/components/ui/PopularProduct.jsx
@@ -1,63 +1,61 @@
-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';
+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'
 
-export default function PopularProduct({ initialData }) {
-  const query = useQuery(
-    'popularProducts',
-    popularProductApi(),
-    {
-      initialData: initialData ? { products: initialData.products } : undefined,
-      refetchOnMount: false
-    }
-  );
+const PopularProduct = () => {
+  const popularProduct = useQuery('popularProduct', popularProductApi())
 
-  if (query.isLoading) return <PopularProductSkeleton />;
-
-  const data = query.data;
-
-  if (!data) return null;
+  if (popularProduct.isLoading) return <PopularProductSkeleton />
 
   return (
-    <>
-      {/* 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>
+    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 />
           </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>
+        </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>
           </div>
-
-          <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>
-    </>
-  );
+        </DesktopView>
+      </>
+    )
+  )
 }
+
+export default PopularProduct