From e4b241f4e1be865ce5d0b97b12b241422ac739b5 Mon Sep 17 00:00:00 2001
From: kartik-gupta-ij <kartikgupta7267@gmail.com>
Date: Fri, 1 Nov 2024 18:32:52 +0530
Subject: [PATCH 1/2] fix(view-data): Add image content type check for URLs in
 view data page

---
 src/components/Points/PointImage.jsx | 88 +++++++++++++++-------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/components/Points/PointImage.jsx b/src/components/Points/PointImage.jsx
index 1307ea695..4a5a0635f 100644
--- a/src/components/Points/PointImage.jsx
+++ b/src/components/Points/PointImage.jsx
@@ -1,54 +1,58 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Box, CardMedia, Modal, Typography } from '@mui/material';
 
 function PointImage({ data, sx }) {
   const [fullScreenImg, setFullScreenImg] = useState(null);
-  const renderImages = () => {
-    const images = [];
-
-    function isImgUrl(string) {
-      let url;
-      try {
-        url = new URL(string);
-      } catch (_) {
-        return false;
-      }
-      if (url) {
-        return /\.(jpg|jpeg|png|webp|gif|svg)$/.test(url.pathname);
-      }
-      return false;
-    }
+  const [imageUrls, setImageUrls] = useState([]);
 
-    // Loop through the object's properties
-    for (const key in data) {
-      if (typeof data[key] == 'string') {
-        // Check if the value is an image URL
-        if (isImgUrl(data[key])) {
-          images.push(
-            <CardMedia
-              component="img"
-              sx={{
-                width: 150,
-                margin: 'auto',
-                padding: 1,
-                wordWrap: 'break-word',
-                p: 1,
-                border: '1px solid #ccc',
-                borderRadius: '5px',
-                ...sx,
-              }}
-              key={key}
-              image={data[key]}
-              alt={data[key]}
-              onClick={() => setFullScreenImg(data[key])}
-            />
-          );
+  useEffect(() => {
+    const fetchImageUrls = async () => {
+      const urls = [];
+      for (const key in data) {
+        if (typeof data[key] === 'string') {
+          try {
+            const url = new URL(data[key]);
+            if (/\.(jpg|jpeg|png|webp|gif|svg)$/.test(url.pathname)) {
+              urls.push({ key, url: data[key] });
+              continue;
+            }
+            const response = await fetch(url, { method: 'HEAD' });
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.startsWith('image/')) {
+              urls.push({ key, url: data[key] });
+            }
+          } catch (_) {
+            // Ignore invalid URLs
+          }
         }
       }
-    }
+      setImageUrls(urls);
+    };
 
-    return images;
+    fetchImageUrls();
+  }, [data]);
+
+  const renderImages = () => {
+    return imageUrls.map(({ key, url }) => (
+      <CardMedia
+        component="img"
+        sx={{
+          width: 150,
+          margin: 'auto',
+          padding: 1,
+          wordWrap: 'break-word',
+          p: 1,
+          border: '1px solid #ccc',
+          borderRadius: '5px',
+          ...sx,
+        }}
+        key={key}
+        image={url}
+        alt={url}
+        onClick={() => setFullScreenImg(url)}
+      />
+    ));
   };
 
   const images = renderImages();

From 43cf5dceab8cba8868eaa81bdeebef8a8001127b Mon Sep 17 00:00:00 2001
From: kartik-gupta-ij <kartikgupta7267@gmail.com>
Date: Fri, 1 Nov 2024 19:05:42 +0530
Subject: [PATCH 2/2] chore(view-data): Enhance image URL handling with
 Promise.all for concurrent checks  in view data page

---
 src/components/Points/PointImage.jsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/Points/PointImage.jsx b/src/components/Points/PointImage.jsx
index 4a5a0635f..4de6100d2 100644
--- a/src/components/Points/PointImage.jsx
+++ b/src/components/Points/PointImage.jsx
@@ -8,25 +8,26 @@ function PointImage({ data, sx }) {
 
   useEffect(() => {
     const fetchImageUrls = async () => {
-      const urls = [];
-      for (const key in data) {
+      const urlChecks = Object.keys(data).map(async (key) => {
         if (typeof data[key] === 'string') {
           try {
             const url = new URL(data[key]);
             if (/\.(jpg|jpeg|png|webp|gif|svg)$/.test(url.pathname)) {
-              urls.push({ key, url: data[key] });
-              continue;
+              return { key, url: data[key] };
             }
             const response = await fetch(url, { method: 'HEAD' });
             const contentType = response.headers.get('content-type');
             if (contentType && contentType.startsWith('image/')) {
-              urls.push({ key, url: data[key] });
+              return { key, url: data[key] };
             }
           } catch (_) {
             // Ignore invalid URLs
           }
         }
-      }
+        return null;
+      });
+
+      const urls = (await Promise.all(urlChecks)).filter(Boolean);
       setImageUrls(urls);
     };