From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Feb 2023 17:07:50 +0700 Subject: Refactor --- src/lib/home/api/categoryHomeApi.js | 8 ++++ src/lib/home/api/categoryHomeIdApi.js | 8 ++++ src/lib/home/api/heroBannerApi.js | 8 ++++ src/lib/home/api/popularProductApi.js | 8 ++++ src/lib/home/api/preferredBrandApi.js | 8 ++++ src/lib/home/components/CategoryHome.jsx | 28 ++++++++++++ src/lib/home/components/CategoryHomeId.jsx | 19 ++++++++ src/lib/home/components/HeroBanner.jsx | 50 ++++++++++++++++++++++ src/lib/home/components/PopularProduct.jsx | 24 +++++++++++ src/lib/home/components/PreferredBrand.jsx | 30 +++++++++++++ .../components/Skeleton/PopularProductSkeleton.jsx | 10 +++++ .../components/Skeleton/PreferredBrandSkeleton.jsx | 12 ++++++ src/lib/home/hooks/useCategoryHome.js | 13 ++++++ src/lib/home/hooks/useCategoryHomeId.js | 13 ++++++ src/lib/home/hooks/useHeroBanner.js | 13 ++++++ src/lib/home/hooks/usePopularProduct.js | 13 ++++++ src/lib/home/hooks/usePreferredBrand.js | 13 ++++++ 17 files changed, 278 insertions(+) create mode 100644 src/lib/home/api/categoryHomeApi.js create mode 100644 src/lib/home/api/categoryHomeIdApi.js create mode 100644 src/lib/home/api/heroBannerApi.js create mode 100644 src/lib/home/api/popularProductApi.js create mode 100644 src/lib/home/api/preferredBrandApi.js create mode 100644 src/lib/home/components/CategoryHome.jsx create mode 100644 src/lib/home/components/CategoryHomeId.jsx create mode 100644 src/lib/home/components/HeroBanner.jsx create mode 100644 src/lib/home/components/PopularProduct.jsx create mode 100644 src/lib/home/components/PreferredBrand.jsx create mode 100644 src/lib/home/components/Skeleton/PopularProductSkeleton.jsx create mode 100644 src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx create mode 100644 src/lib/home/hooks/useCategoryHome.js create mode 100644 src/lib/home/hooks/useCategoryHomeId.js create mode 100644 src/lib/home/hooks/useHeroBanner.js create mode 100644 src/lib/home/hooks/usePopularProduct.js create mode 100644 src/lib/home/hooks/usePreferredBrand.js (limited to 'src/lib/home') diff --git a/src/lib/home/api/categoryHomeApi.js b/src/lib/home/api/categoryHomeApi.js new file mode 100644 index 00000000..efb31240 --- /dev/null +++ b/src/lib/home/api/categoryHomeApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const categoryHomeIdApi = async ({ id }) => { + const dataCategoryHomeId = await odooApi('GET', `/api/v1/categories_homepage?id=${id}`) + return dataCategoryHomeId +} + +export default categoryHomeIdApi \ No newline at end of file diff --git a/src/lib/home/api/categoryHomeIdApi.js b/src/lib/home/api/categoryHomeIdApi.js new file mode 100644 index 00000000..d5612195 --- /dev/null +++ b/src/lib/home/api/categoryHomeIdApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const categoryHomeIdApi = async () => { + const dataCategoryHomeIds = await odooApi('GET', '/api/v1/categories_homepage/ids') + return dataCategoryHomeIds +} + +export default categoryHomeIdApi \ No newline at end of file diff --git a/src/lib/home/api/heroBannerApi.js b/src/lib/home/api/heroBannerApi.js new file mode 100644 index 00000000..7ba84bc6 --- /dev/null +++ b/src/lib/home/api/heroBannerApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const heroBannerApi = async () => { + const dataHeroBanners = await odooApi('GET', '/api/v1/banner?type=index-a-1') + return dataHeroBanners +} + +export default heroBannerApi \ No newline at end of file diff --git a/src/lib/home/api/popularProductApi.js b/src/lib/home/api/popularProductApi.js new file mode 100644 index 00000000..d7adca83 --- /dev/null +++ b/src/lib/home/api/popularProductApi.js @@ -0,0 +1,8 @@ +import axios from "axios" + +const popularProductApi = async () => { + const dataPopularProducts = await axios(`${process.env.SELF_HOST}/api/shop/search?q=*&page=1&orderBy=popular`) + return dataPopularProducts.data.response +} + +export default popularProductApi \ No newline at end of file diff --git a/src/lib/home/api/preferredBrandApi.js b/src/lib/home/api/preferredBrandApi.js new file mode 100644 index 00000000..f289f387 --- /dev/null +++ b/src/lib/home/api/preferredBrandApi.js @@ -0,0 +1,8 @@ +import odooApi from "@/core/api/odooApi" + +const preferredBrandApi = async () => { + const dataPreferredBrands = await odooApi('GET', '/api/v1/manufacture?level=prioritas') + return dataPreferredBrands +} + +export default preferredBrandApi \ No newline at end of file diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx new file mode 100644 index 00000000..0bca9846 --- /dev/null +++ b/src/lib/home/components/CategoryHome.jsx @@ -0,0 +1,28 @@ +import ProductSlider from "@/lib/product/components/ProductSlider" +import useCategoryHome from "../hooks/useCategoryHome" +import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton" + +const CategoryHome = ({ id }) => { + const { categoryHome } = useCategoryHome({ id }) + + return ( +
+ { categoryHome.data ? ( + + ) : } +
+ ) +} + +export default CategoryHome \ No newline at end of file diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx new file mode 100644 index 00000000..4cbbd1fc --- /dev/null +++ b/src/lib/home/components/CategoryHomeId.jsx @@ -0,0 +1,19 @@ +import { LazyLoadComponent } from "react-lazy-load-image-component" +import useCategoryHomeId from "../hooks/useCategoryHomeId" +import CategoryHome from "./CategoryHome" + +const CategoryHomeId = () => { + const { categoryHomeIds } = useCategoryHomeId() + + return ( +
+ { categoryHomeIds.data?.map((id) => ( + + + + )) } +
+ ) +} + +export default CategoryHomeId \ No newline at end of file diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx new file mode 100644 index 00000000..604ca8ac --- /dev/null +++ b/src/lib/home/components/HeroBanner.jsx @@ -0,0 +1,50 @@ +import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton" +import useHeroBanner from "../hooks/useHeroBanner" +import Image from "@/core/components/elements/Image/Image" + +// Swiper +import { Swiper, SwiperSlide } from "swiper/react" +import { Pagination, Autoplay } from "swiper" +import "swiper/css" +import "swiper/css/pagination" +import "swiper/css/autoplay" + +const swiperBanner = { + pagination: { dynamicBullets: true }, + autoplay: { + delay: 6000, + disableOnInteraction: false + }, + modules: [Pagination, Autoplay] +} + +const HeroBanner = () => { + const { heroBanners } = useHeroBanner() + + return ( +
+ { heroBanners.isLoading && } + { !heroBanners.isLoading && ( + + { heroBanners.data?.map((banner, index) => ( + + {banner.name} + + )) } + + ) } +
+ ) +} + +export default HeroBanner \ No newline at end of file diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx new file mode 100644 index 00000000..87e47218 --- /dev/null +++ b/src/lib/home/components/PopularProduct.jsx @@ -0,0 +1,24 @@ +import { Swiper, SwiperSlide } from "swiper/react" +import usePopularProduct from "../hooks/usePopularProduct" +import ProductCard from "@/lib/product/components/ProductCard" +import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton" +import ProductSlider from "@/lib/product/components/ProductSlider" + +const PopularProduct = () => { + const { popularProducts } = usePopularProduct() + + return ( +
+
Produk Populer
+ { popularProducts.isLoading && } + { !popularProducts.isLoading && ( + + ) } +
+ ) +} + +export default PopularProduct \ No newline at end of file diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx new file mode 100644 index 00000000..3d3b1b69 --- /dev/null +++ b/src/lib/home/components/PreferredBrand.jsx @@ -0,0 +1,30 @@ +import { Swiper, SwiperSlide } from "swiper/react" +import usePreferredBrand from "../hooks/usePreferredBrand" +import PreferredBrandSkeleton from "./Skeleton/PreferredBrandSkeleton" +import BrandCard from "@/lib/brand/components/BrandCard" + +const PreferredBrand = () => { + const { preferredBrands } = usePreferredBrand() + + return ( +
+
Brand Pilihan
+ { preferredBrands.isLoading && } + { !preferredBrands.isLoading && ( + + { preferredBrands.data?.manufactures.map((brand) => ( + + + + )) } + + ) } +
+ ) +} + +export default PreferredBrand \ No newline at end of file diff --git a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx new file mode 100644 index 00000000..c5b0fcaa --- /dev/null +++ b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx @@ -0,0 +1,10 @@ +import ProductCardSkeleton from "@/core/components/elements/Skeleton/ProductCardSkeleton" + +const PopularProductSkeleton = () => ( +
+ + +
+) + +export default PopularProductSkeleton \ No newline at end of file diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx new file mode 100644 index 00000000..6bdd3c82 --- /dev/null +++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx @@ -0,0 +1,12 @@ +import BrandSkeleton from "@/core/components/elements/Skeleton/BrandSkeleton" + +const PreferredBrandSkeleton = () => ( +
+ + + + +
+) + +export default PreferredBrandSkeleton \ No newline at end of file diff --git a/src/lib/home/hooks/useCategoryHome.js b/src/lib/home/hooks/useCategoryHome.js new file mode 100644 index 00000000..14ef2a0f --- /dev/null +++ b/src/lib/home/hooks/useCategoryHome.js @@ -0,0 +1,13 @@ +import categoryHomeApi from "../api/categoryHomeApi" +import { useQuery } from "react-query" + +const useCategoryHome = ({ id }) => { + const fetchCategoryHome = async () => await categoryHomeApi({ id }) + const { isLoading, data } = useQuery(`categoryHome-${id}`, fetchCategoryHome) + + return { + categoryHome: { data, isLoading } + } +} + +export default useCategoryHome \ No newline at end of file diff --git a/src/lib/home/hooks/useCategoryHomeId.js b/src/lib/home/hooks/useCategoryHomeId.js new file mode 100644 index 00000000..bb61b655 --- /dev/null +++ b/src/lib/home/hooks/useCategoryHomeId.js @@ -0,0 +1,13 @@ +import categoryHomeIdApi from "../api/categoryHomeIdApi" +import { useQuery } from "react-query" + +const useCategoryHomeId = () => { + const fetchCategoryHomeId = async () => await categoryHomeIdApi() + const { isLoading, data } = useQuery("categoryHomeId", fetchCategoryHomeId) + + return { + categoryHomeIds: { data, isLoading } + } +} + +export default useCategoryHomeId \ No newline at end of file diff --git a/src/lib/home/hooks/useHeroBanner.js b/src/lib/home/hooks/useHeroBanner.js new file mode 100644 index 00000000..a15dda60 --- /dev/null +++ b/src/lib/home/hooks/useHeroBanner.js @@ -0,0 +1,13 @@ +import heroBannerApi from "../api/heroBannerApi" +import { useQuery } from "react-query" + +const useHeroBanner = () => { + const fetchHeroBanner = async () => await heroBannerApi() + const { isLoading, data } = useQuery("heroBanner", fetchHeroBanner) + + return { + heroBanners: { data, isLoading } + } +} + +export default useHeroBanner \ No newline at end of file diff --git a/src/lib/home/hooks/usePopularProduct.js b/src/lib/home/hooks/usePopularProduct.js new file mode 100644 index 00000000..f69c2f71 --- /dev/null +++ b/src/lib/home/hooks/usePopularProduct.js @@ -0,0 +1,13 @@ +import popularProductApi from "../api/popularProductApi" +import { useQuery } from "react-query" + +const usePopularProduct = () => { + const fetchPopularProduct = async () => await popularProductApi() + const { data, isLoading } = useQuery('popularProduct', fetchPopularProduct) + + return { + popularProducts: { data, isLoading } + } +} + +export default usePopularProduct \ No newline at end of file diff --git a/src/lib/home/hooks/usePreferredBrand.js b/src/lib/home/hooks/usePreferredBrand.js new file mode 100644 index 00000000..4be9793e --- /dev/null +++ b/src/lib/home/hooks/usePreferredBrand.js @@ -0,0 +1,13 @@ +import preferredBrandApi from "../api/preferredBrandApi" +import { useQuery } from "react-query" + +const usePreferredBrand = () => { + const fetchPreferredBrand = async () => await preferredBrandApi() + const { data, isLoading } = useQuery('preferredBrand', fetchPreferredBrand) + + return { + preferredBrands: { data, isLoading } + } +} + +export default usePreferredBrand \ No newline at end of file -- cgit v1.2.3