3 files changed, 54 insertions, 7 deletions
diff --git a/src/components/Filter.js b/src/components/Filter.js
index fd9387d7..385c585d 100644
--- a/src/components/Filter.js
+++ b/src/components/Filter.js
@@ -10,12 +10,14 @@ const Filter = ({
   defaultPriceTo,
   defaultCategory,
   defaultBrand,
+  defaultOrderBy,
   searchResults
 }) => {
   const router = useRouter();
 
   const [priceFrom, setPriceFrom] = useState(defaultPriceFrom);
   const [priceTo, setPriceTo] = useState(defaultPriceTo);
+  const [orderBy, setOrderBy] = useState(defaultOrderBy);
   const [selectedCategory, setSelectedCategory] = useState(defaultCategory);
   const [selectedBrand, setSelectedBrand] = useState(defaultBrand);
   const [categories, setCategories] = useState([]);
@@ -27,6 +29,7 @@ const Filter = ({
     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;
   }
 
@@ -59,10 +62,19 @@ const Filter = ({
     setSelectedCategory('');
     setPriceFrom(0);
     setPriceTo(0);
+    setOrderBy('');
+  }
+
+  const changeOrderBy = (value) => {
+    if (orderBy == value) {
+      setOrderBy('');
+    } else {
+      setOrderBy(value);
+    }
   }
 
   return (
-    <div className={`fixed w-full z-[60] py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
+    <div className={`fixed w-full z-50 py-6 px-4 ring ring-gray-300 bg-white rounded-t-3xl idt-transition ${isActive ? 'bottom-0' : 'bottom-[-100%]'}`}>
       <div className="flex justify-between items-center mb-5">
         <h2 className="text-xl font-semibold">Filter Produk</h2>
         <button onClick={closeFilter}>
@@ -71,6 +83,14 @@ const Filter = ({
       </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>
+          </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>
@@ -99,7 +119,7 @@ const Filter = ({
         <button type="submit" className="btn-yellow font-semibold mt-2 w-full">
           Terapkan Filter
         </button>
-        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 ? (
+        {selectedBrand || selectedCategory || priceFrom > 0 || priceTo > 0 || orderBy ? (
           <button type="button" className="btn-light font-semibold w-full" onClick={reset}>
             Reset Filter
           </button>
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
index 9cd3d4ba..2d26205d 100644
--- a/src/pages/api/shop/search.js
+++ b/src/pages/api/shop/search.js
@@ -44,9 +44,23 @@ export default async function handler(req, res) {
     brand = '',
     category = '',
     price_from = 0,
-    price_to = 0
+    price_to = 0,
+    order_by = ''
   } = req.query;
 
+  let paramOrderBy = '';
+  switch (order_by) {
+    case 'price-asc':
+      paramOrderBy = ', price_discount ASC';
+      break;
+    case 'price-desc':
+      paramOrderBy = ', price_discount DESC';
+      break;
+    case 'popular':
+      paramOrderBy = ', search_rank DESC';
+      break;
+  }
+
   let limit = 30;
   let offset = (page - 1) * limit;
   let parameter = [
@@ -59,7 +73,7 @@ export default async function handler(req, res) {
     'facet.field=category_name_str',
     `start=${offset}`,
     `rows=${limit}`,
-    'sort=product_rating desc',
+    `sort=product_rating DESC ${paramOrderBy}`,
     `fq=price_discount:[${price_from == 0 ? '*' : price_from} TO ${price_to == 0 ? '*' : price_to}]`
   ];
 
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index 29c5b106..6b24f2a9 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -15,7 +15,8 @@ export async function getServerSideProps(context) {
     brand = '', 
     category = '',
     price_from = '0',
-    price_to = '0'
+    price_to = '0',
+    order_by = '',
   } = context.query;
 
   let urlParameter = [
@@ -24,13 +25,23 @@ export async function getServerSideProps(context) {
     `category=${category}`,
     `price_from=${price_from}`,
     `price_to=${price_to}`,
+    `order_by=${order_by}`
   ].join('&');
   let searchResults = await axios(`${process.env.SELF_HOST}/api/shop/search?q=${q}&${urlParameter}`);
   searchResults = searchResults.data;
-  return { props: { searchResults, q, page, brand, category, price_from, price_to } };
+  return { props: { searchResults, q, page, brand, category, price_from, price_to, order_by } };
 }
 
-export default function ShopSearch({ searchResults, q, page, brand, category, price_from, price_to }) {
+export default function ShopSearch({ 
+  searchResults, 
+  q, 
+  page, 
+  brand, 
+  category, 
+  price_from, 
+  price_to, 
+  order_by 
+}) {
   const router = useRouter();
 
   const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
@@ -47,6 +58,7 @@ export default function ShopSearch({ searchResults, q, page, brand, category, pr
     if (category) route += `&category=${category}`;
     if (price_from > 0) route += `&price_from=${price_from}`;
     if (price_to > 0) route += `&price_to=${price_to}`;
+    if (order_by) route += `&order_by=${order_by}`;
     return route;
   }
 
@@ -61,6 +73,7 @@ export default function ShopSearch({ searchResults, q, page, brand, category, pr
         defaultPriceTo={price_to}
         defaultBrand={brand}
         defaultCategory={category}
+        defaultOrderBy={order_by}
         searchResults={searchResults}
       />
       <Layout>