Merge branch 'new-release' into Feature/pengajuan-tempo

2 files changed, 69 insertions, 37 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 64838b85..2eea5915 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -6,7 +6,7 @@ import 'swiper/css/pagination';
 import { Swiper, SwiperSlide } from 'swiper/react';
 
 import Image from 'next/image';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 
 import { bannerApi } from '@/api/bannerApi';
@@ -27,7 +27,20 @@ const swiperBanner = {
 };
 
 const HeroBanner = () => {
-  const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }));
+  // const heroBanner = useQuery('heroBanner', bannerApi({ type: 'index-a-1' }));
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    const fetchData = async () => {
+      const res = await fetch(`/api/hero-banner?type=index-a-1`);
+      const { data } = await res.json();
+      if (data) {
+        setData(data);
+      }
+    };
+
+    fetchData();
+  }, []);
+  const heroBanner = data;
 
   const swiperBannerMobile = {
     ...swiperBanner,
@@ -44,9 +57,9 @@ const HeroBanner = () => {
   };
 
   const BannerComponent = useMemo(() => {
-    if (!heroBanner.data) return null;
+    if (!heroBanner) return null;
 
-    return heroBanner.data.map((banner, index) => (
+    return heroBanner.map((banner, index) => (
       <SwiperSlide key={index}>
         <Link href={banner.url} className='w-full h-auto'>
           <Image
@@ -56,22 +69,22 @@ const HeroBanner = () => {
             width={1152}
             height={768}
             className='w-full h-auto'
-            priority={index === 0} 
-            loading={index === 0 ? 'eager' : 'lazy'} 
-            placeholder="blur" 
-            blurDataURL="/images/indoteknik-placeholder.png" 
-            sizes="(max-width: 768px) 100vw, 50vw" 
+            priority={index === 0}
+            loading={index === 0 ? 'eager' : 'lazy'}
+            placeholder='blur'
+            blurDataURL='/images/indoteknik-placeholder.png'
+            sizes='(max-width: 768px) 100vw, 50vw'
           />
         </Link>
       </SwiperSlide>
     ));
-  }, [heroBanner.data]);
+  }, [heroBanner]);
 
   return (
     <>
       <MobileView>
         <SmoothRender
-          isLoaded={heroBanner.data?.length > 0}
+          isLoaded={heroBanner?.length > 0}
           height='68vw'
           duration='750ms'
           delay='100ms'
@@ -81,7 +94,7 @@ const HeroBanner = () => {
       </MobileView>
 
       <DesktopView>
-        {heroBanner.data?.length > 0 && (
+        {heroBanner?.length > 0 && (
           <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
         )}
       </DesktopView>
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index a7b32a4a..6074c9a6 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -1,39 +1,58 @@
-import Link from '@/core/components/elements/Link/Link'
-import { getRandomInt } from '@/utils/getRandomInt'
-import Image from 'next/image'
-import { useMemo } from 'react'
-import { useQuery } from 'react-query'
-import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
-import { bannerApi } from '@/api/bannerApi'
+import Link from '@/core/components/elements/Link/Link';
+import { getRandomInt } from '@/utils/getRandomInt';
+import Image from 'next/image';
+import { useMemo, useEffect, useState } from 'react';
+import { useQuery } from 'react-query';
+import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton';
+import { bannerApi } from '@/api/bannerApi';
 
 const HeroBannerSecondary = () => {
-  const heroBannerSecondary = useQuery('heroBannerSecondary', bannerApi({ type: 'index-a-2' }))
+  const [heroBannerSecondary, setHeroBannerSecondary] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  // const heroBannerSecondary = useQuery(
+  //   'heroBannerSecondary',
+  //   bannerApi({ type: 'index-a-2' })
+  // );
 
-  const randomIndex = useMemo(() => {
-    if (!heroBannerSecondary.data) return null
-    const length = heroBannerSecondary.data?.length
-    return getRandomInt(length)
-  }, [heroBannerSecondary.data])
+  useEffect(() => {
+    const fetchData = async () => {
+      setIsLoading(true);
+      const res = await fetch(`/api/hero-banner?type=index-a-2`);
+      const { data } = await res.json();
+      if (data) {
+        setHeroBannerSecondary(data);
+      }
+      setIsLoading(false);
+    };
+
+    fetchData();
+  }, []);
 
-  if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton />
+  const randomIndex = useMemo(() => {
+    if (!heroBannerSecondary) return null;
+    const length = heroBannerSecondary?.length;
+    return getRandomInt(length);
+  }, [heroBannerSecondary]);
+  if (isLoading) return <HeroBannerSkeleton />;
 
   return (
-    heroBannerSecondary.data && randomIndex !== null && (
-      <Link href={heroBannerSecondary.data[randomIndex].url} className="h-full">
+    heroBannerSecondary &&
+    randomIndex !== null && (
+      <Link href={heroBannerSecondary[randomIndex]?.url} className='h-full'>
         <Image
-          src={heroBannerSecondary.data[randomIndex].image}
+          src={heroBannerSecondary[randomIndex]?.image}
           width={512}
           height={1024}
-          alt={heroBannerSecondary.data[randomIndex].name}
-          className="object-cover object-center h-full"
-          loading="lazy" 
-          placeholder="blur" 
-          blurDataURL="/images/indoteknik-placeholder.png" 
-          sizes="(max-width: 768px) 100vw, 50vw" 
+          alt={heroBannerSecondary[randomIndex]?.name}
+          className='object-cover object-center h-full'
+          loading='lazy'
+          placeholder='blur'
+          blurDataURL='/images/indoteknik-placeholder.png'
+          sizes='(max-width: 768px) 100vw, 50vw'
         />
       </Link>
     )
   );
-}
+};
 
-export default HeroBannerSecondary
+export default HeroBannerSecondary;