fix(frontend): 🐛 Handle null attribute error when related satelli… (#…

…273) * fix(frontend): 🐛 Handle null attribute error when related satellites do not have image. * refactor(frontend): ♻️ Run prettier * fix(frontend): 🔀 Handle merge conflicts from main
NTNU-SmallSatLab · Apr 14, 2024 · 90493cb · 90493cb
1 parent 1273218
commit 90493cb
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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
@@ -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,14 +35,18 @@ export default function RelatedProjectsAndSatellites({
                 </CardHeader>
                 <CardContent>
                     <div className="h-48">
-                        {previewImage && (
+                        {previewImage ? (
                             <Image
                                 className="max-h-full max-w-full object-contain"
                                 src={previewImage}
                                 alt={previewImage}
                                 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>