From 21a22d686e71d8eb470d158f93ba80e43b7b221f Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Fri, 2 Dec 2022 17:32:29 +0700
Subject: input range filter, sort by ready stock

---
 src/components/Filter.js | 31 ++++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

(limited to 'src/components/Filter.js')

diff --git a/src/components/Filter.js b/src/components/Filter.js
index d2a5bf1b..4727fb9d 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -29,8 +29,8 @@ const Filter = ({
     let filterRoutePrefix = '?';
     if (selectedBrand) filterRoute.push(`brand=${selectedBrand}`);
     if (selectedCategory) filterRoute.push(`category=${selectedCategory}`);
-    if (priceFrom > 0) filterRoute.push(`price_from=${priceFrom}`);
-    if (priceTo > 0) filterRoute.push(`price_to=${priceTo}`);
+    if (priceFrom) filterRoute.push(`price_from=${priceFrom}`);
+    if (priceTo) filterRoute.push(`price_to=${priceTo}`);
     if (orderBy) filterRoute.push(`order_by=${orderBy}`);
 
     if (defaultRoute.includes('?')) filterRoutePrefix = '&';
@@ -70,8 +70,8 @@ const Filter = ({
   const reset = () => {
     setSelectedBrand('');
     setSelectedCategory('');
-    setPriceFrom(0);
-    setPriceTo(0);
+    setPriceFrom('');
+    setPriceTo('');
     setOrderBy('');
   }
 
@@ -92,13 +92,19 @@ const Filter = ({
         </button>
       </div>
       <form className="flex flex-col gap-y-4" onSubmit={submit}>
+        {selectedBrand || selectedCategory || priceFrom || priceTo || orderBy ? (
+          <button type="button" className="text-yellow-900 font-semibold ml-auto" onClick={reset}>
+            Reset Filter
+          </button>
+        ) : ''}
         {!disableFilter.includes('orderBy') ? (
           <div>
             <label>Urutkan</label>
-            <div className="flex flex-wrap gap-2 mt-2">
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button>
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button>
-              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button>
+            <div className="flex gap-2 mt-2 overflow-x-auto w-full">
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-asc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-asc')}>Harga Terendah</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'price-desc' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('price-desc')}>Harga Tertinggi</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'popular' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('popular')}>Populer</button>
+              <button type="button" className={"p-2 rounded border border-gray-300 text-gray-800 flex-shrink-0" + (orderBy == 'stock' ? ' border-yellow-900 text-yellow-900' : '')} onClick={() => changeOrderBy('stock')}>Ready Stock</button>
             </div>
           </div>
         ) : ''}
@@ -128,20 +134,15 @@ const Filter = ({
           <div>
             <label>Harga</label>
             <div className="flex gap-x-4 mt-2 items-center">
-              <input className="form-input" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
+              <input className="form-input" type="number" placeholder="Dari" value={priceFrom} onChange={(e) => setPriceFrom(e.target.value)}/>
               <span>&mdash;</span>
-              <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+              <input className="form-input" type="number" placeholder="Sampai" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
             </div>
           </div>
         ) : ''}
         <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
           Terapkan Filter
         </button>
-        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 || orderBy ? (
-          <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
-            Reset Filter
-          </button>
-        ) : ''}
       </form>
     </div>
   )
-- 
cgit v1.2.3