change image on reload

CHANGELOG.md

@@ -12,8 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Created a campaign hero component and other child components for the featured item data. (DR-2464)
 
 ### Update
-
 - Update version of NYPL Reservoir to 2.0.1
+- Updated image in Hero Component to change on reload. (DR-2565)
 
 ### Added
 - Added spider block script (DR-2518)

src/components/hero/campaignHero.tsx

@@ -3,16 +3,19 @@ import imageURL from "../../utils/utils";
 import CampaignHeroSubText from "./campaignHeroSubText";
 import CampaignHeroHeading from "./campaignHeroHeading";
 
-const CampaignHero = () => {
+const CampaignHero = ({ featuredItems }: any) => {
+  const randomIndex = Math.floor(Math.random() * featuredItems.images.length);
+  const imageID = featuredItems.images[randomIndex].split(".")[0];
+
   return (
     <Hero
-      backgroundImageSrc={imageURL("1269908")}
+      backgroundImageSrc={imageURL(imageID)}
       backgroundColor="ui.bg.default"
       heroType="campaign"
       heading={<CampaignHeroHeading />}
       imageProps={{
         alt: "Momoyogusa = Flowers of a Hundred Generations.",
-        src: imageURL("1269908"),
+        src: imageURL(imageID),
       }}
       subHeaderText={<CampaignHeroSubText />}
     />

src/pages/index.tsx

@@ -1,5 +1,10 @@
 import CampaignHero from "../components/hero/campaignHero";
+import featuredItemsData from "../data/featureditems.json";
 
-export default function Home() {
-  return <CampaignHero />;
+export default function Home(props: any) {
+  return <CampaignHero featuredItems={props.featuredItemsData.featuredItems} />;
+}
+
+export async function getServerSideProps() {
+  return { props: { featuredItemsData } };
 }