Merapihkan struktur folder

2 files changed, 87 insertions, 8 deletions

diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js
index 8e67ef1e..928da0d0 100644
--- a/src/pages/shop/brands/[slug].js
+++ b/src/pages/shop/brands/[slug].js
@@ -1,13 +1,13 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
-import Filter from "../../../components/Filter";
-import Footer from "../../../components/Footer";
-import Header from "../../../components/Header";
-import Layout from "../../../components/Layout";
-import Pagination from "../../../components/Pagination";
-import ProductCard from "../../../components/ProductCard";
-import { getNameFromSlug } from "../../../helpers/slug";
-import FilterIcon from "../../../icons/filter.svg";
+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 { getNameFromSlug } from "@/core/utils/slug";
+import FilterIcon from "@/icons/filter.svg";
 
 export async function getServerSideProps(context) {
   const { 
diff --git a/src/pages/shop/brands/index.js b/src/pages/shop/brands/index.js
new file mode 100644
index 00000000..fec2405a
--- /dev/null
+++ b/src/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 { 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 = 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