From 90493cbe8caf0aad25440f5a2552ac4f0e368414 Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Sun, 14 Apr 2024 03:36:33 +0200
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20:bug:=20Handle=20null=20attrib?=
 =?UTF-8?q?ute=20error=20when=20related=20satelli=E2=80=A6=20(#273)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(frontend): :bug: Handle null attribute error when related satellites do not have image.

* refactor(frontend): :recycle: Run prettier

* fix(frontend): :twisted_rightwards_arrows: Handle merge conflicts from main
---
 frontend/src/app/projects/[projectSlug]/page.tsx         | 7 ++++---
 frontend/src/components/RelatedProjectsAndSatellites.tsx | 9 +++++++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index aab3523..b6d3276 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -84,12 +84,13 @@ export default async function Page({
             <div className="mx-10 mt-4 flex flex-wrap justify-center gap-4 md:justify-start">
                 {graphqlData.data.projects?.data[0].attributes?.satellites?.data.map(
                     (satellite: any) => {
+                        const previewImage =
+                            satellite?.attributes?.previewImage?.data
+                                ?.attributes?.url ?? undefined;
                         const satelliteObject: ProjectOrSatellite = {
                             id: satellite.id,
                             title: satellite.attributes.name,
-                            previewImage:
-                                satellite.attributes.previewImage.data
-                                    .attributes.url,
+                            previewImage: previewImage,
                             slug: satellite.attributes.name,
                             isProject: false,
                         };
diff --git a/frontend/src/components/RelatedProjectsAndSatellites.tsx b/frontend/src/components/RelatedProjectsAndSatellites.tsx
index bac3855..3815383 100644
--- a/frontend/src/components/RelatedProjectsAndSatellites.tsx
+++ b/frontend/src/components/RelatedProjectsAndSatellites.tsx
@@ -8,6 +8,7 @@ import {
     CardHeader,
     CardTitle,
 } from "@/components/shadcn/card";
+import { OuiImage } from "@/components/fullBlogCard";
 
 export default function RelatedProjectsAndSatellites({
     project,
@@ -22,7 +23,7 @@ export default function RelatedProjectsAndSatellites({
 
     return (
         <Link
-            className="m-1 transition-transform duration-300 ease-in-out hover:scale-110 hover:transform sm:m-4"
+            className="m-1 transition-transform duration-200 ease-in-out hover:scale-105 hover:transform sm:m-4"
             href={"/" + projectOrSatellite + "/" + project.slug}
             key={project.id}
         >
@@ -34,7 +35,7 @@ export default function RelatedProjectsAndSatellites({
                 </CardHeader>
                 <CardContent>
                     <div className="h-48">
-                        {previewImage && (
+                        {previewImage ? (
                             <Image
                                 className="max-h-full max-w-full object-contain"
                                 src={previewImage}
@@ -42,6 +43,10 @@ export default function RelatedProjectsAndSatellites({
                                 width={500}
                                 height={0}
                             />
+                        ) : (
+                            <div className="m-0 flex aspect-video max-h-full max-w-full items-center justify-center object-contain">
+                                <OuiImage />
+                            </div>
                         )}
                     </div>
                 </CardContent>