From cd01ba82733062db99075ad7690bdb52fb85745a Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 3 Feb 2023 17:03:45 +0700
Subject: no message

---
 src/components/products/ProductCategories.js | 56 ++++++++++++++++++++++++++++
 src/components/products/ProductSimilar.js    | 25 +++++++++++++
 2 files changed, 81 insertions(+)
 create mode 100644 src/components/products/ProductCategories.js
 create mode 100644 src/components/products/ProductSimilar.js

(limited to 'src/components/products')

diff --git a/src/components/products/ProductCategories.js b/src/components/products/ProductCategories.js
new file mode 100644
index 00000000..dc1325b7
--- /dev/null
+++ b/src/components/products/ProductCategories.js
@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import ProductSlider from "./ProductSlider";
+import apiOdoo from "@/core/utils/apiOdoo";
+import { LazyLoadComponent } from "react-lazy-load-image-component";
+import { SkeletonProduct } from "../elements/Skeleton";
+
+const ProductCategory = ({ id }) => {
+  const [ content, setContent ] = useState(null);
+  
+  useEffect(() => {
+    const loadContent = async () => {
+      if (!content) {
+        const dataContent = await apiOdoo('GET', `/api/v1/categories_homepage?id=${id}`);
+        setContent(dataContent[0]);
+      }
+    }
+    loadContent();
+  }, [id, content]);
+  
+  return (
+    <div className="my-6 px-4 pt-4 relative">
+      { content ? (
+        <ProductSlider 
+          products={{
+            products: content.products,
+            banner: {
+              image: content.image,
+              name: content.name,
+              url: `/shop/search?category=${content.name}`
+            }
+          }} 
+          simpleProductTitleLine
+          bannerMode
+        />
+      ) : <SkeletonProduct /> }
+    </div>
+  );
+}
+
+export default function ProductCategories() {
+  const [ contentIds, setContentIds ] = useState([]);
+
+  useEffect(() => {
+    const getContentIds = async () => {
+      const dataContentIds = await apiOdoo('GET', '/api/v1/categories_homepage/ids');
+      setContentIds(dataContentIds);
+    }
+    getContentIds();
+  }, []);
+
+  return contentIds.map((contentId) => (
+    <LazyLoadComponent key={contentId}>
+      <ProductCategory id={contentId} />
+    </LazyLoadComponent>
+  )); 
+}
\ No newline at end of file
diff --git a/src/components/products/ProductSimilar.js b/src/components/products/ProductSimilar.js
new file mode 100644
index 00000000..9e2292cb
--- /dev/null
+++ b/src/components/products/ProductSimilar.js
@@ -0,0 +1,25 @@
+import apiOdoo from '@/core/utils/apiOdoo';
+import { useEffect, useState } from 'react';
+import ProductSlider from './ProductSlider';
+
+export default function ProductSimilar({ productId }) {
+  const [similarProducts, setSimilarProducts] = useState(null);
+
+  useEffect(() => {
+    const getSimilarProducts = async () => {
+      if (productId && !similarProducts) {
+        const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${productId}/similar?limit=20`);
+        setSimilarProducts(dataSimilarProducts);
+      }
+    }
+    getSimilarProducts();
+  }, [productId, similarProducts]);
+
+
+  return (
+    <div className="p-4">
+      <h2 className="font-bold mb-4">Kamu Mungkin Juga Suka</h2>
+      <ProductSlider products={similarProducts}/>
+    </div>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3