diff --git a/components/campaigns/AnnouncementHero.tsx b/components/campaigns/AnnouncementHero.tsx index 61ffb47b85e..bee864e495c 100644 --- a/components/campaigns/AnnouncementHero.tsx +++ b/components/campaigns/AnnouncementHero.tsx @@ -1,10 +1,10 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useMemo, useState } from 'react'; import ArrowLeft from '../icons/ArrowLeft'; import ArrowRight from '../icons/ArrowRight'; import Container from '../layout/Container'; import Banner from './AnnouncementBanner'; -import { banners } from './banners'; +import { banners, shouldShowBanner } from './banners'; interface IAnnouncementHeroProps { className?: string; @@ -21,15 +21,15 @@ interface IAnnouncementHeroProps { export default function AnnouncementHero({ className = '', small = false }: IAnnouncementHeroProps) { const [activeIndex, setActiveIndex] = useState(0); - const len = banners.length; - const numberOfVisibleBanners = banners.filter((banner) => banner.show).length; + const visibleBanners = useMemo(() => banners.filter((banner) => shouldShowBanner(banner.cfpDeadline)), [banners]); + const numberOfVisibleBanners = visibleBanners.length; const goToPrevious = () => { - setActiveIndex((prevIndex) => (prevIndex === 0 ? len - 1 : prevIndex - 1)); + setActiveIndex((prevIndex) => (prevIndex === 0 ? numberOfVisibleBanners - 1 : prevIndex - 1)); }; const goToNext = () => { - setActiveIndex((prevIndex) => (prevIndex === len - 1 ? 0 : prevIndex + 1)); + setActiveIndex((prevIndex) => (prevIndex === numberOfVisibleBanners - 1 ? 0 : prevIndex + 1)); }; const goToIndex = (index: number) => { @@ -62,31 +62,28 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn )}