Refactor

2 files changed, 257 insertions, 0 deletions

diff --git a/src2/pages/shop/brands/[slug].js b/src2/pages/shop/brands/[slug].js
new file mode 100644
index 00000000..a387e55d
--- /dev/null
+++ b/src2/pages/shop/brands/[slug].js
@@ -0,0 +1,178 @@
+import axios from "axios";
+import { useEffect, useState } from "react";
+import Filter from "@/components/elements/Filter";
+import Footer from "@/components/layouts/Footer";
+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 { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug";
+import FilterIcon from "@/icons/filter.svg";
+import apiOdoo from "@/core/utils/apiOdoo";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/autoplay";
+import { Pagination as SwiperPagination } from "swiper";
+import Image from "@/components/elements/Image";
+import LineDivider from "@/components/elements/LineDivider";
+
+export async function getServerSideProps(context) {
+  const { 
+    slug, 
+    page = 1, 
+    category = '',
+    price_from = '',
+    price_to = '',
+    order_by = '',
+  } = context.query;
+
+  let urlParameter = [
+    'q=*',
+    `page=${page}`,
+    `brand=${getNameFromSlug(slug)}`,
+    `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?${urlParameter}`);
+  searchResults = searchResults.data;
+
+  const manufacture = await apiOdoo('GET', `/api/v1/manufacture/${getIdFromSlug(slug)}`);
+  
+  return {
+    props: { 
+      searchResults, 
+      page, 
+      slug, 
+      category, 
+      price_from,
+      price_to,
+      order_by,
+      manufacture
+    }
+  };
+}
+
+export default function BrandDetail({ 
+  searchResults,
+  page,
+  slug,
+  category, 
+  price_from,
+  price_to,
+  order_by,
+  manufacture
+}) {
+  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;
+
+  const [activeFilter, setActiveFilter] = useState(false);
+  const [filterCount, setFilterCount] = useState(0);
+
+  const route = () => {
+    let route = `/shop/brands/${slug}`;
+    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 (category) calculateFilterCount++;
+    if (price_from || price_to) calculateFilterCount++;
+    if (order_by) calculateFilterCount++;
+    setFilterCount(calculateFilterCount);
+  }, [category, price_from, price_to, order_by]);
+
+  return (
+    <>
+      <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} />
+      <Filter 
+        defaultRoute={`/shop/brands/${slug}`}
+        isActive={activeFilter}
+        closeFilter={() => setActiveFilter(false)}
+        defaultPriceFrom={price_from}
+        defaultPriceTo={price_to}
+        defaultBrand=''
+        defaultCategory={category}
+        defaultOrderBy={order_by}
+        searchResults={searchResults}
+        disableFilter={['brand']}
+      />
+      <Layout>
+        <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[SwiperPagination]}>
+          {
+            manufacture.banners?.map((banner, index) => (
+              <SwiperSlide key={index}>
+                <Image
+                  src={banner} 
+                  alt={`Banner ${manufacture.name}`} 
+                  className="w-full h-auto border-b border-gray_r-6"
+                />
+              </SwiperSlide>
+            ))
+          }
+        </Swiper>
+        <div className="p-4 grid grid-cols-2">
+          <div>
+            <p className="text-caption-2 text-gray_r-11 mb-2">Produk dari brand:</p>
+            { manufacture.logo ? (
+              <div className="w-8/12">
+                <Image src={manufacture?.logo} alt={manufacture.name} className="border border-gray_r-6 rounded p-3" />
+              </div>
+            ) : (
+              <p className="badge-solid-red text-caption-1">{ manufacture.name }</p>
+              ) }
+          </div>
+          <div className="text-right">
+            <p className="text-caption-2 text-gray_r-11 mb-2">Jumlah Produk:</p>
+            <p>{ searchResults.response.numFound }</p>
+          </div>
+        </div>
+
+        <LineDivider />
+
+        <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 untuk brand <span className="font-semibold">{getNameFromSlug(slug)}</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
diff --git a/src2/pages/shop/brands/index.js b/src2/pages/shop/brands/index.js
new file mode 100644
index 00000000..bfdcd403
--- /dev/null
+++ b/src2/pages/shop/brands/index.js
@@ -0,0 +1,79 @@
+import Header from "@/components/layouts/Header";
+import apiOdoo from "@/core/utils/apiOdoo";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useCallback, useEffect, useState } from "react";
+import Spinner from "@/components/elements/Spinner";
+import Layout from "@/components/layouts/Layout";
+import ManufactureCard from "@/components/manufactures/ManufactureCard";
+import Footer from "@/components/layouts/Footer";
+
+export async function getServerSideProps() {
+  let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
+  return {props: {initialManufactures}};
+}
+
+export default function Brands({ initialManufactures }) {
+  const [manufactures, setManufactures] = useState(initialManufactures.manufactures);
+  const [hasMoreManufacture, setHasMoreManufacture] = useState(true);
+  const [manufactureStartwith, setManufactureStartWith] = useState('');
+
+  const alpha = Array.from(Array(26)).map((e, i) => i + 65);
+  const alphabets = alpha.map((x) => String.fromCharCode(x));
+
+  const getMoreManufactures = useCallback(async () => {
+    const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
+    const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`);
+    setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total)
+    setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
+  }, [ manufactureStartwith ]);
+
+  const filterManufactureStartWith = (character) => {
+    setManufactures([]);
+    if (manufactureStartwith == character) {
+      setManufactureStartWith('');
+    } else {
+      setManufactureStartWith(character);
+    }
+  };
+
+  useEffect(() => {
+    getMoreManufactures();
+  }, [ getMoreManufactures ]);
+
+  return (
+    <>
+      <Header title='Semua Brand di Indoteknik' />
+      <Layout>
+        <div className="p-4">
+          <h1>Semua Brand di Indoteknik</h1>
+          <div className="flex overflow-x-auto gap-x-2 py-2">
+            {alphabets.map((alphabet, index) => (
+              <button key={index} className={"p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+                {alphabet}
+              </button>
+            ))}
+          </div>
+          <InfiniteScroll
+            dataLength={manufactures.length}
+            next={getMoreManufactures}
+            hasMore={hasMoreManufacture}
+            className="grid grid-cols-4 gap-4 mt-6 !overflow-x-hidden"
+            loader={
+              <div className="flex justify-center items-center border border-gray-300 p-2 rounded h-14">
+                <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
+              </div>
+            }
+          >
+            {manufactures?.map((manufacture, index) => (
+              manufacture.name ? (
+                <ManufactureCard data={manufacture} key={index} />
+              ) : ''
+            ))}
+          </InfiniteScroll>
+        </div>
+
+        <Footer />
+      </Layout>
+    </>
+  )
+}
\ No newline at end of file