Refactor

3 files changed, 23 insertions, 257 deletions

diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
deleted file mode 100644
index a387e55d..00000000
--- a/src/pages/shop/brands/[slug].js
+++ /dev/null
@@ -1,178 +0,0 @@
-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/src/pages/shop/brands/[slug].jsx b/src/pages/shop/brands/[slug].jsx
new file mode 100644
index 00000000..4965d4f7
--- /dev/null
+++ b/src/pages/shop/brands/[slug].jsx
@@ -0,0 +1,23 @@
+import BasicLayout from "@/core/components/layouts/BasicLayout"
+import { getIdFromSlug, getNameFromSlug } from "@/core/utils/slug"
+import ProductSearch from "@/lib/product/components/ProductSearch"
+import { useRouter } from "next/router"
+import _ from "lodash"
+import Brand from "@/lib/brand/components/Brand"
+
+export default function BrandDetail() {
+  const router = useRouter()
+  const { slug = '' } = router.query
+  return (
+    <BasicLayout>
+      <Brand id={getIdFromSlug(slug)} />
+      { !_.isEmpty(router.query) && (
+        <ProductSearch
+          query={_.omit(router.query, 'slug')}
+          prefixUrl={`/shop/brands/${slug}`}
+          defaultBrand={getNameFromSlug(slug)}
+        />
+      ) }
+    </BasicLayout>
+  )
+}
\ No newline at end of file
diff --git a/src/pages/shop/brands/index.js b/src/pages/shop/brands/index.js
deleted file mode 100644
index bfdcd403..00000000
--- a/src/pages/shop/brands/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-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