Filter by price from and price to, optimize code component filter, fix style brand

1 files changed, 8 insertions, 7 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 8a7b7684..5d93bf4b 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -5,7 +5,7 @@ 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 { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
 
@@ -22,12 +22,13 @@ export default function Brands({ initialManufactures }) {
   const alpha = Array.from(Array(26)).map((e, i) => i + 65);
   const alphabets = alpha.map((x) => String.fromCharCode(x));
 
-  const getMoreManufactures = useCallback(async () => {
+  const getMoreManufactures = async () => {
     const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
+    console.log(manufactures, manufactures.length);
     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([]);
@@ -40,7 +41,7 @@ export default function Brands({ initialManufactures }) {
 
   useEffect(() => {
     getMoreManufactures();
-  }, [getMoreManufactures]);
+  }, [manufactureStartwith]);
 
   return (
     <>
@@ -48,9 +49,9 @@ export default function Brands({ initialManufactures }) {
       <Layout>
         <div className="p-4">
           <h1>Semua Brand di Indoteknik</h1>
-          <div className="flex overflow-x-auto gap-x-4 py-2">
+          <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-300 rounded" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+              <button key={index} className={"p-2 py-1 border bg-white border-gray-300 rounded w-10 flex-shrink-0" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
                 {alphabet}
               </button>
             ))}
@@ -59,7 +60,7 @@ export default function Brands({ initialManufactures }) {
             dataLength={manufactures.length}
             next={getMoreManufactures}
             hasMore={hasMoreManufacture}
-            className="grid grid-cols-3 gap-4 mt-6 !overflow-x-hidden"
+            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"/>