From 0a0c497204acbac562700d80f38e74aa9ffcd94e Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Thu, 1 Dec 2022 16:26:21 +0700
Subject: dynamic filter, dynamic pagination, detail brand, to title case

---
 src/components/Filter.js | 98 ++++++++++++++++++++++++++++--------------------
 1 file changed, 58 insertions(+), 40 deletions(-)

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

diff --git a/src/components/Filter.js b/src/components/Filter.js
index 385c585d..d2a5bf1b 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -11,7 +11,8 @@ const Filter = ({
   defaultCategory,
   defaultBrand,
   defaultOrderBy,
-  searchResults
+  searchResults,
+  disableFilter = []
 }) => {
   const router = useRouter();
 
@@ -24,13 +25,22 @@ const Filter = ({
   const [brands, setBrands] = useState([]);
 
   const filterRoute = () => {
-    let filterRoute = defaultRoute;
-    if (selectedBrand) filterRoute += `&brand=${selectedBrand}`;
-    if (selectedCategory) filterRoute += `&category=${selectedCategory}`;
-    if (priceFrom > 0) filterRoute += `&price_from=${priceFrom}`;
-    if (priceTo > 0) filterRoute += `&price_to=${priceTo}`;
-    if (orderBy) filterRoute += `&order_by=${orderBy}`;
-    return filterRoute;
+    let filterRoute = [];
+    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 (orderBy) filterRoute.push(`order_by=${orderBy}`);
+
+    if (defaultRoute.includes('?')) filterRoutePrefix = '&';
+    if (filterRoute.length > 0) {
+      filterRoute = filterRoutePrefix + filterRoute.join('&');
+    } else {
+      filterRoute = '';
+    }
+
+    return defaultRoute + filterRoute;
   }
 
   useEffect(() => {
@@ -82,40 +92,48 @@ const Filter = ({
         </button>
       </div>
       <form className="flex flex-col gap-y-4" onSubmit={submit}>
-        <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>
+        {!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>
+          </div>
+        ) : ''}
+        {!disableFilter.includes('category') ? (
+          <div>
+            <label>Kategori</label>
+            <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
+              <option value="">Pilih kategori...</option>
+              {categories?.map((category, index) => (
+                <option key={index} value={category}>{category}</option>
+              ))}
+            </select>
           </div>
-        </div>
-        <div>
-          <label>Kategori</label>
-          <select className="form-input mt-2" value={selectedCategory} onChange={(e) => setSelectedCategory(e.target.value)}>
-            <option value="">Pilih kategori...</option>
-            {categories?.map((category, index) => (
-              <option key={index} value={category}>{category}</option>
-            ))}
-          </select>
-        </div>
-        <div>
-          <label>Brand</label>
-          <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
-            <option value="">Pilih brand...</option>
-            {brands?.map((brand, index) => (
-              <option key={index} value={brand}>{brand}</option>
-            ))}
-          </select>
-        </div>
-        <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)}/>
-            <span>&mdash;</span>
-            <input className="form-input" value={priceTo} onChange={(e) => setPriceTo(e.target.value)}/>
+        ) : ''}
+        {!disableFilter.includes('brand') ? (
+          <div>
+            <label>Brand</label>
+            <select className="form-input mt-2" value={selectedBrand} onChange={(e) => setSelectedBrand(e.target.value)}>
+              <option value="">Pilih brand...</option>
+              {brands?.map((brand, index) => (
+                <option key={index} value={brand}>{brand}</option>
+              ))}
+            </select>
           </div>
-        </div>
+        ) : ''}
+        {!disableFilter.includes('price') ? (
+          <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)}/>
+              <span>&mdash;</span>
+              <input className="form-input" 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>
-- 
cgit v1.2.3