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 +++++++++++++++++++++++----------------
 src/components/ManufactureCard.js | 15 ++++++
 src/components/Pagination.js      |  4 +-
 src/components/ProductCard.js     |  2 +-
 4 files changed, 77 insertions(+), 42 deletions(-)
 create mode 100644 src/components/ManufactureCard.js

(limited to 'src/components')

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>
diff --git a/src/components/ManufactureCard.js b/src/components/ManufactureCard.js
new file mode 100644
index 00000000..6b96a852
--- /dev/null
+++ b/src/components/ManufactureCard.js
@@ -0,0 +1,15 @@
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import "react-lazy-load-image-component/src/effects/blur.css";
+import { createSlug } from "../helpers/slug";
+import Link from "./Link";
+
+export default function ManufactureCard({ data }) {
+  const manufacture = data;
+  return (
+    <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white">
+      {manufacture.logo ? (
+        <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" />
+      ) : manufacture.name}
+    </Link>
+  );
+}
\ No newline at end of file
diff --git a/src/components/Pagination.js b/src/components/Pagination.js
index 09566a46..1cb1bca0 100644
--- a/src/components/Pagination.js
+++ b/src/components/Pagination.js
@@ -5,13 +5,15 @@ export default function Pagination({ pageCount, currentPage, url }) {
   let lastPage = false;
   let dotsPrevPage = false;
   let dotsNextPage = false;
+  let urlParameterPrefix = url.includes('?') ? '&' : '?';
+
   return (
     <div className="pagination">
       {Array.from(Array(pageCount)).map((v, i) => {
         let page = i + 1;
         let rangePrevPage = currentPage - 2;
         let rangeNextPage = currentPage + 2;
-        let PageComponent = <Link key={i} href={`${url}&page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link>;
+        let PageComponent = <Link key={i} href={`${url + urlParameterPrefix}page=${page}`} className={"pagination-item" + (page == currentPage ? " pagination-item--active " : "")}>{page}</Link>;
         let DotsComponent = <div key={i} className="pagination-dots">...</div>;
 
         if (pageCount == 7) {
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 2299d931..0fe47196 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -19,7 +19,7 @@ export default function ProductCard({ data }) {
       <div className="product-card__description">
         <div>
           {typeof product.manufacture.name !== "undefined" ? (
-            <a href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</a>
+            <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
           ) : (
             <span className="product-card__brand">-</span>
           )}
-- 
cgit v1.2.3