From 8fad13a3a1097fd591621c06701012812543bebd Mon Sep 17 00:00:00 2001
From: EliasKnudsen <38568225+EliasKnudsen@users.noreply.github.com>
Date: Sat, 13 Apr 2024 16:48:36 +0200
Subject: [PATCH] 274 fix hero url (#281)

* Fix hero thing closing #274

* Prettier
---
 frontend/src/app/page.tsx               |  6 +--
 frontend/src/components/HeroWrapper.tsx | 51 ++++++++++++++++++-------
 2 files changed, 38 insertions(+), 19 deletions(-)

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 5ff61c4..c6f01ac 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -108,11 +108,7 @@ export default async function Home() {
                 </div>
             </ColoredSection>
 
-            <div className="flex flex-col items-center px-8 py-12 text-center">
-                <div className="prose prose-invert">
-                    <HeroWrapper></HeroWrapper>
-                </div>
-            </div>
+            <HeroWrapper></HeroWrapper>
         </>
     );
 }
diff --git a/frontend/src/components/HeroWrapper.tsx b/frontend/src/components/HeroWrapper.tsx
index 30ea1a0..88e983d 100644
--- a/frontend/src/components/HeroWrapper.tsx
+++ b/frontend/src/components/HeroWrapper.tsx
@@ -21,29 +21,52 @@ query Query($publicationState: PublicationState) {
       }
     }
   }`);
-
 export default async function HeroWrapper() {
     const graphqlData = await getClient().query({
         query: GET_HERO_DATA,
     });
 
-    if (graphqlData.data === null || graphqlData.data === undefined) {
-        return <div>There are no projects to show.</div>;
+    // Check if data is available
+    if (
+        !graphqlData.data ||
+        !graphqlData.data.hero ||
+        !graphqlData.data.hero.data
+    ) {
+        return <></>;
+    }
+
+    const heroData = graphqlData.data.hero.data;
+    const heroAttributes = heroData.attributes;
+
+    if (!heroAttributes || !heroAttributes.image?.data) {
+        return <></>;
+    }
+
+    const imageUrl = STRAPI_URL! + heroAttributes.image?.data?.attributes?.url;
+    if (!isValidUrl(imageUrl)) {
+        return <div>Invalid image URL.</div>;
     }
 
     return (
         <>
-            <Hero
-                title={"Hero"}
-                description={
-                    graphqlData.data.hero?.data?.attributes?.text as string
-                }
-                imageUrl={
-                    (STRAPI_URL! +
-                        graphqlData.data.hero?.data?.attributes?.image?.data
-                            ?.attributes?.url) as string
-                }
-            ></Hero>
+            <div className="flex flex-col items-center px-8 py-12 text-center">
+                <div className="prose prose-invert">
+                    <Hero
+                        title="Hero"
+                        description={heroAttributes.text || ""}
+                        imageUrl={imageUrl}
+                    />
+                </div>
+            </div>
         </>
     );
 }
+
+function isValidUrl(urlString: string): boolean {
+    try {
+        new URL(urlString);
+        return true;
+    } catch (e) {
+        return false;
+    }
+}