From d26133d39e7d9cd510fdc72d239303f4ba918bdd Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 11 Mar 2023 13:37:29 +0700
Subject: create useDevice hooks, optimize DesktopView and MobileView, and show
 category API data

---
 src/lib/category/components/Category.jsx | 77 ++++++++++++++++++++++++--------
 src/lib/home/components/HeroBanner.jsx   | 67 ++++++++++++++-------------
 2 files changed, 92 insertions(+), 52 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx
index 21e2ec6f..5ba45cc7 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -1,28 +1,69 @@
+import odooApi from '@/core/api/odooApi'
 import Link from '@/core/components/elements/Link/Link'
 import DesktopView from '@/core/components/views/DesktopView'
+import { useEffect, useState } from 'react'
 
 const Category = () => {
+  const [categories, setCategories] = useState([])
+
+  useEffect(() => {
+    const loadCategories = async () => {
+      let dataCategories = await odooApi('GET', '/api/v1/category/tree')
+      dataCategories = dataCategories.map((category) => {
+        category.childs = category.childs.map((child1Category) => {
+          return {
+            ...child1Category,
+            isOpen: false
+          }
+        })
+        return {
+          ...category,
+          isOpen: false
+        }
+      })
+      setCategories(dataCategories)
+    }
+    loadCategories()
+  }, [])
+
   return (
     <DesktopView>
-      <div className='category-box'>
-        <div>
-          <Link href='/'>Alat Potong & Pelengkap Mesin</Link>
-          <div>
-            <div className='font-medium'>Alat Potong & Pelengkap Mesin</div>
-          </div>
-        </div>
-        <div>
-          <Link href='/'>Alat Ukur & Instrument</Link>
-          <div>
-            <div className='font-medium'>Alat Ukur & Instrument</div>
-          </div>
-        </div>
-        <div>
-          <Link href='/'>Komponen Mekanikal & Hardware</Link>
-          <div>
-            <div className='font-medium'>Komponen Mekanikal & Hardware</div>
+      <div className='category-mega-box'>
+        {categories.map((category) => (
+          <div key={category.id}>
+            <Link
+              href='/'
+              className='category-mega-box__parent'
+            >
+              {category.name}
+            </Link>
+            <div className='category-mega-box__child-wrapper'>
+              <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'>
+                {category.childs.map((child1Category) => (
+                  <div key={child1Category.id}>
+                    <Link
+                      href='/'
+                      className='category-mega-box__child-one mb-4'
+                    >
+                      {child1Category.name}
+                    </Link>
+                    <div className='flex flex-col gap-y-3'>
+                      {child1Category.childs.map((child2Category) => (
+                        <Link
+                          href='/'
+                          className='category-mega-box__child-two'
+                          key={child2Category.id}
+                        >
+                          {child2Category.name}
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
           </div>
-        </div>
+        ))}
       </div>
     </DesktopView>
   )
diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx
index e6690c01..95f590fc 100644
--- a/src/lib/home/components/HeroBanner.jsx
+++ b/src/lib/home/components/HeroBanner.jsx
@@ -1,7 +1,6 @@
 import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton'
 import useHeroBanner from '../hooks/useHeroBanner'
 import Image from '@/core/components/elements/Image/Image'
-import MobileView from '@/core/components/views/MobileView'
 
 // Swiper
 import { Swiper, SwiperSlide } from 'swiper/react'
@@ -9,44 +8,44 @@ import { Pagination, Autoplay } from 'swiper'
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/autoplay'
-
-const swiperBanner = {
-  pagination: { dynamicBullets: true },
-  autoplay: {
-    delay: 6000,
-    disableOnInteraction: false
-  },
-  modules: [Pagination, Autoplay]
-}
+import useDevice from '@/core/hooks/useDevice'
 
 const HeroBanner = () => {
+  const { isMobile } = useDevice()
   const { heroBanners } = useHeroBanner()
 
+  const swiperBanner = {
+    pagination: { dynamicBullets: isMobile ? true : false, clickable: true },
+    autoplay: {
+      delay: 6000,
+      disableOnInteraction: false
+    },
+    modules: [Pagination, Autoplay]
+  }
+
   return (
-    <MobileView>
-      <div className='min-h-[200px]'>
-        {heroBanners.isLoading && <ImageSkeleton />}
-        {!heroBanners.isLoading && (
-          <Swiper
-            slidesPerView={1}
-            pagination={swiperBanner.pagination}
-            modules={swiperBanner.modules}
-            autoplay={swiperBanner.autoplay}
-            className='border-b border-gray_r-6'
-          >
-            {heroBanners.data?.map((banner, index) => (
-              <SwiperSlide key={index}>
-                <Image
-                  src={banner.image}
-                  alt={banner.name}
-                  className='w-full h-auto'
-                />
-              </SwiperSlide>
-            ))}
-          </Swiper>
-        )}
-      </div>
-    </MobileView>
+    <div className='min-h-[200px]'>
+      {heroBanners.isLoading && <ImageSkeleton />}
+      {!heroBanners.isLoading && (
+        <Swiper
+          slidesPerView={1}
+          pagination={swiperBanner.pagination}
+          modules={swiperBanner.modules}
+          autoplay={swiperBanner.autoplay}
+          className='border border-gray_r-6'
+        >
+          {heroBanners.data?.map((banner, index) => (
+            <SwiperSlide key={index}>
+              <Image
+                src={banner.image}
+                alt={banner.name}
+                className='w-full h-auto'
+              />
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      )}
+    </div>
   )
 }
 
-- 
cgit v1.2.3