Connect to solr (search product), header component with title, fix product card layout, show product search result

5 files changed, 227 insertions, 118 deletions

diff --git a/src/pages/404.js b/src/pages/404.js
new file mode 100644
index 00000000..83993f61
--- /dev/null
+++ b/src/pages/404.js
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import Link from "next/link";
+import Header from "../components/Header";
+import PageNotFoundImage from "../images/page-not-found.png";
+
+export default function PageNotFound() {
+  return (
+    <>
+      <Header title="Halaman Tidak Ditemukan - Indoteknik" />
+      <main>
+        <Image src={PageNotFoundImage} alt="Halaman Tidak Ditemukan - Indoteknik" className="w-full" />
+        <p className="mt-3 h1 text-center">Halaman tidak ditemukan</p>
+        <div className="mt-10 text-center">
+          <Link href="/" className="btn-primary">
+            Kembali ke beranda
+          </Link>
+          <a href="https://send.whatsapp.com" className="block mt-6">
+            Tanya admin
+          </a>
+        </div>
+      </main>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/src/pages/api/shop/search.js b/src/pages/api/shop/search.js
new file mode 100644
index 00000000..3c3a1766
--- /dev/null
+++ b/src/pages/api/shop/search.js
@@ -0,0 +1,71 @@
+import axios from "axios";
+
+const productResponseMap = (products) => {
+  return products.map((product) => {
+    let productMapped = {
+      id: product.product_id ? product.product_id[0] : '',
+      image: product.image ? product.image[0] : '',
+      code: product.default_code ? product.default_code[0] : '',
+      name: product.product_name ? product.product_name[0] : '',
+      lowest_price: {
+        price: product.price ? product.price[0] : 0,
+        price_discount: product.price_discount ? product.price_discount[0] : 0,
+        discount_percentage: product.discount ? product.discount[0] : 0,
+      },
+      variant_total: product.variant_total ? product.variant_total[0] : 0,
+      stock_total: product.stock_total ? product.stock_total[0] : 0,
+      weight: product.weight ? product.weight[0] : 0,
+      manufacture: {},
+      categories: [],
+    };
+
+    if (product.manufacture_id && product.brand) {
+      productMapped.manufacture = {
+        id: product.manufacture_id ? product.manufacture_id[0] : '',
+        name: product.brand ? product.brand[0] : '',
+      };
+    }
+
+    productMapped.categories = [
+      {
+        id: product.category_id ? product.category_id[0] : '',
+        name: product.category_name ? product.category_name[0] : '',
+      }
+    ];
+
+    return productMapped;
+  });
+}
+
+export default async function handler(req, res) {
+  const { 
+    q, 
+    page = 1 
+  } = req.query;
+
+  let limit = 30;
+  let offset = (page - 1) * limit;
+
+  let parameter = [
+    `facet.query=${q}`,
+    'facet=true',
+    'indent=true',
+    'q.op=AND',
+    `q=${q}`,
+    'facet.field=brand_str',
+    'facet.field=category_name_str',
+    `start=${offset}`,
+    `rows=${limit}`,
+  ].join('&');
+  
+  let result = await axios(process.env.SOLR_HOST + '/solr/products/select?' + parameter);
+  try {
+    result.data.response.products = productResponseMap(result.data.response.docs);
+    result.data.responseHeader.params.start = parseInt(result.data.responseHeader.params.start);
+    result.data.responseHeader.params.rows = parseInt(result.data.responseHeader.params.rows);
+    delete result.data.response.docs;
+    res.status(200).json(result.data);
+  } catch (error) {
+    res.status(400).json({ error: error.message });
+  }
+}
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index 40b36dc2..9d26d8ee 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -44,7 +44,7 @@ export default function Home() {
 
   return (
     <>
-      <Header />
+      <Header title="Home - Indoteknik" />
       <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
         {
           heroBanners?.map((banner, index) => (
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index f50d5037..e601d8c0 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -1,17 +1,13 @@
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
-import ProductCard from "../../../components/ProductCard";
 import Header from "../../../components/Header";
 import { getOdoo } from "../../../helpers/apiOdoo";
 import { createSlug, getId } from "../../../helpers/slug";
 import currencyFormat from "../../../helpers/currencyFormat";
-import Head from "next/head";
-import { Swiper, SwiperSlide } from "swiper/react";
 import { LazyLoadImage } from "react-lazy-load-image-component";
-import ImagePlaceholderIcon from "../../../icons/image-placeholder.svg";
-import "swiper/css";
 import "react-lazy-load-image-component/src/effects/blur.css";
+import ProductSlider from "../../../components/product/ProductSlider";
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
@@ -83,126 +79,98 @@ export default function ProductDetail({product}) {
 
   return (
     <>
-      <Head>
-        <title>{product.name + '- Indoteknik'}</title>
-      </Head>
-      <Header />
-      <div className="px-4 pt-5 pb-10">
-        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border border-gray-300 rounded-md mb-4 w-full h-[300px] object-contain object-center" />
-        <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
-          {product.manufacture.name || '-'}
-        </Link>
-        <h1 className="mb-3">{product.name}{activeVariant.attributes != '' ? ' - ' + activeVariant.attributes : ''}</h1>
-
-        {product.variant_total > 1 && selectedVariant == "" ? (
-          <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
-        ) : ''}
-
-        {product.lowest_price.discount_percentage > 0 ? (
-          <div className="flex gap-x-1 items-center">
-            <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
-            <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
-          </div>
-        ) : ''} 
-
-        {product.lowest_price.price > 0 ? (
-          <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
-        ) : (
-          <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
-        )}
-
-        <div className="flex gap-x-2 mt-5">
-          <div className="w-9/12">
-            <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
-            <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
-              <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
-              {product.variants.length > 1 ? (
-                product.variants.map((variant) => {
-                  return (
-                    <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
-                  );
-                })
-              ) : (
-                <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
-              )}
-            </select>
-          </div>
-          <div className="w-3/12">
-            <label htmlFor="quantity" className="form-label">Jumlah</label>
-            <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
-          </div>
-        </div>
-
-        <div className="flex gap-x-2 mt-2">
-          <button className="btn-light w-full" >+ Quotation</button>
-          <button className="btn-primary w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
-        </div>
+      <Header title={`${product.name} - Indoteknik`}/>
+      <main>
+
+        <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center" />
+        <div className="p-4 pb-10">
+          <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
+            {product.manufacture.name ?? '-'}
+          </Link>
+          <h1 className="mb-3">{product.name}{activeVariant.attributes ? ' - ' + activeVariant.attributes : ''}</h1>
+
+          {product.variant_total > 1 && !selectedVariant ? (
+            <p className="text-xs text-gray-800 mb-1">Harga mulai dari:</p>
+          ) : ''}
 
-        <div className="mt-10">
-          <h2 className="h1 mb-2">Detail Produk</h2>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Jumlah Varian</h3>
-            <p className="text-gray-800">{product.variant_total} Varian</p>
-          </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Nomor SKU</h3>
-            <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
+          {product.lowest_price.discount_percentage > 0 ? (
+            <div className="flex gap-x-1 items-center">
+              <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
+              <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
+            </div>
+          ) : ''} 
+
+          {product.lowest_price.price > 0 ? (
+            <p className="text-lg text-gray-900 font-semibold">{currencyFormat(activeVariant.price.price_discount)}</p>
+          ) : (
+            <p className="text-gray-800">Dapatkan harga terbaik, <a href="">hubungi kami.</a></p>
+          )}
+
+          <div className="flex gap-x-2 mt-5">
+            <div className="w-9/12">
+              <label className="form-label">Pilih: <span className="text-gray-800">{product.variant_total} Varian</span></label>
+              <select name="variant" className="form-input" value={selectedVariant} onChange={onchangeVariant} >
+                <option value="" disabled={selectedVariant != "" ? true : false}>Pilih Varian...</option>
+                {product.variants.length > 1 ? (
+                  product.variants.map((variant) => {
+                    return (
+                      <option key={variant.id} value={variant.id}>{variant.attributes.join(', ')}</option>
+                    );
+                  })
+                ) : (
+                  <option key={product.variants[0].id} value={product.variants[0].id}>{product.variants[0].name}</option>
+                )}
+              </select>
+            </div>
+            <div className="w-3/12">
+              <label htmlFor="quantity" className="form-label">Jumlah</label>
+              <input type="number" name="quantity" id="quantity" className="form-input text-center is-invalid" value={quantity} onChange={(e) => setQuantity(e.target.value)} />
+            </div>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Part Number</h3>
-            <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
+
+          <div className="flex gap-x-2 mt-2">
+            <button className="btn-light w-full" >+ Quotation</button>
+            <button className="btn-primary w-full" onClick={addToCart} disabled={(product.lowest_price.price == 0 ? true : false)}>+ Keranjang</button>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Stok</h3>
-            <p className="text-gray-800" id="stock">
-              {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
-            </p>
+
+          <div className="mt-10">
+            <h2 className="font-bold mb-2">Detail Produk</h2>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Jumlah Varian</h3>
+              <p className="text-gray-800">{product.variant_total} Varian</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Nomor SKU</h3>
+              <p className="text-gray-800" id="sku_number">SKU-{activeVariant.id}</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Part Number</h3>
+              <p className="text-gray-800" id="part_number">{activeVariant.code}</p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Stok</h3>
+              <p className="text-gray-800" id="stock">
+                {activeVariant.stock > 0 ? (activeVariant.stock > 5 ? 'Lebih dari 5' : 'Kurang dari 5') : '0'}
+              </p>
+            </div>
+            <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
+              <h3 className="text-gray-900">Berat Barang</h3>
+              <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
+            </div>
           </div>
-          <div className="flex py-2 justify-between items-center gap-x-1 border-b border-gray-300">
-            <h3 className="text-gray-900">Berat Barang</h3>
-            <p className="text-gray-800" id="weight">{activeVariant.weight > 0 ? activeVariant.weight : '1'} KG</p>
+
+          <div className="mt-10">
+            <h2 className="font-bold mb-4">Deskripsi Produk</h2>
+            <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description.trim() != '' ? product.description.replaceAll(/<*b>/g, '') : 'Belum ada deskripsi produk.')}}></div>
           </div>
-        </div>
 
-        <div className="mt-10">
-          <h2 className="h1 mb-4">Deskripsi Produk</h2>
-          <div className="text-gray-800 leading-7" dangerouslySetInnerHTML={{__html: (product.description.trim() != '' ? product.description.replaceAll(/<*b>/g, '') : 'Belum ada deskripsi produk.')}}></div>
-        </div>
+          <div className="mt-10">
+            <h2 className="h1 mb-4">Produk Lainnya</h2>
+            <ProductSlider products={similarProducts}/>
+          </div>
 
-        <div className="mt-10">
-          <h2 className="h1 mb-4">Produk Lainnya</h2>
-          <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8} loop={true}>
-            {similarProducts?.products?.map((product, index) => (<SwiperSlide key={index}><ProductCard data={product} /></SwiperSlide>))}
-          </Swiper>
-          {similarProducts == null ? (
-            <div className="grid grid-cols-2 gap-x-4">
-              <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-                <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-                <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-                </div>
-                <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-                <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full"></div>
-                <span className="sr-only">Loading...</span>
-              </div>
-              <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
-                <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
-                  <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
-                </div>
-                <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
-                <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
-                <div className="h-2 bg-gray-200 rounded-full"></div>
-                <span className="sr-only">Loading...</span>
-              </div>
-            </div>
-          ) : ''}
         </div>
-
-      </div>
+      </main>
     </>
   );
 }
\ No newline at end of file
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
new file mode 100644
index 00000000..6e6839be
--- /dev/null
+++ b/src/pages/shop/search.js
@@ -0,0 +1,46 @@
+import axios from "axios";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import Header from "../../components/Header";
+import ProductCard from "../../components/ProductCard";
+
+export async function getServerSideProps(context) {
+  const { q, page = 1 } = context.query;
+  let searchResults = await axios(`http://${context.req.headers.host}/api/shop/search?q=${q}&page=${page}`);
+  searchResults = searchResults.data;
+  return { props: { searchResults, q } };
+}
+
+export default function ShopSearch({ searchResults, q, page = 1 }) {
+  const pageTotal = Math.ceil(searchResults.response.numFound / searchResults.responseHeader.params.rows);
+
+  return (
+    <>
+      <Header title={`Jual ${q} - Indoteknik`} />
+      <main>
+        <div className="p-4">
+          <h1 className="mb-1">Produk</h1>
+          <div className="text-xs mb-4">
+            Menampilkan&nbsp;
+            {searchResults.responseHeader.params.start + 1}-{searchResults.responseHeader.params.start + searchResults.responseHeader.params.rows}
+            &nbsp;dari&nbsp;
+            {searchResults.response.numFound}
+            &nbsp;produk untuk pencarian {q}
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            {searchResults.response.products.map((product) => (
+              <ProductCard key={product.id} data={product} />
+            ))}
+          </div>
+          <div className="flex justify-center gap-x-1 mt-4">
+            {[...Array(pageTotal)].map((v, i) => (
+              <Link href={`/shop/search?q=${q}&page=${i+1}`} key={i} className={"p-1 px-2 rounded ease-linear duration-150 " + (page == (i + 1) ? "bg-yellow-900 text-white" : "bg-gray-100 hover:bg-gray-300 text-gray-900")}>
+                {i + 1}
+              </Link>
+            ))}
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
\ No newline at end of file