From c6b0402fb0ba7d56b1e060d36e98d934661d43d4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 24 Feb 2023 08:54:32 +0700
Subject: fix

---
 src/core/components/elements/Sidebar/Sidebar.jsx | 116 ++++++++++++++++++++++-
 1 file changed, 114 insertions(+), 2 deletions(-)

(limited to 'src/core/components/elements')

diff --git a/src/core/components/elements/Sidebar/Sidebar.jsx b/src/core/components/elements/Sidebar/Sidebar.jsx
index 22fda06b..c39b5e34 100644
--- a/src/core/components/elements/Sidebar/Sidebar.jsx
+++ b/src/core/components/elements/Sidebar/Sidebar.jsx
@@ -2,7 +2,9 @@ import Link from '../Link/Link'
 import greeting from '@/core/utils/greeting'
 import useAuth from '@/core/hooks/useAuth'
 import { AnimatePresence, motion } from 'framer-motion'
-import { CogIcon } from '@heroicons/react/24/outline'
+import { ChevronDownIcon, ChevronUpIcon, CogIcon } from '@heroicons/react/24/outline'
+import { Fragment, useEffect, useState } from 'react'
+import odooApi from '@/core/api/odooApi'
 
 const Sidebar = ({ active, close }) => {
   const auth = useAuth()
@@ -19,6 +21,47 @@ const Sidebar = ({ active, close }) => {
   const itemClassName = 'px-4 py-3 block !text-gray_r-12/80 font-normal'
   const transition = { ease: 'linear', duration: 0.2 }
 
+  const [isOpenCategory, setOpenCategory] = useState(false)
+  const [categories, setCategories] = useState([])
+
+  useEffect(() => {
+    const loadCategories = async () => {
+      if (isOpenCategory && categories.length == 0) {
+        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()
+  }, [isOpenCategory, categories])
+
+  const toggleCategories = (id = 0) => {
+    let newCategories = categories.map((category) => {
+      category.childs = category.childs.map((child1Category) => {
+        return {
+          ...child1Category,
+          isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen
+        }
+      })
+      return {
+        ...category,
+        isOpen: id == category.id ? !category.isOpen : category.isOpen
+      }
+    })
+    setCategories(newCategories)
+  }
+
   return (
     <>
       <AnimatePresence>
@@ -95,7 +138,76 @@ const Sidebar = ({ active, close }) => {
                 >
                   Pusat Bantuan
                 </SidebarLink>
-                <button className={`${itemClassName} w-full text-left`}>Kategori</button>
+                <button
+                  className={`${itemClassName} w-full text-left flex`}
+                  onClick={() => setOpenCategory(!isOpenCategory)}
+                >
+                  Kategori
+                  <div className='ml-auto'>
+                    {!isOpenCategory && <ChevronDownIcon className='text-gray_r-12 w-5' />}
+                    {isOpenCategory && <ChevronUpIcon className='text-gray_r-12 w-5' />}
+                  </div>
+                </button>
+                {isOpenCategory &&
+                  categories.map((category) => (
+                    <Fragment key={category.id}>
+                      <div className='flex w-full text-gray_r-11 border-b border-gray_r-6 px-4 pl-8 items-center'>
+                        <Link
+                          href={`/shop/search?category=${category.name}`}
+                          className='flex-1 font-normal !text-gray_r-11 py-4'
+                        >
+                          {category.name}
+                        </Link>
+                        <div
+                          className='ml-4 h-full py-4'
+                          onClick={() => toggleCategories(category.id)}
+                        >
+                          {!category.isOpen && <ChevronDownIcon className='text-gray_r-11 w-5' />}
+                          {category.isOpen && <ChevronUpIcon className='text-gray_r-11 w-5' />}
+                        </div>
+                      </div>
+                      {category.isOpen &&
+                        category.childs.map((child1Category) => (
+                          <Fragment key={child1Category.id}>
+                            <div
+                              className={`flex w-full !text-gray_r-11 border-b border-gray_r-6 p-4 pl-12 ${
+                                category.isOpen ? 'bg-gray_r-2' : ''
+                              }`}
+                            >
+                              <Link
+                                href={`/shop/search?category=${child1Category.name}`}
+                                className='flex-1 font-normal !text-gray_r-11'
+                              >
+                                {child1Category.name}
+                              </Link>
+                              {child1Category.childs.length > 0 && (
+                                <div
+                                  className='ml-4 h-full'
+                                  onClick={() => toggleCategories(child1Category.id)}
+                                >
+                                  {!child1Category.isOpen && (
+                                    <ChevronDownIcon className='text-gray_r-11 w-5' />
+                                  )}
+                                  {child1Category.isOpen && (
+                                    <ChevronUpIcon className='text-gray_r-11 w-5' />
+                                  )}
+                                </div>
+                              )}
+                            </div>
+                            {child1Category.isOpen &&
+                              child1Category.childs.map((child2Category) => (
+                                <Link
+                                  key={child2Category.id}
+                                  href={`/shop/search?category=${child2Category.name}`}
+                                  className='flex w-full font-normal !text-gray_r-11 border-b border-gray_r-6 p-4 pl-16'
+                                >
+                                  {child2Category.name}
+                                </Link>
+                              ))}
+                          </Fragment>
+                        ))}
+                    </Fragment>
+                  ))}
               </div>
             </motion.div>
           </>
-- 
cgit v1.2.3