diff options
Diffstat (limited to 'src/lib/home/components')
| -rw-r--r-- | src/lib/home/components/CategoryDynamic.jsx | 38 | ||||
| -rw-r--r-- | src/lib/home/components/CategoryDynamicMobile.jsx | 45 |
2 files changed, 43 insertions, 40 deletions
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 11a15d6d..ca104ada 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,6 +1,5 @@ import React, { useEffect, useState, useCallback } from 'react'; -import useCategoryManagement from '../hooks/useCategoryManagement'; -import {fetchPopulerProductSolr} from '../api/categoryManagementApi' +import {fetchCategoryManagementSolr} from '../api/categoryManagementApi' import NextImage from 'next/image'; import Link from "next/link"; import { createSlug } from '@/core/utils/slug'; @@ -14,28 +13,20 @@ import { Navigation, Pagination, Autoplay } from 'swiper'; const CategoryDynamic = () => { - const [manufactures, setManufactures] = useState([]) + const [categoryManagement, setCategoryManagement] = useState([]) + const [isLoading, setIsLoading] = useState(false) const loadBrand = useCallback(async () => { - // setIsLoading(true) - //Get brand from odoo - /*const result = await odooApi( - 'GET', - `/api/v1/manufacture?limit=0&offset=${manufactures.length}&name=${name}` - )*/ - - // Change get brands from solr - const items = await fetchPopulerProductSolr(); - - console.log("items",items) + setIsLoading(true) + const items = await fetchCategoryManagementSolr(); - // setIsLoading(false) - // setManufactures((manufactures) => [...result.data]) + setIsLoading(false) + setCategoryManagement(items) }, []) useEffect(() => { loadBrand() }, [loadBrand]) - const { categoryManagement } = useCategoryManagement(); + // const [categoryData, setCategoryData] = useState({}); // const [subCategoryData, setSubCategoryData] = useState({}); @@ -76,18 +67,17 @@ const CategoryDynamic = () => { return ( <div> - {categoryManagement && categoryManagement.data?.map((category) => { + {categoryManagement && categoryManagement?.map((category) => { // const countLevel1 = categoryData[category.categoryIdI] || 0; - return ( - <Skeleton key={category.id} isLoaded={categoryManagement}> + <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> {/* <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?.categoryIdI)} className="!text-red-500 font-semibold">Lihat Semua</Link> + <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold">Lihat Semua</Link> </div> {/* Swiper for SubCategories */} @@ -115,13 +105,13 @@ const CategoryDynamic = () => { {countLevel2} Produk tersedia </p> </Skeleton> */} - <Link href={createSlug('/shop/category/', subCategory?.name, subCategory?.idLevel2)} 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.childFrontendIdI.map((childCategory) => ( + {subCategory.child_frontend_id_i.map((childCategory) => ( <div key={childCategory.id} className=''> - <Link href={createSlug('/shop/category/', childCategory?.name, childCategory?.idLevel3)} className="flex flex-row gap-2 border rounded group hover:border-red-500"> + <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} diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index 2877a5a7..1061f3e4 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -1,22 +1,35 @@ -import React, { useEffect, useState } from 'react'; -import useCategoryManagement from '../hooks/useCategoryManagement'; +import React, { useEffect, useState, useCallback } from 'react'; import NextImage from 'next/image'; import Link from "next/link"; import { createSlug } from '@/core/utils/slug'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; +import {fetchCategoryManagementSolr} from '../api/categoryManagementApi' const CategoryDynamicMobile = () => { - const { categoryManagement } = useCategoryManagement() const [selectedCategory, setSelectedCategory] = useState({}); + const [categoryManagement, setCategoryManagement] = useState([]) + const [isLoading, setIsLoading] = useState(false) + + const loadBrand = useCallback(async () => { + setIsLoading(true) + const items = await fetchCategoryManagementSolr(); + + setIsLoading(false) + setCategoryManagement(items) + }, []) + + useEffect(() => { + loadBrand() + }, [loadBrand]) useEffect(() => { const loadPromo = async () => { try { - if (categoryManagement.data?.length > 0) { - const initialSelections = categoryManagement.data.reduce((acc, category) => { + if (categoryManagement?.length > 0) { + const initialSelections = categoryManagement.reduce((acc, category) => { if (category.categories.length > 0) { - acc[category.id] = category.categories[0].idLevel2; + acc[category.id] = category.categories[0].id_level_2; } return acc; }, {}); @@ -28,7 +41,7 @@ const CategoryDynamicMobile = () => { }; loadPromo(); - }, [categoryManagement.data]); + }, [categoryManagement]); const handleCategoryLevel2Click = (categoryIdI, idLevel2) => { setSelectedCategory(prev => ({ @@ -39,18 +52,18 @@ const CategoryDynamicMobile = () => { return ( <div className='p-4'> - {categoryManagement.data && categoryManagement.data.map((category) => ( + {categoryManagement && categoryManagement?.map((category) => ( <div key={category.id}> <div className='bagian-judul flex flex-row justify-between items-center gap-3 mb-4 mt-4'> - <div className='font-semibold sm:text-h-sm mr-2'>{category.name}</div> - <Link href={createSlug('/shop/category/', category?.name, category?.categoryIdI)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link> + <div className='font-semibold sm:text-h-sm mr-2'>{category?.name}</div> + <Link href={createSlug('/shop/category/', category?.name, category?.id)} className="!text-red-500 font-semibold text-sm">Lihat Semua</Link> </div> <Swiper slidesPerView={2.3} spaceBetween={10}> {category.categories.map((index) => ( <SwiperSlide key={index.id}> <div - onClick={() => handleCategoryLevel2Click(category.id, index?.idLevel2)} - className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.idLevel2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} + onClick={() => handleCategoryLevel2Click(category.id, index?.id_level_2)} + className={`border flex justify-start items-center max-w-48 max-h-16 rounded ${selectedCategory[category.id] === index?.id_level_2 ? 'bg-red-50 border-red-500 text-red-500' : 'border-gray-200 text-gray-900'}`} > <div className='p-1 flex justify-start items-center'> <div className='flex flex-row justify-center items-center'> @@ -62,7 +75,7 @@ const CategoryDynamicMobile = () => { className='' /> <div className='bagian-judul flex flex-col justify-center items-start gap-1 ml-2'> - <div className='font-semibold text-[10px] line-clamp-1'>{index.name}</div> + <div className='font-semibold text-[10px] line-clamp-1'>{index?.name}</div> </div> </div> </div> @@ -73,9 +86,9 @@ const CategoryDynamicMobile = () => { <div className='p-3 mt-2 border'> <div className='grid grid-cols-2 gap-2 overflow-y-auto max-h-[240px]'> {category.categories.map((index) => ( - selectedCategory[category.id] === index?.idLevel2 && index.childFrontendIdI.map((x) => ( + selectedCategory[category.id] === index?.id_level_2 && index?.child_frontend_id_i.map((x) => ( <div key={x.id}> - <Link href={createSlug('/shop/category/', x?.name, x?.idLevel3)} className="flex flex-row gap-1 border rounded group hover:border-red-500"> + <Link href={createSlug('/shop/category/', x?.name, x?.id_level_3)} className="flex flex-row gap-1 border rounded group hover:border-red-500"> <NextImage src={x.image ? x.image : "/images/noimage.jpeg"} alt={x.name} @@ -84,7 +97,7 @@ const CategoryDynamicMobile = () => { className='p-2' /> <div className='bagian-judul flex flex-col justify-center items-start gap-1 break-words line-clamp-2 group-hover:text-red-500'> - <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x.name}</div> + <div className='font-semibold line-clamp-2 group-hover:text-red-500 text-[10px]'>{x?.name}</div> </div> </Link> </div> |