From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/product/components/ProductSearch.jsx | 95 ++++++++++++++++++++++++++++
 1 file changed, 95 insertions(+)
 create mode 100644 src/lib/product/components/ProductSearch.jsx

(limited to 'src/lib/product/components/ProductSearch.jsx')

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
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/product/components/ProductSearch.jsx | 86 ++++++++++++++++------------
 1 file changed, 49 insertions(+), 37 deletions(-)

(limited to 'src/lib/product/components/ProductSearch.jsx')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 14df9864..25d0278f 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -1,21 +1,23 @@
-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"
+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 [products, setProducts] = useState(null)
   const popup = useActive()
 
-  const pageCount = Math.ceil(productSearch.data?.response.numFound / productSearch.data?.responseHeader.params.rows)
+  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
@@ -25,11 +27,13 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
       return true
     }
   })
-  const categories = productSearch.data?.facetCounts?.facetFields?.categoryNameStr?.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) {
@@ -40,47 +44,55 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   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 ? (
+    <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
-                }
+                {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></>) }
+            ) : (
+              ''
+            )}
+            {productFound}
+            &nbsp;produk{' '}
+            {query.q && (
+              <>
+                untuk pencarian <span className='font-semibold'>{query.q}</span>
+              </>
+            )}
           </>
-        ) : 'Mungkin yang anda cari'}
+        ) : (
+          'Mungkin yang anda cari'
+        )}
       </div>
 
-      <button className="btn-light mb-6 py-2 px-5" onClick={popup.activate}>
+      <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 className='grid grid-cols-2 gap-3'>
+        {products && products.map((product) => <ProductCard product={product} key={product.id} />)}
       </div>
 
       <Pagination
         pageCount={pageCount}
-        currentPage={parseInt(page)} 
+        currentPage={parseInt(page)}
         url={`${prefixUrl}?${toQuery(_.omit(query, ['page']))}`}
-        className="mt-6 mb-2"
+        className='mt-6 mb-2'
       />
 
-      <ProductFilter 
+      <ProductFilter
         active={popup.active}
         close={popup.deactivate}
         brands={brands || []}
@@ -92,4 +104,4 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
   )
 }
 
-export default ProductSearch
\ No newline at end of file
+export default ProductSearch
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/product/components/ProductSearch.jsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

(limited to 'src/lib/product/components/ProductSearch.jsx')

diff --git a/src/lib/product/components/ProductSearch.jsx b/src/lib/product/components/ProductSearch.jsx
index 25d0278f..52bd5119 100644
--- a/src/lib/product/components/ProductSearch.jsx
+++ b/src/lib/product/components/ProductSearch.jsx
@@ -77,12 +77,21 @@ const ProductSearch = ({ query, prefixUrl, defaultBrand = null }) => {
         )}
       </div>
 
-      <button className='btn-light mb-6 py-2 px-5' onClick={popup.activate}>
+      <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} />)}
+        {products &&
+          products.map((product) => (
+            <ProductCard
+              product={product}
+              key={product.id}
+            />
+          ))}
       </div>
 
       <Pagination
-- 
cgit v1.2.3