From e4b035a1471bd70872bb12012442367933fc8852 Mon Sep 17 00:00:00 2001
From: IT Fixcomart <it@fixcomart.co.id>
Date: Thu, 3 Nov 2022 17:30:14 +0700
Subject: Show banner and brand in home

---
 next.config.js                   |  3 ---
 src/helpers/apiOdoo.js           |  9 +------
 src/pages/_app.js                |  2 +-
 src/pages/index.js               | 51 +++++++++++++++++++++++++++++++++++++++-
 src/pages/shop/product/[slug].js |  6 +++--
 src/styles/globals.css           |  4 ++++
 6 files changed, 60 insertions(+), 15 deletions(-)

diff --git a/next.config.js b/next.config.js
index 37bb288a..00852504 100644
--- a/next.config.js
+++ b/next.config.js
@@ -13,9 +13,6 @@ const nextConfig = {
   },
   env: {
     DB_HOST: 'https://erp.indoteknik.com',
-    DB_NAME: 'erp_indoteknik',
-    DB_USER: 'it@fixcomart.co.id',
-    DB_PASS: 'Fixcomart378',
   },
 }
 
diff --git a/src/helpers/apiOdoo.js b/src/helpers/apiOdoo.js
index 632edf61..559c31c3 100644
--- a/src/helpers/apiOdoo.js
+++ b/src/helpers/apiOdoo.js
@@ -2,14 +2,7 @@ const axios = require('axios');
 
 const getOdoo = async (url) => {
   try {
-    let res = await axios(process.env.DB_HOST + url, {
-      headers: {
-        db: process.env.DB_NAME,
-        username: process.env.DB_USER,
-        password: process.env.DB_PASS,
-      }
-    });
-    
+    let res = await axios.get(process.env.DB_HOST + url);
     return res.data.result || [];
   } catch (error) {
     console.log(error);
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 7062d23c..7950628e 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -1,5 +1,5 @@
 import '../styles/globals.css';
-import NextProgress from 'next-progress';
+import NextProgress from "next-progress";
 
 function MyApp({ Component, pageProps }) {
   return (
diff --git a/src/pages/index.js b/src/pages/index.js
index b91c99e7..899626f5 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,12 +1,61 @@
 import { useEffect, useState } from "react";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import { Swiper, SwiperSlide } from "swiper/react";
+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";
 
 export default function Home() {
-  const [product, setProduct] = useState({});
+  const [heroBanners, setHeroBanners] = useState([]);
+  const [manufactures, setManufactures] = useState([]);
+
+  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();
+  }, []);
 
   return (
     <>
       <Header />
+      <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
+        {
+          heroBanners?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <LazyLoadImage effect="blur" src={banner.image} alt={banner.name} className="w-full h-auto" />
+            </SwiperSlide>
+          ))
+        }
+      </Swiper>
+      <div className="mt-5 px-4">
+        <h2 className="text-gray-900 font-medium 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">
+                  <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name} className="w-full h-full object-contain object-center" />
+                </div>
+              </SwiperSlide>
+            ))
+          }
+        </Swiper>
+      </div>
     </>
   )
 }
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index efc0be01..f50d5037 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -9,14 +9,16 @@ import currencyFormat from "../../../helpers/currencyFormat";
 import Head from "next/head";
 import { Swiper, SwiperSlide } from "swiper/react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
+import ImagePlaceholderIcon from "../../../icons/image-placeholder.svg";
 import "swiper/css";
 import "react-lazy-load-image-component/src/effects/blur.css";
-import ImagePlaceholderIcon from "../../../icons/image-placeholder.svg";
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
   let product = await getOdoo('/api/v1/product/' + getId(slug));
-  product = product[0];
+  if (product.length == 1) {
+    product = product[0];
+  }
   return {props: {product}};
 }
 
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 0570da9d..e88d14aa 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -221,4 +221,8 @@ html, body {
 
 .lazy-load-image-background {
     @apply !block;
+}
+
+.swiper-pagination-bullet-active {
+    @apply !bg-yellow-900;
 }
\ No newline at end of file
-- 
cgit v1.2.3