Brand with startwith

1 files changed, 35 insertions, 5 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index a473db15..5b49c922 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -5,9 +5,11 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 import Link from "../../components/Link";
 import { createSlug } from "../../helpers/slug";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
 
 export async function getServerSideProps() {
   let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
@@ -17,23 +19,51 @@ export async function getServerSideProps() {
 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 = async () => {
-    const result = await apiOdoo('GET', `/api/v1/manufacture?limit=31&offset=${manufactures.length}`);
-    if (manufactures.length + 30 >= result.manufacture_total) setHasMoreManufacture(false);
+    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]);
   };
+
+  const filterManufactureStartWith = (character) => {
+    setManufactures([]);
+    if (manufactureStartwith == character) {
+      setManufactureStartWith('');
+    } else {
+      setManufactureStartWith(character);
+    }
+  };
+
+  useEffect(() => {
+    getMoreManufactures();
+  }, [manufactureStartwith]);
+
   return (
     <>
       <Header title='Semua Brand di Indoteknik' />
       <Layout>
         <div className="p-4">
-          <h1>Semua Brand di Indoteknik</h1>
+          <h1 className="mb-2">Semua Brand di Indoteknik</h1>
+          <Swiper slidesPerView={10} freeMode={true}>
+            {alphabets.map((alphabet, index) => (
+              <SwiperSlide key={index}>
+                <button className={"p-2 py-1 border border-gray-300 rounded" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+                  {alphabet}
+                </button>
+              </SwiperSlide>
+            ))}
+          </Swiper>
           <InfiniteScroll
             dataLength={manufactures.length}
             next={getMoreManufactures}
             hasMore={hasMoreManufacture}
-            className="grid grid-cols-3 gap-4 mt-4 !overflow-x-hidden"
+            className="grid grid-cols-3 gap-4 mt-8 !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"/>