From 926689e17b413e836eadc63cd574bac014188a08 Mon Sep 17 00:00:00 2001
From: Alessandra Vertrees <alessandravertrees@nypl.org>
Date: Wed, 25 Oct 2023 15:22:35 -0400
Subject: [PATCH] change image on reload

---
 CHANGELOG.md                         | 2 +-
 src/components/hero/campaignHero.tsx | 9 ++++++---
 src/pages/index.tsx                  | 9 +++++++--
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b7861a04..f3fa149c 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/src/components/hero/campaignHero.tsx b/src/components/hero/campaignHero.tsx
index f81e6fc6..2440e909 100644
--- a/src/components/hero/campaignHero.tsx
+++ b/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 />}
     />
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 9c100538..82d25d83 100644
--- a/src/pages/index.tsx
+++ b/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 } };
 }