summaryrefslogtreecommitdiff
path: root/src/lib/home/components
diff options
context:
space:
mode:
authortrisusilo48 <tri.susilo@altama.co.id>2024-09-11 10:04:09 +0700
committertrisusilo48 <tri.susilo@altama.co.id>2024-09-11 10:04:09 +0700
commit768e5a550c07bdcfb7fda779163458e0c9762902 (patch)
treed44236911d0fea32fa582fb739ebac8ab325a064 /src/lib/home/components
parent1e8959ef719689bc8ddd2477fa12e960f4c9a759 (diff)
parent46faf7e7ba398a4137e93559b2efa5abf3df9663 (diff)
Merge branch 'release' into CR/search_enggine
Diffstat (limited to 'src/lib/home/components')
-rw-r--r--src/lib/home/components/CategoryDynamic.jsx38
-rw-r--r--src/lib/home/components/CategoryDynamicMobile.jsx45
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>