diff options
| author | trisusilo48 <tri.susilo@altama.co.id> | 2024-09-26 11:33:58 +0700 |
|---|---|---|
| committer | trisusilo48 <tri.susilo@altama.co.id> | 2024-09-26 11:33:58 +0700 |
| commit | 8fe167e2e03efcd3d7058c22f4efc6db961de71f (patch) | |
| tree | 9734734660e6088cebd1738d8ac161834630937f /src/lib/home/components/CategoryDynamic.jsx | |
| parent | d4cb977d050a54b9daa1658b6de6e82878ca4c9b (diff) | |
| parent | 1c56a76f979a6e433d70634b92b1887fb1f19509 (diff) | |
Merge branch 'new-release' into CR/product_detail
# Conflicts:
# package.json
# src/utils/solrMapping.js
Diffstat (limited to 'src/lib/home/components/CategoryDynamic.jsx')
| -rw-r--r-- | src/lib/home/components/CategoryDynamic.jsx | 137 |
1 files changed, 88 insertions, 49 deletions
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index ca104ada..49a9a93f 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,46 +1,44 @@ import React, { useEffect, useState, useCallback } from 'react'; -import {fetchCategoryManagementSolr} from '../api/categoryManagementApi' +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; import NextImage from 'next/image'; -import Link from "next/link"; +import Link from 'next/link'; import { createSlug } from '@/core/utils/slug'; -import odooApi from '@/core/api/odooApi'; import { Skeleton } from '@chakra-ui/react'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import 'swiper/css/navigation'; import 'swiper/css/pagination'; -import { Navigation, Pagination, Autoplay } from 'swiper'; +import { Pagination } from 'swiper'; const CategoryDynamic = () => { - - const [categoryManagement, setCategoryManagement] = useState([]) - const [isLoading, setIsLoading] = useState(false) + const [categoryManagement, setCategoryManagement] = useState([]); + const [isLoading, setIsLoading] = useState(false); const loadBrand = useCallback(async () => { - setIsLoading(true) + setIsLoading(true); const items = await fetchCategoryManagementSolr(); - - setIsLoading(false) - setCategoryManagement(items) - }, []) + + setIsLoading(false); + setCategoryManagement(items); + }, []); useEffect(() => { - loadBrand() - }, [loadBrand]) - + loadBrand(); + }, [loadBrand]); + // const [categoryData, setCategoryData] = useState({}); // const [subCategoryData, setSubCategoryData] = useState({}); - + // useEffect(() => { // const fetchCategoryData = async () => { // if (categoryManagement && categoryManagement.data) { // const updatedCategoryData = {}; // const updatedSubCategoryData = {}; - + // for (const category of categoryManagement.data) { // const countLevel1 = await odooApi('GET', `/api/v1/category/numFound?parent_id=${category.categoryIdI}`); - + // updatedCategoryData[category.categoryIdI] = countLevel1?.numFound; - + // for (const subCategory of countLevel1?.children) { // updatedSubCategoryData[subCategory.id] = subCategory?.numFound; // } @@ -55,34 +53,45 @@ const CategoryDynamic = () => { // }, [categoryManagement.isLoading]); const swiperBanner = { - modules: [Pagination, ], - classNames:'mySwiper', + modules: [Pagination], + classNames: 'mySwiper', slidesPerView: 3, - spaceBetween:10, + spaceBetween: 10, pagination: { dynamicBullets: true, clickable: true, - } + }, }; - + return ( <div> - {categoryManagement && categoryManagement?.map((category) => { + {categoryManagement && + categoryManagement?.map((category) => { // const countLevel1 = categoryData[category.categoryIdI] || 0; return ( <Skeleton key={category.id} isLoaded={!isLoading}> <div key={category.id}> <div className='bagian-judul flex flex-row justify-start items-center gap-3 mb-4 mt-4'> - <div className='font-semibold sm:text-h-lg mr-2'>{category.name}</div> + <h1 className='font-semibold text-[14px] sm:text-h-lg mr-2'> + {category.name} + </h1> {/* <Skeleton isLoaded={countLevel1 != 0}> <p className={`text-gray_r-10 text-sm`}>{countLevel1} Produk tersedia</p> </Skeleton> */} - <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link> + <Link + href={createSlug( + '/shop/category/', + category?.name, + category?.category_id + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> </div> - + {/* Swiper for SubCategories */} - <Swiper {...swiperBanner} - > + <Swiper {...swiperBanner}> {category.categories.map((subCategory) => { // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; @@ -92,39 +101,69 @@ const CategoryDynamic = () => { <div className='p-3'> <div className='flex flex-row border rounded mb-2 justify-start items-center'> <NextImage - src={subCategory.image ? subCategory.image : "/images/noimage.jpeg"} + src={ + subCategory.image + ? subCategory.image + : '/images/noimage.jpeg' + } alt={subCategory.name} width={90} height={30} className='object-fit p-4' /> <div className='bagian-judul flex flex-col justify-center items-start gap-2 ml-2'> - <div className='font-semibold text-lg mr-2'>{subCategory?.name}</div> + <h2 className='font-semibold text-lg mr-2'> + {subCategory?.name} + </h2> {/* <Skeleton isLoaded={countLevel2 != 0}> <p className={`text-gray_r-10 text-sm`}> {countLevel2} Produk tersedia </p> </Skeleton> */} - <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.id_level_2)} className="!text-red-500 font-semibold">Lihat Semua</Link> + <Link + href={createSlug( + '/shop/category/', + subCategory?.name, + subCategory?.id_level_2 + )} + className='!text-red-500 font-semibold' + > + Lihat Semua + </Link> </div> </div> <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px] min-h-[240px] content-start'> - {subCategory.child_frontend_id_i.map((childCategory) => ( - <div key={childCategory.id} className=''> - <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.id_level_3)} className="flex flex-row gap-2 border rounded group hover:border-red-500"> - <NextImage - src={childCategory.image ? childCategory.image : "/images/noimage.jpeg"} - alt={childCategory.name} - className='p-2 ml-1' - width={40} - height={40} - /> - <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'> - <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'>{childCategory.name}</div> - </div> - </Link> - </div> - ))} + {subCategory.child_frontend_id_i.map( + (childCategory) => ( + <div key={childCategory.id} className=''> + <Link + href={createSlug( + '/shop/category/', + childCategory?.name, + childCategory?.id_level_3 + )} + className='flex flex-row gap-2 border rounded group hover:border-red-500' + > + <NextImage + src={ + childCategory.image + ? childCategory.image + : '/images/noimage.jpeg' + } + alt={childCategory.name} + className='p-2 ml-1' + width={40} + height={40} + /> + <div className='bagian-judul flex flex-col justify-center items-center gap-2 break-words line-clamp-2 group-hover:text-red-500'> + <h3 className='font-semibold line-clamp-2 group-hover:text-red-500 text-sm mr-2'> + {childCategory.name} + </h3> + </div> + </Link> + </div> + ) + )} </div> </div> </div> |
