1 files changed, 95 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..14df9864
--- /dev/null
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -0,0 +1,95 @@
+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
+\ No newline at end of file