diff options
| -rw-r--r-- | src/lib/promo/api/productSearchApi.js | 1 | ||||
| -rw-r--r-- | src/pages/api/shop/promo.js | 15 | ||||
| -rw-r--r-- | src/pages/shop/promo/[slug].jsx | 272 | ||||
| -rw-r--r-- | src/utils/solrMapping.js | 2 |
4 files changed, 47 insertions, 243 deletions
diff --git a/src/lib/promo/api/productSearchApi.js b/src/lib/promo/api/productSearchApi.js index 582b4486..2f792fd4 100644 --- a/src/lib/promo/api/productSearchApi.js +++ b/src/lib/promo/api/productSearchApi.js @@ -5,7 +5,6 @@ const productSearchApi = async ({ query, operation = 'AND' }) => { const dataProductSearch = await axios( `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/promo?${query}&operation=${operation}` ) - console.log("dataProductSearch.data",dataProductSearch.data) return dataProductSearch.data } diff --git a/src/pages/api/shop/promo.js b/src/pages/api/shop/promo.js index 57635958..221a9adb 100644 --- a/src/pages/api/shop/promo.js +++ b/src/pages/api/shop/promo.js @@ -3,7 +3,6 @@ import axios from 'axios'; import camelcaseObjectDeep from 'camelcase-object-deep'; export default async function handler(req, res) { - console.log("req_iman",req) const { q = '*', page = 1, @@ -11,7 +10,7 @@ export default async function handler(req, res) { category = '', priceFrom = 0, priceTo = 0, - orderBy = '', + orderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,', operation = 'AND', fq = '', limit = 30, @@ -19,7 +18,7 @@ export default async function handler(req, res) { let { stock = '' } = req.query; - let paramOrderBy = ''; + let paramOrderBy = 'if(exists(sequence_i),0,1) asc, sequence_i asc,'; switch (orderBy) { case 'price-asc': paramOrderBy += 'price_tier1_v2_f ASC'; @@ -60,7 +59,7 @@ export default async function handler(req, res) { `start=${parseInt(offset)}`, `rows=${limit}`, `sort=${paramOrderBy}`, - // `fq=-publish_b:false, product_rating_f:[8 TO *], price_tier1_v2_f:[1 TO *]`, + `fq=product_ids:[* TO *]`, ]; if (priceFrom > 0 || priceTo > 0) { @@ -83,7 +82,7 @@ export default async function handler(req, res) { .split(',') .map( (manufacturer) => - `manufacture_name:"${encodeURIComponent(manufacturer)}"` + `manufacture_name_s:"${encodeURIComponent(manufacturer)}"` ) .join(' OR ')}` ); @@ -102,19 +101,14 @@ export default async function handler(req, res) { // Multi fq in url params if (Array.isArray(fq)) parameter = parameter.concat(fq.map((val) => `fq=${val}`)); - - console.log("parameter",parameter) let result = await axios( process.env.SOLR_HOST + '/solr/promotion_program_lines/select?' + parameter.join('&') ); - console.log("result",result.data) try { - console.log("result.data.response.docs",result.data.response.docs) result.data.response.products = promoMappingSolr( result.data.response.docs ); - console.log("result.data.response.products",result.data.response.products) result.data.responseHeader.params.start = parseInt( result.data.responseHeader.params.start @@ -123,7 +117,6 @@ export default async function handler(req, res) { result.data.responseHeader.params.rows ); delete result.data.response.docs; - console.log("result.data",result.data) // result.data = camelcaseObjectDeep(result.data); result.data = result.data; res.status(200).json(result.data); diff --git a/src/pages/shop/promo/[slug].jsx b/src/pages/shop/promo/[slug].jsx index 169ea0b5..cfb2c841 100644 --- a/src/pages/shop/promo/[slug].jsx +++ b/src/pages/shop/promo/[slug].jsx @@ -4,12 +4,9 @@ import { useEffect, useState } from 'react' import { useRouter } from 'next/router' import Seo from '../../../core/components/Seo.jsx' import Promocrumb from '../../../lib/promo/components/Promocrumb.jsx' -import { fetchPromoItemsSolr, fetchVariantSolr } from '../../../api/promoApi.js' import LogoSpinner from '../../../core/components/elements/Spinner/LogoSpinner.jsx' import ProductPromoCard from '../../../../src-migrate/modules/product-promo/components/Card.tsx' -import { IPromotion } from '../../../../src-migrate/types/promotion.ts' import React from 'react' -import { SolrResponse } from "../../../../src-migrate/types/solr.ts"; import DesktopView from '../../../core/components/views/DesktopView.jsx'; import MobileView from '../../../core/components/views/MobileView.jsx'; import 'swiper/swiper-bundle.css'; @@ -19,9 +16,7 @@ import ProductFilter from '../../../lib/product/components/ProductFilter.jsx'; import { HStack, Image, Tag, TagCloseButton, TagLabel } from '@chakra-ui/react'; import { formatCurrency } from '../../../core/utils/formatValue.js'; import Pagination from '../../../core/components/elements/Pagination/Pagination.js'; -import SideBanner from '../../../../src-migrate/modules/side-banner/index.tsx'; import whatsappUrl from '../../../core/utils/whatsappUrl.js'; -import { cons, toQuery } from 'lodash-contrib'; import _ from 'lodash'; import useActive from '../../../core/hooks/useActive.js'; import useProductSearch from '../../../lib/promo/hooks/usePromotionSearch.js'; @@ -30,39 +25,54 @@ const BasicLayout = dynamic(() => import('../../../core/components/layouts/Basic export default function PromoDetail() { const router = useRouter() - const { slug = '', brand ='', category='', priceFrom = '', priceTo = '', page = '1' } = router.query - const [promoItems, setPromoItems] = useState([]) - const [promoData, setPromoData] = useState(null) + const { slug = '', brand ='', category='', page = '1' } = router.query const [currentPage, setCurrentPage] = useState(parseInt(10) || 1); - const itemsPerPage = 12; // Jumlah item yang ingin ditampilkan per halaman - const [loading, setLoading] = useState(true); - const { isMobile, isDesktop } = useDevice() - // const [brands, setBrands] = useState([]); - // const [categories, setCategories] = useState([]); - const [brandValues, setBrandValues] = useState([]); - const [categoryValues, setCategoryValues] = useState([]); const [orderBy, setOrderBy] = useState(router.query?.orderBy); const popup = useActive(); const prefixUrl = `/shop/promo/${slug}` const [queryFinal, setQueryFinal] = useState({}); - const [limit, setLimit] = useState(22); + const [limit, setLimit] = useState(30); const [q, setQ] = useState('*'); - const [finalQuery, setFinalQuery] = useState({fq: `type_value_s:${slug}`}); + const [finalQuery, setFinalQuery] = useState({}); const [products, setProducts] = useState(null); + const [brandValues, setBrand] = useState( + !router.pathname.includes('brands') + ? router.query.brand + ? router.query.brand.split(',') + : [] + : [] + ); + + const [categoryValues, setCategory] = useState( + router.query?.category?.split(',') || router.query?.category?.split(',') + ); + + const [priceFrom, setPriceFrom] = useState(router.query?.priceFrom || null); + const [priceTo, setPriceTo] = useState(router.query?.priceTo || null); + + useEffect(() => { - setQueryFinal({ ...finalQuery, q, limit, orderBy }); + const newQuery = { + fq: `type_value_s:${slug}`, + page : router.query.page? router.query.page : 1, + brand : router.query.brand? router.query.brand : '', + category : router.query.category? router.query.category : '', + priceFrom : router.query.priceFrom? router.query.priceFrom : '', + priceTo : router.query.priceTo? router.query.priceTo : '', + limit : router.query.limit? router.query.limit : '', + orderBy : router.query.orderBy? router.query.orderBy : '' + }; + setFinalQuery(newQuery); }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage]); useEffect(() => { setQueryFinal({ ...finalQuery, q, limit, orderBy }); - }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage]); + }, [router.query, prefixUrl, slug, brand, category, priceFrom, priceTo, currentPage, finalQuery]); const { productSearch } = useProductSearch({ query: queryFinal, operation: 'OR', }); - console.log("productSearch",productSearch) - console.log("queryFinal",queryFinal) const pageCount = Math.ceil(productSearch.data?.response.numFound / limit); const productStart = productSearch.data?.responseHeader.params.start; @@ -73,8 +83,6 @@ export default function PromoDetail() { setProducts(productSearch.data?.response?.products); }, [productSearch]); - console.log("products",products) - const brands = []; for ( let i = 0; @@ -90,8 +98,6 @@ export default function PromoDetail() { } } - console.log("brands",brands) - const categories = []; for ( let i = 0; @@ -105,190 +111,6 @@ export default function PromoDetail() { categories.push({ name, qty }); } } - - - - - - - useEffect(() => { - if (router.query.brand) { - let brandsArray= []; - if (Array.isArray(router.query.brand)) { - brandsArray = router.query.brand; - } else if (typeof router.query.brand === 'string') { - brandsArray = router.query.brand.split(',').map((brand) => brand.trim()); - } - setBrandValues(brandsArray); - } else { - setBrandValues([]); - } - - if (router.query.category) { - let categoriesArray= []; - - if (Array.isArray(router.query.category)) { - categoriesArray = router.query.category; - } else if (typeof router.query.category === 'string') { - categoriesArray = router.query.category.split(',').map((category) => category.trim()); - } - setCategoryValues(categoriesArray); - } else { - setCategoryValues([]); - } - }, [router.query.brand, router.query.category]); - - useEffect(() => { - const loadPromo = async () => { - setLoading(true); - const brandsData = []; - const categoriesData= []; - - const pageNumber = Array.isArray(page) ? parseInt(page[0], 10) : parseInt(page, 10); - setCurrentPage(pageNumber) - - try { - const items = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug}`,0,10); - setPromoItems(items); - - if (items.length === 0) { - setPromoData([]) - setLoading(false); - return; - } - - const brandArray = Array.isArray(brand) ? brand : brand.split(','); - const categoryArray = Array.isArray(category) ? category : category.split(','); - - const promoDataPromises = items.map(async (item) => { - - try { - let brandQuery = ''; - if (brand) { - brandQuery = brandArray.map(b => `manufacture_name_s:${b}`).join(' OR '); - brandQuery = `(${brandQuery})`; - } - - let categoryQuery = ''; - if (category) { - categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR '); - categoryQuery = `(${categoryQuery})`; - } - - let priceQuery = ''; - if (priceFrom && priceTo) { - priceQuery = `price_f:[${priceFrom} TO ${priceTo}]`; - } else if (priceFrom) { - priceQuery = `price_f:[${priceFrom} TO *]`; - } else if (priceTo) { - priceQuery = `price_f:[* TO ${priceTo}]`; - } - - let combinedQuery = ''; - let combinedQueryPrice = `${priceQuery}`; - if (brand && category && priceFrom || priceTo) { - combinedQuery = `${brandQuery} AND ${categoryQuery} `; - } else if (brand && category) { - combinedQuery = `${brandQuery} AND ${categoryQuery}`; - } else if (brand && priceFrom || priceTo) { - combinedQuery = `${brandQuery}`; - } else if (category && priceFrom || priceTo) { - combinedQuery = `${categoryQuery}`; - } else if (brand) { - combinedQuery = brandQuery; - } else if (category) { - combinedQuery = categoryQuery; - } - - if (combinedQuery && priceFrom || priceTo) { - const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); - const product = response.response.docs[0]; - const product_id = product.id; - const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} AND ${combinedQueryPrice}`,0,100); - return response2; - }else if(combinedQuery){ - const response = await fetchVariantSolr(`id:${item.product_id} AND ${combinedQuery}`); - const product = response.response.docs[0]; - const product_id = product.id; - const response2 = await fetchPromoItemsSolr(`type_value_s:${Array.isArray(slug) ? slug[0] : slug} AND product_ids:${product_id} `,0,100); - return response2; - } else { - const response = await fetchPromoItemsSolr(`id:${item.id}`,0,100); - return response; - } - } catch (fetchError) { - return []; - } - }); - - const promoDataArray = await Promise.all(promoDataPromises); - const mergedPromoData = promoDataArray.reduce((accumulator, currentValue) => accumulator.concat(currentValue), []); - setPromoData(mergedPromoData); - - const dataBrandCategoryPromises = promoDataArray.map(async (promoData) => { - if (promoData) { - const dataBrandCategory = promoData.map(async (item) => { - let response; - if(category){ - const categoryQuery = categoryArray.map(c => `category_name:${c}`).join(' OR '); - response = await fetchVariantSolr(`id:${item.products[0].product_id} AND (${categoryQuery})`); - }else{ - response = await fetchVariantSolr(`id:${item.products[0].product_id}`) - } - - - if (response.response?.docs?.length > 0) { - const product = response.response.docs[0]; - const manufactureNameS = product.manufacture_name; - if (Array.isArray(manufactureNameS)) { - for (let i = 0; i < manufactureNameS.length; i += 2) { - const brand = manufactureNameS[i]; - const qty = 1; - const existingBrandIndex = brandsData.findIndex(b => b.brand === brand); - if (existingBrandIndex !== -1) { - brandsData[existingBrandIndex].qty += qty; - } else { - brandsData.push({ brand, qty }); - } - } - } - - const categoryNameS = product.category_name; - if (Array.isArray(categoryNameS)) { - for (let i = 0; i < categoryNameS.length; i += 2) { - const name = categoryNameS[i]; - const qty = 1; - const existingCategoryIndex = categoriesData.findIndex(c => c.name === name); - if (existingCategoryIndex !== -1) { - categoriesData[existingCategoryIndex].qty += qty; - } else { - categoriesData.push({ name, qty }); - } - } - } - } - }); - - return Promise.all(dataBrandCategory); - } - }); - - await Promise.all(dataBrandCategoryPromises); - setBrands(brandsData); - setCategories(categoriesData); - setLoading(false); - - } catch (loadError) { - // console.error("Error loading promo items:", loadError) - setLoading(false); - } - } - - if (slug) { - loadPromo() - } - },[slug, brand, category, priceFrom, priceTo, currentPage]); - function capitalizeFirstLetter(string) { string = string.replace(/_/g, ' '); @@ -302,7 +124,7 @@ export default function PromoDetail() { q: router.query.q, orderBy: '', brand: brandValues.join(','), - category: categoryValues.join(','), + category: categoryValues?.join(','), priceFrom: priceFrom || '', priceTo: priceTo || '', }; @@ -344,7 +166,6 @@ export default function PromoDetail() { router.push(`${slug}?${params}`); }; - const visiblePromotions = promoData?.slice( (currentPage-1) * itemsPerPage, currentPage * 12) const toQuery = (obj) => { const str = Object.keys(obj) @@ -355,7 +176,6 @@ export default function PromoDetail() { const whatPromo = capitalizeFirstLetter(slug) const queryWithoutSlug = _.omit(router.query, ['slug']) - const queryString = toQuery(queryWithoutSlug) return ( <BasicLayout> @@ -375,7 +195,7 @@ export default function PromoDetail() { priceTo={priceTo} handleDeleteFilter={handleDeleteFilter} /> - {promoItems.length >= 1 && ( + {products?.length >= 1 && ( <div className='flex items-center gap-x-2 mb-5 justify-between'> <div> <button @@ -387,12 +207,10 @@ export default function PromoDetail() { </div> </div> )} - - {loading ? ( - <div className='container flex justify-center my-4'> + {productSearch.isLoading && <div className='container flex justify-center my-4'> <LogoSpinner width={48} height={48} /> - </div> - ) : promoData && promoItems.length >= 1 ? ( + </div>} + {products && ( <> <div className='grid grid-cols-1 gap-x-1 gap-y-1'> {products?.map((promotion) => ( @@ -402,15 +220,11 @@ export default function PromoDetail() { ))} </div> </> - ) : ( - <div className="text-center my-8"> - <p>Belum ada promo pada kategori ini</p> - </div> - )} + ) } <Pagination - pageCount={Math.ceil((promoData?.length ?? 0) / itemsPerPage)} - currentPage={currentPage} + pageCount={pageCount} + currentPage={parseInt(page)} url={`${prefixUrl}?${toQuery(_.omit(queryWithoutSlug, ['page']))}`} className='mt-6 mb-2' /> @@ -433,13 +247,13 @@ export default function PromoDetail() { <div className='detail-filter w-1/2 flex justify-start items-center mt-4'> - {/* <FilterChoicesComponent + <FilterChoicesComponent brandValues={brandValues} categoryValues={categoryValues} priceFrom={priceFrom} priceTo={priceTo} handleDeleteFilter={handleDeleteFilter} - /> */} + /> </div> <div className='Filter w-1/2 flex flex-col'> @@ -451,11 +265,11 @@ export default function PromoDetail() { /> </div> </div> - {loading ? ( + {productSearch.isLoading ? ( <div className='container flex justify-center my-4'> <LogoSpinner width={48} height={48} /> </div> - ) : promoData && promoItems.length >= 1 ? ( + ) : products && products.length >= 1 ? ( <> <div className='grid grid-cols-1 gap-x-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3'> {products?.map((promotion) => ( diff --git a/src/utils/solrMapping.js b/src/utils/solrMapping.js index 15bf3afb..0d50b99b 100644 --- a/src/utils/solrMapping.js +++ b/src/utils/solrMapping.js @@ -19,8 +19,6 @@ export const promoMappingSolr = (promotions) => { qty_sold_f:promotion.total_qty_sold_f, free_products: JSON.parse(promotion.free_products_s) }; - console.log("productMapped",productMapped) - // console.log("promotions",promotions) return productMapped; }) }; |