From 3496025d97140268dc2e899adca994b5b9f343c0 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 31 Jan 2023 14:32:38 +0700 Subject: quotation and categories --- src/components/layouts/Header.js | 89 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 86 insertions(+), 3 deletions(-) (limited to 'src/components/layouts/Header.js') diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js index 4741905f..bc740810 100644 --- a/src/components/layouts/Header.js +++ b/src/components/layouts/Header.js @@ -1,5 +1,5 @@ import Image from "next/image"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import axios from "axios"; @@ -9,7 +9,9 @@ import { ShoppingCartIcon, ChevronRightIcon, Cog6ToothIcon, - HeartIcon + HeartIcon, + ChevronDownIcon, + ChevronUpIcon } from "@heroicons/react/24/outline"; // Helpers @@ -19,11 +21,11 @@ import Link from "../elements/Link"; // Images import Logo from "@/images/logo.png"; import greeting from "@/core/utils/greeting"; +import apiOdoo from "@/core/utils/apiOdoo"; const menus = [ { name: 'Semua Brand', href: '/shop/brands' }, { name: 'Blog Indoteknik', href: '/' }, - { name: 'Kategori', href: '/' }, ]; export default function Header({ title }) { @@ -71,6 +73,47 @@ export default function Header({ title }) { } } + const [ isOpenCategory, setOpenCategory ] = useState(false); + const [ categories, setCategories ] = useState([]); + + useEffect(() => { + const loadCategories = async () => { + if (isOpenCategory && categories.length == 0) { + let dataCategories = await apiOdoo('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 ( <> @@ -108,6 +151,46 @@ export default function Header({ title }) { )) } +
setOpenCategory(!isOpenCategory)}> + Kategori +
+ { !isOpenCategory && } + { isOpenCategory && } +
+
+ { isOpenCategory && categories.map((category) => ( + +
+ + { category.name } + +
toggleCategories(category.id)}> + { !category.isOpen && } + { category.isOpen && } +
+
+ { category.isOpen && category.childs.map((child1Category) => ( + +
+ + { child1Category.name } + + { child1Category.childs.length > 0 && ( +
toggleCategories(child1Category.id)}> + { !child1Category.isOpen && } + { child1Category.isOpen && } +
+ ) } +
+ { child1Category.isOpen && child1Category.childs.map((child2Category) => ( + + { child2Category.name } + + )) } + + )) } + + )) } -- cgit v1.2.3