summaryrefslogtreecommitdiff
path: root/src/lib/home/components/CategoryDynamic.jsx
diff options
context:
space:
mode:
authortrisusilo48 <tri.susilo@altama.co.id>2024-09-26 11:33:58 +0700
committertrisusilo48 <tri.susilo@altama.co.id>2024-09-26 11:33:58 +0700
commit8fe167e2e03efcd3d7058c22f4efc6db961de71f (patch)
tree9734734660e6088cebd1738d8ac161834630937f /src/lib/home/components/CategoryDynamic.jsx
parentd4cb977d050a54b9daa1658b6de6e82878ca4c9b (diff)
parent1c56a76f979a6e433d70634b92b1887fb1f19509 (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.jsx137
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>