src/lib/product/components/ProductSearch.jsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

import { useEffect, useState } from 'react'
import useProductSearch from '../hooks/useProductSearch'
import ProductCard from './ProductCard'
import Pagination from '@/core/components/elements/Pagination/Pagination'
import { toQuery } from 'lodash-contrib'
import _ from 'lodash'
import ProductSearchSkeleton from './Skeleton/ProductSearchSkeleton'
import ProductFilter from './ProductFilter'
import useActive from '@/core/hooks/useActive'

const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
  const { page = 1 } = query
  if (defaultBrand) query.brand = defaultBrand.toLowerCase()
  const { productSearch } = useProductSearch({ query })
  const [products, setProducts] = useState(null)
  const popup = useActive()

  const pageCount = Math.ceil(
    productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows
  )
  const productStart = productSearch.data?.responseHeader.params.start
  const productRows = productSearch.data?.responseHeader.params.rows
  const productFound = productSearch.data?.response.numFound

  const brands = productSearch.data?.facetCounts?.facetFields?.brandStr?.filter((value, index) => {
    if (index % 2 === 0) {
      return true
    }
  })
  const categories = productSearch.data?.facetCounts?.facetFields?.categoryNameStr?.filter(
    (value, index) => {
      if (index % 2 === 0) {
        return true
      }
    }
  )

  useEffect(() => {
    if (!products) {
      setProducts(productSearch.data?.response?.products)
    }
  }, [query, products, productSearch])

  if (productSearch.isLoading) {
    return <ProductSearchSkeleton />
  }

  return (
    <div className='p-4'>
      <h1 className='mb-2 font-semibold text-h-sm'>Produk</h1>

      <div className='mb-2 leading-6 text-gray_r-11'>
        {productFound > 0 ? (
          <>
            Menampilkan&nbsp;
            {pageCount > 1 ? (
              <>
                {productStart + 1}-
                {productStart + productRows > productFound
                  ? productFound
                  : productStart + productRows}
                &nbsp;dari&nbsp;
              </>
            ) : (
              ''
            )}
            {productFound}
            &nbsp;produk{' '}
            {query.q && (
              <>
                untuk pencarian <span className='font-semibold'>{query.q}</span>
              </>
            )}
          </>
        ) : (
          'Mungkin yang anda cari'
        )}
      </div>

      <button
        className='btn-light mb-6 py-2 px-5'
        onClick={popup.activate}
      >
        Filter
      </button>

      <div className='grid grid-cols-2 gap-3'>
        {products &&
          products.map((product) => (
            <ProductCard
              product={product}
              key={product.id}
            />
          ))}
      </div>

      <Pagination
        pageCount={pageCount}
        currentPage={parseInt(page)}
        url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
        className='mt-6 mb-2'
      />

      <ProductFilter
        active={popup.active}
        close={popup.deactivate}
        brands={brands || []}
        categories={categories || []}
        prefixUrl={prefixUrl}
        defaultBrand={defaultBrand}
      />
    </div>
  )
}

export default ProductSearch