Add popular product and ready stock product in home

1 files changed, 28 insertions, 8 deletions

diff --git a/src/pages/index.js b/src/pages/index.js
index 899626f5..dc8f5617 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,29 +5,41 @@ import { Pagination, Autoplay } from "swiper";
 import Header from "../components/Header";
 import { getOdoo } from "../helpers/apiOdoo";
 import "react-lazy-load-image-component/src/effects/blur.css";
-
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/autoplay";
+import ProductSlider from "../components/product/ProductSlider";
 
 export default function Home() {
-  const [heroBanners, setHeroBanners] = useState([]);
-  const [manufactures, setManufactures] = useState([]);
+  const [heroBanners, setHeroBanners] = useState(null);
+  const [manufactures, setManufactures] = useState(null);
+  const [readyStockProducts, setReadyStockProducts] = useState(null);
+  const [popularProducts, setPopularProducts] = useState(null);
 
   useEffect(() => {
-    setHeroBanners([]);
     const getHeroBanners = async () => {
       const dataHeroBanners = await getOdoo(`/api/v1/banner?type=index-a-1`);
       setHeroBanners(dataHeroBanners);
     }
     getHeroBanners();
 
-    setManufactures([]);
     const getManufactures = async () => {
       const dataManufactures = await getOdoo(`/api/v1/manufacture?level=prioritas`);
       setManufactures(dataManufactures);
     }
     getManufactures();
+    
+    const getReadyStockProducts = async () => {
+      const dataReadyStockProducts = await getOdoo(`/api/v1/product?ready_stock=1&limit=30`);
+      setReadyStockProducts(dataReadyStockProducts);
+    }
+    getReadyStockProducts();
+
+    const getPopularProducts = async () => {
+      const dataPopularProducts = await getOdoo(`/api/v1/product?manufactures=10&limit=30`);
+      setPopularProducts(dataPopularProducts);
+    }
+    getPopularProducts();
   }, []);
 
   return (
@@ -42,13 +54,13 @@ export default function Home() {
           ))
         }
       </Swiper>
-      <div className="mt-5 px-4">
-        <h2 className="text-gray-900 font-medium mb-3">Brand Pilihan</h2>
+      <div className="mt-6 px-4">
+        <h2 className="text-gray-900 font-semibold mb-3">Brand Pilihan</h2>
         <Swiper slidesPerView={4} freeMode={true} spaceBetween={16}>
           {
             manufactures?.manufactures?.map((manufacture, index) => (
               <SwiperSlide key={index}>
-                <div className="border border-gray-300 p-2 rounded h-full">
+                <div className="border border-gray-300 p-1 rounded h-full">
                   <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
                 </div>
               </SwiperSlide>
@@ -56,6 +68,14 @@ export default function Home() {
           }
         </Swiper>
       </div>
+      <div className="mt-6 px-4 mb-6">
+        <h2 className="text-gray-900 font-semibold mb-3">Produk Ready Stock</h2>
+        <ProductSlider products={readyStockProducts} />
+      </div>
+      <div className="mt-6 px-4 mb-6">
+        <h2 className="text-gray-900 font-semibold mb-3">Produk Populer</h2>
+        <ProductSlider products={popularProducts} />
+      </div>
     </>
   )
 }