fix(promotion): handling nullish coaleshing

Author: codebayu

common/components/elements/MultiplePromotion.tsx

@@ -12,9 +12,10 @@ interface MultiplePromotionProps {
 }
 
 export default function MultiplePromotion({ path }: MultiplePromotionProps) {
-  const { data, isLoading } = useSWR('/api/ads/banner', fetcher)
+  const { data, isLoading, error } = useSWR('/api/ads/banner', fetcher)
   if (isLoading) return
-  const banners: IAdsBanner[] = data?.data.filter((item: IAdsBanner) => item.showingOn.includes(path))
+  const banners: IAdsBanner[] = data?.data?.filter((item: IAdsBanner) => item?.showingOn?.includes(path))
+  if (!banners.length || error) return null
   return (
     <div className="mt-6 flex flex-col items-center gap-2">
       {banners?.map((banner: IAdsBanner, index: number) => <AdsBanner key={index} data={banner} />)}

common/components/elements/SinglePromotion.tsx

@@ -13,9 +13,9 @@ interface SinglePromotionProps {
 }
 
 export default function SinglePromotion({ path }: SinglePromotionProps) {
-  const { data, isLoading } = useSWR('/api/ads/banner', fetcher)
+  const { data, isLoading, error } = useSWR('/api/ads/banner', fetcher)
   if (isLoading) return <Skeleton className="h-10 w-72" />
-  const banner: IAdsBanner = data?.data.find((item: IAdsBanner) => item.showingOn.includes(path))
-  console.log(banner)
+  const banner: IAdsBanner = data?.data?.find((item: IAdsBanner) => item?.showingOn?.includes(path))
+  if (!banner || error) return null
   return <AdsBanner data={banner} />
 }