fix: fix issue with crash when missing image (hide employee)

varianter · May 6, 2024 · b126f82 · b126f82
1 parent db9c385
commit b126f82
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/src/employees/index.tsx b/src/employees/index.tsx
@@ -137,6 +137,10 @@ const blurDataUrl =
 export const EmployeeTile = ({
   employee: { name, telephone, email, imageUrl, officeName },
 }: PropsWithChildren<{ employee: EmployeeItem }>) => {
+  if (!imageUrl) {
+    return null;
+  }
+
   return (
     <div
       className={style.employee}

diff --git a/src/employees/types.ts b/src/employees/types.ts
@@ -2,6 +2,6 @@ export type EmployeeItem = {
   name: string;
   email: string;
   telephone: string | null;
-  imageUrl: string;
+  imageUrl: string | null;
   officeName: string;
 };
diff --git a/src/index/index.tsx b/src/index/index.tsx
@@ -297,16 +297,18 @@ const Home = ({ randomEmployee, randomCases, feeds }: HomeProps) => {
       <section className={style.employees}>
         {randomEmployee ? (
           <div className={style.employees__random}>
-            <div className={style.employees__random__image}>
-              <Image
-                width={300}
-                height={300}
-                alt={`Bilde av ${randomEmployee.name}`}
-                src={randomEmployee.imageUrl}
-                loading="lazy"
-                decoding="async"
-              />
-            </div>
+            {randomEmployee.imageUrl && (
+              <div className={style.employees__random__image}>
+                <Image
+                  width={300}
+                  height={300}
+                  alt={`Bilde av ${randomEmployee.name}`}
+                  src={randomEmployee.imageUrl}
+                  loading="lazy"
+                  decoding="async"
+                />
+              </div>
+            )}
 
             <p>Dette er {randomEmployee.name}. En av oss som jobber her.</p>
 

diff --git a/src/jobs/listing/listing.tsx b/src/jobs/listing/listing.tsx
@@ -128,6 +128,10 @@ const Listing: NextPage<InferGetStaticPropsType<typeof getStaticProps>> =
 export const ContactTile = ({
   contact: { name, email, telephone, imageUrl },
 }: PropsWithChildren<{ contact: EmployeeItem }>) => {
+  if (!imageUrl) {
+    return null;
+  }
+
   return (
     <div className={style.contact}>
       <div className={style.contact__img}>
@@ -148,10 +152,7 @@ export const ContactTile = ({
           📬 {email}
         </a>
         {telephone && (
-          <a
-            href={`tel:${telephone}`}
-            className={style.contact__type}
-          >
+          <a href={`tel:${telephone}`} className={style.contact__type}>
             📞 {formatTelephone(telephone)}
           </a>
         )}