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

---
 src2/pages/shop/search.js | 125 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 125 insertions(+)
 create mode 100644 src2/pages/shop/search.js

(limited to 'src2/pages/shop/search.js')

diff --git a/src2/pages/shop/search.js b/src2/pages/shop/search.js
new file mode 100644
index 00000000..4152bd43
--- /dev/null
+++ b/src2/pages/shop/search.js
@@ -0,0 +1,125 @@
+import axios from "axios";
+import Header from "@/components/layouts/Header";
+import Layout from "@/components/layouts/Layout";
+import Pagination from "@/components/elements/Pagination";
+import ProductCard from "@/components/products/ProductCard";
+import FilterIcon from "@/icons/filter.svg";
+import { useEffect, useState } from "react";
+import Filter from "@/components/elements/Filter";
+import Footer from "@/components/layouts/Footer";
+
+export async function getServerSideProps(context) {
+  const { 
+    q = '*', 
+    page = 1, 
+    brand = '', 
+    category = '',
+    price_from = '',
+    price_to = '',
+    order_by = '',
+  } = context.query;
+
+  let urlParameter = [
+    `page=${page}`,
+    `brand=${brand}`,
+    `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, order_by } };
+}
+
+export default function ShopSearch({ 
+  searchResults, 
+  q, 
+  page, 
+  brand, 
+  category, 
+  price_from, 
+  price_to, 
+  order_by 
+}) {
+  const pageCount = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
+  const productStart = searchResults.responseHeader.params.start;
+  const productRows = searchResults.responseHeader.params.rows;
+  const productFound = searchResults.response.numFound;
+
+  // Variable for <Filter/> props state
+  const [activeFilter, setActiveFilter] = useState(false);
+  const [filterCount, setFilterCount] = useState(0);
+
+  const route = () => {
+    let route = `/shop/search?q=${q}`;
+    if (brand) route += `&brand=${brand}`;
+    if (category) route += `&category=${category}`;
+    if (price_from) route += `&price_from=${price_from}`;
+    if (price_to) route += `&price_to=${price_to}`;
+    if (order_by) route += `&order_by=${order_by}`;
+    return route;
+  }
+
+  useEffect(() => {
+    let calculateFilterCount = 0;
+    if (brand) calculateFilterCount++;
+    if (category) calculateFilterCount++;
+    if (price_from || price_to) calculateFilterCount++;
+    if (order_by) calculateFilterCount++;
+    setFilterCount(calculateFilterCount);
+  }, [brand, category, price_from, price_to, order_by]);
+
+  return (
+    <>
+      <Header title={`Jual ${q} - Indoteknik`} />
+      <Filter 
+        defaultRoute={`/shop/search?q=${q}`}
+        isActive={activeFilter}
+        closeFilter={() => setActiveFilter(false)}
+        defaultPriceFrom={price_from}
+        defaultPriceTo={price_to}
+        defaultBrand={brand}
+        defaultCategory={category}
+        defaultOrderBy={order_by}
+        searchResults={searchResults}
+      />
+      <Layout>
+        <div className="p-4">
+          <h1 className="mb-2">Produk</h1>
+          <div className="text-caption-1 mb-4">
+            {productFound > 0 ? (
+              <>
+                Menampilkan&nbsp;
+                {pageCount > 1 ? (
+                  <>
+                    {productStart + 1}-{
+                      (productStart + productRows) > productFound ? productFound : productStart + productRows
+                    }
+                    &nbsp;dari&nbsp;
+                  </>
+                ) : ''}
+                {searchResults.response.numFound}
+                &nbsp;produk { q != '*' && (<>untuk pencarian <span className="font-semibold">{q}</span></>) }
+              </>
+            ) : 'Mungkin yang anda cari'}
+          </div>
+          <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}>
+            <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span>
+          </button>
+          <div className="grid grid-cols-2 gap-3">
+            {searchResults.response.products.map((product) => (
+              <ProductCard key={product.id} data={product} />
+            ))}
+          </div>
+          
+          <div className="mt-4">
+            <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={route()} />
+          </div>
+        </div>
+
+        <Footer />
+      </Layout>
+    </>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3