diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/lib/product/components/ProductSearch.jsx | 74 | ||||
| -rw-r--r-- | src/pages/searchkey/[slug].jsx | 16 |
2 files changed, 73 insertions, 17 deletions
diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx index c73c7036..3e667966 100644 --- a/src/lib/product/components/ProductSearch.jsx +++ b/src/lib/product/components/ProductSearch.jsx @@ -44,7 +44,7 @@ const ProductSearch = ({ const { page = 1 } = query; const [q, setQ] = useState(query?.q || '*'); const [search, setSearch] = useState(query?.q || '*'); - const [limit, setLimit] = useState(router.query?.limit || 30); + const [limit, setLimit] = useState(parseInt(router.query?.limit) || 30); const [orderBy, setOrderBy] = useState(router.query?.orderBy); const [finalQuery, setFinalQuery] = useState({}); const [queryFinal, setQueryFinal] = useState({}); @@ -86,6 +86,21 @@ const ProductSearch = ({ } }, [router.isReady, router.pathname, router.query?.orderBy, prefixUrl]); + // 🔹 Sync limit state with router.query + useEffect(() => { + if (!router.isReady) return; + const newLimit = parseInt(router.query?.limit) || 30; + setLimit(newLimit); + }, [router.query?.limit, router.isReady]); + + // 🔹 Sync orderBy state with router.query + useEffect(() => { + if (!router.isReady) return; + if (router.query?.orderBy) { + setOrderBy(router.query.orderBy); + } + }, [router.query?.orderBy, router.isReady]); + const dataIdCategories = []; useEffect(() => { if (prefixUrl.includes('category')) { @@ -180,20 +195,55 @@ const ProductSearch = ({ } }; fetchCategoryData(); + } else if (query?.from === 'searchkey' && query?.ids) { + const newQuery = { + ids: query.ids, + from: 'searchkey', + page: router.query.page ? router.query.page : 1, + 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); } - }, [dataCategoriesProduct, dataLob]); + }, [dataCategoriesProduct, dataLob, query?.from, query?.ids, router.query]); useEffect(() => { if ( prefixUrl.includes('category') || prefixUrl.includes('lob') || + query?.from === 'searchkey' || router.asPath.includes('penawaran') ) { - setQueryFinal({ ...finalQuery, q, limit, orderBy }); + setQueryFinal({ + ...finalQuery, + q, + limit, + orderBy, + page: router.query.page || 1, + }); } else { - setQueryFinal({ ...query, q, limit, orderBy }); + setQueryFinal({ + ...query, + q, + limit, + orderBy, + page: router.query.page || 1, + }); } - }, [prefixUrl, dataCategoriesProduct, query, finalQuery]); + }, [ + prefixUrl, + dataCategoriesProduct, + query, + finalQuery, + router.query, + router.query.page, + limit, + orderBy, + q, + ]); const { productSearch } = useProductSearch({ query: queryFinal, @@ -339,6 +389,7 @@ const ProductSearch = ({ let params = { ...router.query, limit: e.target.value, + page: 1, // Reset to page 1 when limit changes }; params = _.pickBy(params, _.identity); params = toQuery(params); @@ -541,8 +592,10 @@ const ProductSearch = ({ <Pagination pageCount={pageCount} - currentPage={parseInt(page)} - url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`} + currentPage={ + router.query.page ? parseInt(router.query.page, 10) : 1 + } + url={`${prefixUrl}?${toQuery(_.omit(router.query, ['page', 'ids', 'from']))}`} className='mt-6 mb-2' /> @@ -729,9 +782,10 @@ const ProductSearch = ({ <Pagination pageCount={pageCount} - currentPage={parseInt(page)} - url={`${prefixUrl}?${toQuery(_.omit(query, ['page', 'fq']))}`} - // url={prefixUrl.includes('category') || prefixUrl.includes('lob')? `${prefixUrl}?${toQuery(_.omit(finalQuery, ['page']))}` : `${prefixUrl}?${toQuery(_.omit(query, ['page']))}`} + currentPage={ + router.query.page ? parseInt(router.query.page, 10) : 1 + } + url={`${prefixUrl}?${toQuery(_.omit(router.query, ['page', 'ids', 'from']))}`} className='!justify-end' /> </div> diff --git a/src/pages/searchkey/[slug].jsx b/src/pages/searchkey/[slug].jsx index b0fc9ab8..2fa3cf8d 100644 --- a/src/pages/searchkey/[slug].jsx +++ b/src/pages/searchkey/[slug].jsx @@ -8,11 +8,11 @@ import { capitalizeEachWord } from '../../utils/capializeFIrstWord'; // ✅ Breadcrumb = default export import Breadcrumb from '@/lib/category/components/Breadcrumb'; -const BasicLayout = dynamic(() => - import('@/core/components/layouts/BasicLayout') +const BasicLayout = dynamic( + () => import('@/core/components/layouts/BasicLayout'), ); -const ProductSearch = dynamic(() => - import('@/lib/product/components/ProductSearch') +const ProductSearch = dynamic( + () => import('@/lib/product/components/ProductSearch'), ); export default function KeywordPage() { @@ -33,7 +33,7 @@ export default function KeywordPage() { const getSearchKeyData = async (slug) => { try { const res = await axios( - `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey` + `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/searchkey?url=${slug}&from=searchkey`, ); setResult(res?.data?.response?.docs?.[0] || null); @@ -52,7 +52,7 @@ export default function KeywordPage() { useEffect(() => { if (!result) return; - // product search + // product search - keep ids for API, add from marker for ProductSearch const ids = result.product_ids_is || []; setQuery({ ids: ids.join(','), @@ -90,7 +90,9 @@ export default function KeywordPage() { )} {/* ✅ Product result */} - {query && <ProductSearch query={query} prefixUrl={route.asPath} />} + {query && ( + <ProductSearch query={query} prefixUrl={`/searchkey/${slugRaw}`} /> + )} </BasicLayout> ); } |