Refactoring hero banner feature

1 files changed, 5 insertions, 20 deletions

diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index d83bc990..ea4949b2 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -5,17 +5,15 @@ import MobileView from '@/core/components/views/MobileView'
 import DesktopView from '@/core/components/views/DesktopView'
 import { useRef } from 'react'
 import Seo from '@/core/components/Seo'
-import { useQuery } from 'react-query'
-import odooApi from '@/core/api/odooApi'
-import Image from 'next/image'
 import DelayRender from '@/core/components/elements/DelayRender/DelayRender'
-import Link from '@/core/components/elements/Link/Link'
+import HeroBannerSecondary from '@/components/ui/HeroBannerSecondary'
+import { HeroBannerSkeleton } from '@/components/skeleton/BannerSkeleton'
 
 const BasicLayout = dynamic(() => import('@/core/components/layouts/BasicLayout'))
 const FlashSale = dynamic(() => import('@/lib/flashSale/components/FlashSale'))
 const BannerSection = dynamic(() => import('@/lib/home/components/BannerSection'))
-const HeroBanner = dynamic(() => import('@/lib/home/components/HeroBanner'), {
-  loading: () => <ImageSkeleton />
+const HeroBanner = dynamic(() => import('@/components/ui/HeroBanner'), {
+  loading: () => <HeroBannerSkeleton />
 })
 const PreferredBrand = dynamic(() => import('@/lib/home/components/PreferredBrand'), {
   loading: () => <PopularProductSkeleton />
@@ -29,9 +27,6 @@ const CategoryHomeId = dynamic(() => import('@/lib/home/components/CategoryHomeI
 const CustomerReviews = dynamic(() => import('@/lib/review/components/CustomerReviews'))
 
 export default function Home() {
-  const fetchSecondHeroBanner = async () => await odooApi('GET', '/api/v1/banner?type=index-a-2')
-  const secondHeroBanner = useQuery('secondHeroBanner', fetchSecondHeroBanner)
-
   const bannerRef = useRef(null)
   const wrapperRef = useRef(null)
 
@@ -58,17 +53,7 @@ export default function Home() {
         <div className='container mx-auto'>
           <div className='flex h-[360px]' ref={wrapperRef} onLoad={handleOnLoad}>
             <div className='w-2/12'>
-              {secondHeroBanner.isFetched && (
-                <Link href={secondHeroBanner.data[0].url}>
-                  <Image
-                    src={secondHeroBanner.data[0].image}
-                    width={512}
-                    height={1024}
-                    alt={secondHeroBanner.data[0].name}
-                    className='object-cover object-center h-full'
-                  />
-                </Link>
-              )}
+              <HeroBannerSecondary />
             </div>
             <div className='w-7/12 px-1' ref={bannerRef}>
               <HeroBanner />