diff options
Diffstat (limited to 'src/lib/category')
| -rw-r--r-- | src/lib/category/api/popularProduct.js | 31 | ||||
| -rw-r--r-- | src/lib/category/components/Category.jsx | 60 | ||||
| -rw-r--r-- | src/lib/category/components/PopularBrand.jsx | 83 |
3 files changed, 18 insertions, 156 deletions
diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js deleted file mode 100644 index e17e0ae5..00000000 --- a/src/lib/category/api/popularProduct.js +++ /dev/null @@ -1,31 +0,0 @@ - -export const fetchPromoItemsSolr = async (category_id_ids) => { - let sort ='sort=qty_sold_f desc'; - try { - const queryParams = new URLSearchParams({ q: category_id_ids }); - const response = await fetch(`/solr/product/select?${queryParams.toString()}&rows=2000&fl=manufacture_name_s,manufacture_id_i,id,display_name_s&${sort}`); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const data = await response.json(); - const promotions = await map(data.response.docs); - return promotions; - } catch (error) { - console.error("Error fetching promotion data:", error); - return []; - } - }; - - const map = async (promotions) => { - const result = []; - for (const promotion of promotions) { - const data = { - id: promotion.id, - name: promotion.display_name_s, - manufacture_name: promotion.manufacture_name_s, - manufacture_id: promotion.manufacture_id_i, - }; - result.push(data); - } - return result; - };
\ No newline at end of file diff --git a/src/lib/category/components/Category.jsx b/src/lib/category/components/Category.jsx index ff958378..e6ea5acf 100644 --- a/src/lib/category/components/Category.jsx +++ b/src/lib/category/components/Category.jsx @@ -2,15 +2,10 @@ import odooApi from '@/core/api/odooApi' import Link from '@/core/components/elements/Link/Link' import DesktopView from '@/core/components/views/DesktopView' import { createSlug } from '@/core/utils/slug' -import { ChevronRightIcon } from '@heroicons/react/24/outline' -import Image from 'next/image' import { useEffect, useState } from 'react' -import PopularBrand from './PopularBrand' const Category = () => { const [categories, setCategories] = useState([]) - const [openCategories, setOpenCategory] = useState([]); - useEffect(() => { const loadCategories = async () => { @@ -31,65 +26,46 @@ const Category = () => { } loadCategories() }, []) - // console.log("categories",categories) return ( <DesktopView> <div className='category-mega-box'> {categories?.map((category) => ( - <div key={category.id} className='flex'> + <div key={category.id}> <Link href={createSlug('/shop/category/', category.name, category.id)} - className='category-mega-box__parent flex items-center' + className='category-mega-box__parent' > - <div className='w-6 h-6 border mr-2 rounded-full flex justify-center items-center'> - <Image src={category.image} alt='' width={16} height={16} /> - </div> {category.name} </Link> <div className='category-mega-box__child-wrapper'> - <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full !w-[590px] overflow-auto'> + <div className='grid grid-cols-3 gap-x-4 gap-y-6 max-h-full overflow-auto'> {category.childs.map((child1Category) => ( - <div key={child1Category.id} className='w-full'> + <div key={child1Category.id}> <Link href={createSlug('/shop/category/', child1Category.name, child1Category.id)} - className='category-mega-box__child-one mb-4 w-full h-8 flex justify-center line-clamp-2' + className='category-mega-box__child-one mb-4' > {child1Category.name} </Link> - <div className='flex flex-col gap-y-3 w-full'> - {child1Category.childs.map((child2Category, index) => ( - (index < 4) && ( - <Link - href={createSlug('/shop/category/', child2Category.name, child2Category.id)} - className='category-mega-box__child-two truncate' - key={child2Category.id} - > - {child2Category.name} - </Link> - ) + <div className='flex flex-col gap-y-3'> + {child1Category.childs.map((child2Category) => ( + <Link + href={createSlug( + '/shop/category/', + child2Category.name, + child2Category.id + )} + className='category-mega-box__child-two' + key={child2Category.id} + > + {child2Category.name} + </Link> ))} - {child1Category.childs.length > 5 && ( - <div className='flex hover:bg-gray_r-8/35 rounded-10'> - <Link - href={createSlug('/shop/category/', child1Category.name, child1Category.id)} - className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' - > - <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua</p> - <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> - </Link> - </div> - )} </div> </div> ))} </div> - <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'> - <PopularBrand category={category} /> - <div className='flex w-60 h-20 object-cover'> - <Image src='https://erp.indoteknik.com/api/image/x_banner.banner/x_banner_image/397' alt='' width={275} height={4} /> - </div> - </div> </div> </div> ))} diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx deleted file mode 100644 index 09c0f8a1..00000000 --- a/src/lib/category/components/PopularBrand.jsx +++ /dev/null @@ -1,83 +0,0 @@ -import odooApi from '@/core/api/odooApi' -import React, { useEffect, useState } from 'react' -import axios from 'axios'; -import { useQuery } from 'react-query' -import Link from '@/core/components/elements/Link/Link' -import { createSlug } from '@/core/utils/slug' -import Image from 'next/image' -import { ChevronRightIcon } from '@heroicons/react/24/outline' -import useProductSearch from '../../../lib/product/hooks/useProductSearch'; -import { SolrResponse } from "~/types/solr"; -import { fetchPromoItemsSolr } from '../api/popularProduct' - -const SOLR_HOST = process.env.SOLR_HOST - -const PopularBrand = ({ category }) => { - const [topBrands, setTopBrands] = useState([]); - - const fetchTopBrands = async () => { - try { - const items = await fetchPromoItemsSolr(`category_id_ids:(${category?.categoryDataIds?.join(' OR ')})`); - // console.log("id",items) - // Fungsi untuk deduplikasi dan mengambil 12 nama brand teratas - const getTop12UniqueBrands = (prod) => { - const brandSet = new Set(); - const topBrands = []; - - for (const product of prod) { - if (!brandSet.has(product.manufacture_name)) { - brandSet.add(product.manufacture_name); - topBrands.push({ name: product.manufacture_name, id: product.manufacture_id }); - }else{ - } - if (topBrands.length === 18) break; - } - return topBrands; - } - - // Menggunakan hasil pencarian produk - const products = items; - const top12UniqueBrands = getTop12UniqueBrands(products); - - // console.log('top12UniqueBrands', top12UniqueBrands); - setTopBrands(top12UniqueBrands); - } catch (error) { - console.error("Error fetching data from Solr", error); - throw error; - } - } - - useEffect(() => { - fetchTopBrands(); - }, [category]); - - return ( - <div className='flex flex-col'> - <div className='grid grid-cols-3 max-h-full w-full gap-2'> - {topBrands.map((brand, index) => ( - <div key={index} className='w-full flex items-center justify-center pb-2'> - <Link - href={createSlug('/shop/brands/', brand.name, brand.id)} - className='category-mega-box__child-one w-8 h-full flex items-center justify-center ' - > - <Image src={`https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/${brand.id}` } alt={`${brand.name}`} width={104} height={44} objectFit='cover' /> - </Link> - </div> - ))} - </div> - {/* {topBrands.length > 8 && ( - <div className='flex hover:bg-gray_r-8/35 rounded-10'> - <Link - href={createSlug('/shop/category/', category.name, category.id)} - className='category-mega-box__child-one flex items-center gap-4 font-bold hover:ml-4' - > - <p className='mt-2 mb-0 text-danger-500 font-semibold'>Lihat Semua Brand</p> - <ChevronRightIcon className='w-4 text-danger-500 font-bold' /> - </Link> - </div> - )} */} - </div> - ) -} - -export default PopularBrand; |