From 45162d053721911e74bdeac09d2d1f1eaff44f1b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 23 Sep 2024 16:44:13 +0700 Subject: update code, false code --- src/lib/home/api/categoryManagementApi.js | 78 +++++----- src/lib/home/components/CategoryDynamic.jsx | 135 +++++++++++------ src/lib/home/components/CategoryDynamicMobile.jsx | 174 +++++++++++++--------- 3 files changed, 234 insertions(+), 153 deletions(-) (limited to 'src/lib/home') diff --git a/src/lib/home/api/categoryManagementApi.js b/src/lib/home/api/categoryManagementApi.js index 0aeb2aac..2ff4fdfc 100644 --- a/src/lib/home/api/categoryManagementApi.js +++ b/src/lib/home/api/categoryManagementApi.js @@ -1,40 +1,44 @@ export const fetchCategoryManagementSolr = async () => { - let sort ='sort=sequence_i asc'; - try { - const response = await fetch(`/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20`); - 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 []; + let sort = 'sort=sequence_i asc'; + try { + const response = await fetch( + `/solr/category_management/query?q=*:*&q.op=OR&indent=true&${sort}&&rows=20` + ); + 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) => { + return promotions.map((promotion) => { + let parsedCategories = promotion.categories.map((category) => { + // Parse string JSON utama + let parsedCategory = JSON.parse(category); + + // Parse setiap elemen di child_frontend_id_i jika ada + if (parsedCategory.child_frontend_id_i) { + parsedCategory.child_frontend_id_i = + parsedCategory.child_frontend_id_i.map((child) => JSON.parse(child)); } + + return parsedCategory; + }); + let productMapped = { + id: promotion.id, + name: promotion.name_s, + image: promotion.image_s, + sequence: promotion.sequence_i, + numFound: promotion.numFound_i, + categories: parsedCategories, + category_id: promotion.category_id_i, }; - - const map = async (promotions) => { - return promotions.map((promotion) =>{ - let parsedCategories = promotion.categories.map(category => { - // Parse string JSON utama - let parsedCategory = JSON.parse(category); - - // Parse setiap elemen di child_frontend_id_i jika ada - if (parsedCategory.child_frontend_id_i) { - parsedCategory.child_frontend_id_i = parsedCategory.child_frontend_id_i.map(child => JSON.parse(child)); - } - - return parsedCategory; - }); - let productMapped = { - id: promotion.id, - name: promotion.name_s, - image: promotion.image_s, - sequence: promotion.sequence_i, - numFound: promotion.numFound_i, - categories: parsedCategories - }; - return productMapped; - }) - }; \ No newline at end of file + return productMapped; + }); +}; diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index ca104ada..da2faf3d 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -1,7 +1,7 @@ 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'; @@ -12,35 +12,34 @@ import 'swiper/css/pagination'; import { Navigation, Pagination, Autoplay } 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 +54,46 @@ 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 (
- {categoryManagement && categoryManagement?.map((category) => { + {categoryManagement && + categoryManagement?.map((category) => { + console.log('category', category); // const countLevel1 = categoryData[category.categoryIdI] || 0; return (
-
{category.name}
+
+ {category.name} +
{/*

{countLevel1} Produk tersedia

 */} - Lihat Semua + + Lihat Semua +
- + {/* Swiper for SubCategories */} - + {category.categories.map((subCategory) => { // const countLevel2 = subCategoryData[subCategory.idLevel2] || 0; @@ -92,39 +103,69 @@ const CategoryDynamic = () => {
-
{subCategory?.name}
+
+ {subCategory?.name} +
{/*

{countLevel2} Produk tersedia

*/} - Lihat Semua + + Lihat Semua +
- {subCategory.child_frontend_id_i.map((childCategory) => ( -
- - -
-
{childCategory.name}
-
- -
- ))} + {subCategory.child_frontend_id_i.map( + (childCategory) => ( +
+ + +
+
+ {childCategory.name} +
+
+ +
+ ) + )}
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index 1061f3e4..af151df2 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -1,38 +1,41 @@ import React, { useEffect, useState, useCallback } from 'react'; import NextImage from 'next/image'; -import Link from "next/link"; +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' +import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; const CategoryDynamicMobile = () => { const [selectedCategory, setSelectedCategory] = useState({}); - 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]); useEffect(() => { const loadPromo = async () => { try { if (categoryManagement?.length > 0) { - const initialSelections = categoryManagement.reduce((acc, category) => { - if (category.categories.length > 0) { - acc[category.id] = category.categories[0].id_level_2; - } - return acc; - }, {}); + const initialSelections = categoryManagement.reduce( + (acc, category) => { + if (category.categories.length > 0) { + acc[category.id] = category.categories[0].id_level_2; + } + return acc; + }, + {} + ); setSelectedCategory(initialSelections); } } catch (loadError) { @@ -44,69 +47,102 @@ const CategoryDynamicMobile = () => { }, [categoryManagement]); const handleCategoryLevel2Click = (categoryIdI, idLevel2) => { - setSelectedCategory(prev => ({ + setSelectedCategory((prev) => ({ ...prev, - [categoryIdI]: idLevel2 + [categoryIdI]: idLevel2, })); }; - + return (
- {categoryManagement && categoryManagement?.map((category) => ( -
-
-
{category?.name}
- Lihat Semua -
- - {category.categories.map((index) => ( - -
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'}`} - > -
-
- -
-
{index?.name}
-
-
-
-
- - ))} - -
-
+ {categoryManagement && + categoryManagement?.map((category) => ( +
+
+
+ {category?.name} +
+ + Lihat Semua + +
+ {category.categories.map((index) => ( - selectedCategory[category.id] === index?.id_level_2 && index?.child_frontend_id_i.map((x) => ( -
- - -
-
{x?.name}
+ +
+ 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' + }`} + > +
+
+ +
+
+ {index?.name} +
+
- +
- )) + ))} + +
+
+ {category.categories.map( + (index) => + selectedCategory[category.id] === index?.id_level_2 && + index?.child_frontend_id_i.map((x) => ( +
+ + +
+
+ {x?.name} +
+
+ +
+ )) + )} +
-
- ))} + ))}
); }; -- cgit v1.2.3 From 7d89c0280f1801db49b373a4691215833e6e7f92 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 23 Sep 2024 16:52:50 +0700 Subject: delete console log --- src/lib/home/components/CategoryDynamic.jsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src/lib/home') diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index da2faf3d..79092c9d 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -68,7 +68,6 @@ const CategoryDynamic = () => {
{categoryManagement && categoryManagement?.map((category) => { - console.log('category', category); // const countLevel1 = categoryData[category.categoryIdI] || 0; return ( -- cgit v1.2.3 From 36601aba6017aeef16f89351eb487238402ab52e Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 24 Sep 2024 16:12:50 +0700 Subject: update Perapihan Tag --- src/lib/home/components/BannerSection.jsx | 20 +- src/lib/home/components/CategoryDynamic.jsx | 15 +- src/lib/home/components/CategoryDynamicMobile.jsx | 14 +- src/lib/home/components/CategoryHomeId.jsx | 18 +- src/lib/home/components/CategoryPilihan.jsx | 265 +++++++++++++--------- src/lib/home/components/PromotionProgram.jsx | 118 +++++----- src/lib/home/components/ServiceList.jsx | 34 +-- 7 files changed, 273 insertions(+), 211 deletions(-) (limited to 'src/lib/home') diff --git a/src/lib/home/components/BannerSection.jsx b/src/lib/home/components/BannerSection.jsx index 2010503d..f83c36fc 100644 --- a/src/lib/home/components/BannerSection.jsx +++ b/src/lib/home/components/BannerSection.jsx @@ -1,12 +1,12 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; -const { useQuery } = require('react-query') -const { default: bannerSectionApi } = require('../api/bannerSectionApi') +const { useQuery } = require('react-query'); +const { default: bannerSectionApi } = require('../api/bannerSectionApi'); const BannerSection = () => { - const fetchBannerSection = async () => await bannerSectionApi() - const bannerSection = useQuery('bannerSection', fetchBannerSection) + const fetchBannerSection = async () => await bannerSectionApi(); + const bannerSection = useQuery('bannerSection', fetchBannerSection); return ( bannerSection.data && @@ -17,7 +17,7 @@ const BannerSection = () => { {banner.name} { ))}
) - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/CategoryDynamic.jsx b/src/lib/home/components/CategoryDynamic.jsx index 79092c9d..49a9a93f 100644 --- a/src/lib/home/components/CategoryDynamic.jsx +++ b/src/lib/home/components/CategoryDynamic.jsx @@ -3,13 +3,12 @@ import { fetchCategoryManagementSolr } from '../api/categoryManagementApi'; import NextImage from 'next/image'; 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([]); @@ -73,9 +72,9 @@ const CategoryDynamic = () => {
-
+

{category.name} -

+ {/*

{countLevel1} Produk tersedia

 */} @@ -113,9 +112,9 @@ const CategoryDynamic = () => { className='object-fit p-4' />
-
+

{subCategory?.name} -

+ {/*

{countLevel2} Produk tersedia @@ -157,9 +156,9 @@ const CategoryDynamic = () => { height={40} />

-
+

{childCategory.name} -

+
diff --git a/src/lib/home/components/CategoryDynamicMobile.jsx b/src/lib/home/components/CategoryDynamicMobile.jsx index af151df2..4a8f13cf 100644 --- a/src/lib/home/components/CategoryDynamicMobile.jsx +++ b/src/lib/home/components/CategoryDynamicMobile.jsx @@ -59,9 +59,9 @@ const CategoryDynamicMobile = () => { categoryManagement?.map((category) => (
-
- {category?.name} -
+

+ {category.name} +

{ className='' />
-
+

{index?.name} -

+
@@ -131,9 +131,9 @@ const CategoryDynamicMobile = () => { className='p-2' />
-
+

{x?.name} -

+
diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx index 71428e27..9f436dac 100644 --- a/src/lib/home/components/CategoryHomeId.jsx +++ b/src/lib/home/components/CategoryHomeId.jsx @@ -1,13 +1,15 @@ -import { LazyLoadComponent } from 'react-lazy-load-image-component' -import useCategoryHomeId from '../hooks/useCategoryHomeId' -import CategoryHome from './CategoryHome' +import { LazyLoadComponent } from 'react-lazy-load-image-component'; +import useCategoryHomeId from '../hooks/useCategoryHomeId'; +import CategoryHome from './CategoryHome'; const CategoryHomeId = () => { - const { categoryHomeIds } = useCategoryHomeId() + const { categoryHomeIds } = useCategoryHomeId(); return (
-
Kategori Pilihan
+

+ Kategori Pilihan +

{categoryHomeIds.data?.map((id) => ( @@ -16,7 +18,7 @@ const CategoryHomeId = () => { ))}
- ) -} + ); +}; -export default CategoryHomeId +export default CategoryHomeId; diff --git a/src/lib/home/components/CategoryPilihan.jsx b/src/lib/home/components/CategoryPilihan.jsx index 6dbf771e..2e5ca721 100644 --- a/src/lib/home/components/CategoryPilihan.jsx +++ b/src/lib/home/components/CategoryPilihan.jsx @@ -1,123 +1,168 @@ -import Image from 'next/image' -import useCategoryHome from '../hooks/useCategoryHome' -import Link from '@/core/components/elements/Link/Link' -import { createSlug } from '@/core/utils/slug' +import Image from 'next/image'; +import useCategoryHome from '../hooks/useCategoryHome'; +import Link from '@/core/components/elements/Link/Link'; +import { createSlug } from '@/core/utils/slug'; import { useEffect, useState } from 'react'; import { bannerApi } from '../../../api/bannerApi'; -const { useQuery } = require('react-query') +const { useQuery } = require('react-query'); import { HeroBannerSkeleton } from '../../../components/skeleton/BannerSkeleton'; import useCategoryPilihan from '../hooks/useCategoryPilihan'; -import useDevice from '@/core/hooks/useDevice' +import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; const CategoryPilihan = ({ id, categories }) => { - const { isDesktop, isMobile } = useDevice() - const { categoryPilihan } = useCategoryPilihan(); - const heroBanner = useQuery('categoryPilihan', bannerApi({ type: 'banner-category-list' })); - return ( - categoryPilihan.length > 0 && ( -
- {isDesktop && ( -
-
-
LOB Kategori Pilihan
-

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

-
- {heroBanner.data && - heroBanner.data?.length > 0 && ( -
- - {heroBanner.data[0].name} - -
- )} -
- {categoryPilihan?.data?.map((category) => ( -
-
-
-
- {category?.name} -
-

{category?.industries}

-
-
-
- - Lihat semua - -
-
- ))} + const { isDesktop, isMobile } = useDevice(); + const { categoryPilihan } = useCategoryPilihan(); + const heroBanner = useQuery( + 'categoryPilihan', + bannerApi({ type: 'banner-category-list' }) + ); + return ( + categoryPilihan.length > 0 && ( +
+ {isDesktop && ( +
+
+
+ LOB Kategori Pilihan +
+

+ 200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia! +

+
+ {heroBanner.data && heroBanner.data?.length > 0 && ( +
+ + {heroBanner.data[0].name} + +
+ )} +
+ {categoryPilihan?.data?.map((category) => ( +
+
+
+
+ {category?.name} +
+

+ {category?.industries} +

+
+
+ + Lihat semua + +
- )} - {isMobile && ( -
-
-
LOB Kategori Pilihan
- {/*

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

*/} + ))} +
+
+ )} + {isMobile && ( +
+
+
+ LOB Kategori Pilihan +
+ {/*

200 Rb+ Produk Unggulan & 800+ Brand Rekomendasi tersedia!

*/} +
+
+ {heroBanner.data && heroBanner.data?.length > 0 && ( +
+ + {heroBanner.data[0].name} + +
+ )} +
+ + {categoryPilihan?.data?.map((category) => ( + +
+
+
+
+ {category?.name} +
+

+ {category?.industries} +

+
-
- {heroBanner.data && - heroBanner.data?.length > 0 && ( -
- - {heroBanner.data[0].name} - -
- )} +
+ + Lihat semua +
- - {categoryPilihan?.data?.map((category) => ( - -
-
-
-
- {category?.name} -
-

{category?.industries}

-
-
-
- - Lihat semua - -
-
- - ))} - - - -
- )} -
- - ) - ) -} +
+ + ))} + +
+ )} +
+ ) + ); +}; -export default CategoryPilihan +export default CategoryPilihan; diff --git a/src/lib/home/components/PromotionProgram.jsx b/src/lib/home/components/PromotionProgram.jsx index ae8d5d6f..ae06bd4d 100644 --- a/src/lib/home/components/PromotionProgram.jsx +++ b/src/lib/home/components/PromotionProgram.jsx @@ -1,13 +1,16 @@ -import Link from '@/core/components/elements/Link/Link' -import Image from 'next/image' +import Link from '@/core/components/elements/Link/Link'; +import Image from 'next/image'; import { bannerApi } from '@/api/bannerApi'; -import useDevice from '@/core/hooks/useDevice' +import useDevice from '@/core/hooks/useDevice'; import { Swiper, SwiperSlide } from 'swiper/react'; -import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; -const { useQuery } = require('react-query') +import BannerPromoSkeleton from '../components/Skeleton/BannerPromoSkeleton'; +const { useQuery } = require('react-query'); const BannerSection = () => { - const promotionProgram = useQuery('promotionProgram', bannerApi({ type: 'banner-promotion' })); - const { isMobile, isDesktop } = useDevice() + const promotionProgram = useQuery( + 'promotionProgram', + bannerApi({ type: 'banner-promotion' }) + ); + const { isMobile, isDesktop } = useDevice(); if (promotionProgram.isLoading) { return ; @@ -16,60 +19,65 @@ const BannerSection = () => { return (
-

Promo Tersedia

+

+ {' '} + + Promo Tersedia + +

{isDesktop && ( - Lihat Semua - + Lihat Semua + )} {isMobile && ( - - Lihat Semua - - )} -
- {isDesktop && (promotionProgram.data && - promotionProgram.data?.length > 0 && ( -
- {promotionProgram.data?.map((banner) => ( - - {banner.name} + + Lihat Semua - ))} + )}
- - ))} + {isDesktop && + promotionProgram.data && + promotionProgram.data?.length > 0 && ( +
+ {promotionProgram.data?.map((banner) => ( + + {banner.name} + + ))} +
+ )} -{isMobile && ( - - - {promotionProgram.data?.map((banner) => ( - - - {banner.name} - - - ))} - - - )} + {isMobile && ( + + {promotionProgram.data?.map((banner) => ( + + + {banner.name} + + + ))} + + )}
- - ) -} + ); +}; -export default BannerSection +export default BannerSection; diff --git a/src/lib/home/components/ServiceList.jsx b/src/lib/home/components/ServiceList.jsx index b8799d7d..5b16915d 100644 --- a/src/lib/home/components/ServiceList.jsx +++ b/src/lib/home/components/ServiceList.jsx @@ -1,5 +1,5 @@ -import Image from 'next/image' -import Link from '@/core/components/elements/Link/Link' +import Image from 'next/image'; +import Link from '@/core/components/elements/Link/Link'; const ServiceList = () => { return ( @@ -14,14 +14,16 @@ const ServiceList = () => {
-

One Stop Solution

+

+ One Stop Solution +

Temukan Solusi Lengkap Anda dalam Satu Tempat.

@@ -37,14 +39,16 @@ const ServiceList = () => {
-

Garansi Resmi

+

+ Garansi Resmi +

Garansi Keaslian Barang dan Jaminan Purna Jual.

@@ -60,14 +64,16 @@ const ServiceList = () => {
-

Pembayaran Tempo

+

+ Pembayaran Tempo +

Lebih mudah mengatur pembelian dengan pembayaran tempo.

@@ -83,14 +89,16 @@ const ServiceList = () => {
-

Faktur Pajak

+

+ Faktur Pajak +

Dapat Faktur pajak untuk setiap transaksi dengan indoteknik.com

@@ -99,7 +107,7 @@ const ServiceList = () => {
- ) -} + ); +}; -export default ServiceList +export default ServiceList; -- cgit v1.2.3