<iman> update side banner & footer banner search

2 files changed, 19 insertions, 13 deletions

diff --git a/src-migrate/modules/footer-banner/index.tsx b/src-migrate/modules/footer-banner/index.tsx
index 7db1363c..c829b91e 100644
--- a/src-migrate/modules/footer-banner/index.tsx
+++ b/src-migrate/modules/footer-banner/index.tsx
@@ -1,7 +1,9 @@
 import Link from "next/link"
+import React, { useMemo } from "react";
 import { useQuery } from "react-query"
 import Image from "~/components/ui/image"
 import { getBanner } from "~/services/banner"
+import { getRandomInt } from '@/utils/getRandomInt'
 
 const FooterBanner = () => {
   const fetchFooterBanner = useQuery({
@@ -9,7 +11,9 @@ const FooterBanner = () => {
     queryFn: () => getBanner({ type: 'bottom-search-promotion' })
   })
 
-  const banner = fetchFooterBanner?.data?.[0] || false
+  const length = useMemo(() => fetchFooterBanner.data?.length, [fetchFooterBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchFooterBanner?.data?.[randomIndex] || false;
 
   return banner && (
     <>
diff --git a/src-migrate/modules/side-banner/index.tsx b/src-migrate/modules/side-banner/index.tsx
index be52c554..80a57a00 100644
--- a/src-migrate/modules/side-banner/index.tsx
+++ b/src-migrate/modules/side-banner/index.tsx
@@ -1,29 +1,31 @@
-import Link from "next/link"
-import { useQuery } from "react-query"
-import Image from "~/components/ui/image"
-import { getBanner } from "~/services/banner"
+import React, { useMemo } from "react";
+import Link from "next/link";
+import { useQuery } from "react-query";
+import Image from "~/components/ui/image";
+import { getBanner } from "~/services/banner";
+import { getRandomInt } from '@/utils/getRandomInt';
 
 const SideBanner = () => {
   const fetchSideBanner = useQuery({
     queryKey: 'sideBanner',
     queryFn: () => getBanner({ type: 'side-banner-search' })
-  })
+  });
 
-  const banner = fetchSideBanner?.data?.[0] || false
+  const length = useMemo(() => fetchSideBanner.data?.length, [fetchSideBanner.data]);
+  const randomIndex = useMemo(() => getRandomInt(length), [length]);
+  const banner = fetchSideBanner?.data?.[randomIndex] || false;
 
   return banner && (
     <>
-      {banner.url && (
+      {banner.url ? (
         <Link href={banner.url}>
           <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
         </Link>
-      )}
-
-      {!banner.url && (
+      ) : (
         <Image src={banner.image} alt={banner.name} width={315} height={450} className='object-cover object-center rounded-lg' />
       )}
     </>
-  )
+  );
 }
 
-export default SideBanner
\ No newline at end of file
+export default SideBanner;