Merge pull request #27 from handong-app/junglesub/fix/notfound-images

Hide unknown data (images)

.env.example

@@ -4,5 +4,10 @@ DB_USERNAME=
 DB_PASSWORD=
 DB_CLASSNAME=
 
+OAUTH_GOOGLE_CLIENT_ID=
+OAUTH_GOOGLE_CLIENT_SECRET=
+
 FB_CONFIG_PATH=
-FB_BUCKET=
+FB_BUCKET=
+
+TOKEN_KEY=

src/main/front/src/components/FeedCardGallery.jsx

@@ -1,13 +1,13 @@
-
 import "./FeedCardGallery.css";
 import { getExtensionFromUrl, isImage, isVideo } from "../tools/tools";
 
 const FeedCardGallery = ({ images = [] }) => {
-  if (images.length === 0) return <></>;
+  const filteredImages = images.filter((url) => isImage(url) || isVideo(url));
+  if (filteredImages.length === 0) return <></>;
   return (
     <div className="FeedCardGallery">
-      <div className={`post-images images-${images.length}`}>
-        {images.slice(0, 3).map((url, index) =>
+      <div className={`post-images images-${filteredImages.length}`}>
+        {filteredImages.slice(0, 3).map((url, index) =>
           isImage(url) ? (
             <img key={index} src={url} alt={`${index + 1}`} loading="lazy" />
           ) : isVideo(url) ? (
@@ -19,9 +19,9 @@ const FeedCardGallery = ({ images = [] }) => {
             <>Unknown Data</>
           )
         )}
-        {images.length >= 4 && (
+        {filteredImages.length >= 4 && (
           <div className="more-images-overlay">
-            {images.length > 5 && <span>+{images.length - 4}</span>}
+            {filteredImages.length > 5 && <span>+{images.length - 4}</span>}
             <img key={1} src={images[3]} alt={`4`} loading="lazy" />
           </div>
         )}