create useDevice hooks, optimize DesktopView and MobileView, and show category API data

1 files changed, 59 insertions, 18 deletions

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>
   )