Merged in refactor (pull request #1)

Refactor

1 files changed, 116 insertions, 0 deletions

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
new file mode 100644
index 00000000..52bd5119
--- /dev/null
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -0,0 +1,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