diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-24 15:54:48 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-01-24 15:54:48 +0700 |
| commit | ee4297280c1305c7e03bedd4df63ccf136c28c6c (patch) | |
| tree | 62eb00777f42542a37c63687dd1536f8f56df894 /src/pages/shop/brands.js | |
| parent | 23b31aa10302cc990f3fb083b8189233b2e9e08d (diff) | |
Merapihkan struktur folder
Diffstat (limited to 'src/pages/shop/brands.js')
| -rw-r--r-- | src/pages/shop/brands.js | 79 |
1 files changed, 0 insertions, 79 deletions
diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js deleted file mode 100644 index d82fc31d..00000000 --- a/src/pages/shop/brands.js +++ /dev/null @@ -1,79 +0,0 @@ -import Header from "../../components/Header"; -import apiOdoo from "../../helpers/apiOdoo"; -import InfiniteScroll from "react-infinite-scroll-component"; -import { useEffect, useState } from "react"; -import Spinner from "../../components/Spinner"; -import Layout from "../../components/Layout"; -import ManufactureCard from "../../components/ManufactureCard"; -import Footer from "../../components/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 = 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]); - }; - - 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> - <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 |
