From b3fcb5cbe58c414cf635156db32f405a27eabe1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?No=C3=A9=20Terrier?= <noeterrier@proton.me>
Date: Sun, 24 Mar 2024 17:30:35 +0100
Subject: [PATCH] fix: gallery without images return nothing

---
 app/src/components/Gallery.tsx | 64 ++++++++++++++++++----------------
 1 file changed, 33 insertions(+), 31 deletions(-)

diff --git a/app/src/components/Gallery.tsx b/app/src/components/Gallery.tsx
index 2867682..189814b 100644
--- a/app/src/components/Gallery.tsx
+++ b/app/src/components/Gallery.tsx
@@ -11,41 +11,43 @@ export default function Gallery({
   imgs?: (string | components["schemas"]["Files"])[] | null;
   limit: number;
 }) {
-  if (imgs) {
-    imgs = imgs.slice(0, limit);
-
-    var content: any = [];
+  if (imgs == null) {
+    return;
+  }
 
-    var count_5 = 0;
-    var count_3 = 0;
-    imgs.map((img) => {
-      var is_long_5 = Math.random() > 0.5 && count_5 < 4;
-      count_5 += is_long_5 ? 2 : 1;
-      count_5 %= 5;
+  imgs = imgs.slice(0, limit);
 
-      var is_long_3 = Math.random() > 0.5 && count_3 < 2;
-      count_3 += is_long_3 ? 2 : 1;
-      count_3 %= 3;
+  var content: any = [];
 
-      content.push(
-        <DirectusImage
-          img={img}
-          name={"gallery image"}
-          cover={true}
-          className={`${styles.image} ${is_long_3 ? styles.long_3 : ""} ${
-            is_long_5 ? styles.long_5 : ""
-          }`}
-        />
-      );
-    });
+  var count_5 = 0;
+  var count_3 = 0;
+  imgs.map((img) => {
+    var is_long_5 = Math.random() > 0.5 && count_5 < 4;
+    count_5 += is_long_5 ? 2 : 1;
+    count_5 %= 5;
 
-    var router = useRouter();
+    var is_long_3 = Math.random() > 0.5 && count_3 < 2;
+    count_3 += is_long_3 ? 2 : 1;
+    count_3 %= 3;
 
-    return (
-      <div className={styles.main}>
-        <h1>{translate("gallery", router.locale)}</h1>
-        <div className={styles.gallery}>{content}</div>
-      </div>
+    content.push(
+      <DirectusImage
+        img={img}
+        name={"gallery image"}
+        cover={true}
+        className={`
+            ${styles.image} 
+            ${is_long_3 ? styles.long_3 : ""} 
+            ${is_long_5 ? styles.long_5 : ""}
+          `}
+      />
     );
-  }
+  });
+
+  return (
+    <div className={styles.main}>
+      <h1>{translate("gallery", useRouter().locale)}</h1>
+      <div className={styles.gallery}>{content}</div>
+    </div>
+  );
 }