Merged in refactor (pull request #1)

Refactor

1 files changed, 80 insertions, 0 deletions

diff --git a/src/lib/brand/components/Brands.jsx b/src/lib/brand/components/Brands.jsx
new file mode 100644
index 00000000..22f47975
--- /dev/null
+++ b/src/lib/brand/components/Brands.jsx
@@ -0,0 +1,80 @@
+import odooApi from '@/core/api/odooApi'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import { useCallback, useEffect, useState } from 'react'
+import BrandCard from './BrandCard'
+
+const Brands = () => {
+  const alpha = Array.from(Array(26)).map((e, i) => i + 65)
+  const alphabets = alpha.map((x) => String.fromCharCode(x))
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [startWith, setStartWith] = useState(null)
+  const [manufactures, setManufactures] = useState([])
+
+  const loadBrand = useCallback(async () => {
+    setIsLoading(true)
+    const name = startWith ? `${startWith}%` : ''
+    const result = await odooApi(
+      'GET',
+      `/api/v1/manufacture?limit=0&offset=${manufactures.length}&name=${name}`
+    )
+    setIsLoading(false)
+    setManufactures((manufactures) => [...manufactures, ...result.manufactures])
+  }, [startWith])
+
+  const toggleStartWith = (alphabet) => {
+    setManufactures([])
+    if (alphabet == startWith) {
+      setStartWith(null)
+      return
+    }
+    setStartWith(alphabet)
+  }
+
+  useEffect(() => {
+    loadBrand()
+  }, [loadBrand])
+
+  if (isLoading) {
+    return (
+      <div className='flex justify-center my-4'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
+  return (
+    <div className='p-4'>
+      <h1 className='font-semibold'>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' +
+              (startWith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')
+            }
+            type='button'
+            onClick={() => toggleStartWith(alphabet)}
+          >
+            {alphabet}
+          </button>
+        ))}
+      </div>
+
+      <div className='grid grid-cols-4 gap-4 mt-4 !overflow-x-hidden'>
+        {manufactures?.map(
+          (manufacture, index) =>
+            manufacture.name && (
+              <BrandCard
+                brand={manufacture}
+                key={index}
+              />
+            )
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Brands