Merged in Feature/category-management (pull request #214)

Feature/category management

4 files changed, 122 insertions, 30 deletions

diff --git a/src/lib/category/api/popularProduct.js b/src/lib/category/api/popularProduct.js
new file mode 100644
index 00000000..e17e0ae5
--- /dev/null
+++ b/src/lib/category/api/popularProduct.js
@@ -0,0 +1,31 @@
+
+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 c147a3b3..ff958378 100644
--- a/src/lib/category/components/Category.jsx
+++ b/src/lib/category/components/Category.jsx
@@ -5,6 +5,7 @@ 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([])
@@ -30,6 +31,7 @@ const Category = () => {
     }
     loadCategories()
   }, [])
+  // console.log("categories",categories)
 
   return (
     <DesktopView>
@@ -38,8 +40,11 @@ const Category = () => {
           <div key={category.id} className='flex'>
             <Link
               href={createSlug('/shop/category/', category.name, category.id)}
-              className='category-mega-box__parent'
+              className='category-mega-box__parent flex items-center'
             >
+              <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'>
@@ -80,33 +85,7 @@ const Category = () => {
                 ))}
               </div>
               <div className='category-mega-box__child-wrapper !w-[260px] !flex !flex-col !gap-4'>
-                <div className='flex flex-col'>
-                  <div className='grid grid-cols-2 max-h-full w-full gap-2'>
-                    {category.childs.map((brand, index) => (
-                      (index < 8 ) && (
-                        <div key={brand.id} className='w-full flex items-center justify-center pb-2'>
-                          <Link
-                            href={createSlug('/shop/category/', brand.name, brand.id)}
-                            className='category-mega-box__child-one w-fit h-full flex items-center justify-center '
-                          >
-                            <Image src='https://erp.indoteknik.com/api/image/x_manufactures/x_logo_manufacture/661' alt='' width={104} height={44} objectFit='cover' />
-                          </Link>
-                        </div>
-                      )
-                    ))}
-                  </div>
-                  {category.childs.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>
+              <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>
diff --git a/src/lib/category/components/PopularBrand.jsx b/src/lib/category/components/PopularBrand.jsx
new file mode 100644
index 00000000..dca731e8
--- /dev/null
+++ b/src/lib/category/components/PopularBrand.jsx
@@ -0,0 +1,83 @@
+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;
diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx
index f2d1a16f..0cc43d91 100644
--- a/src/lib/home/components/CategoryDynamic.jsx
+++ b/src/lib/home/components/CategoryDynamic.jsx
@@ -33,9 +33,8 @@ const CategoryDynamic = () => {
     };
 
     fetchCategoryData();
-  }, [categoryManagement, categoryData]);
+  }, [categoryManagement.isLoading]);
  
-
   return (
     <div>
         {categoryManagement && categoryManagement.data?.map((category) => {