Changes in Image gallery and integrating singnalR.

src/pages/Gallary/ImageGallary.jsx

@@ -1,4 +1,3 @@
-// ImageGallery.js
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
 import { ImageGalleryAPI } from "./ImageGalleryAPI";
@@ -7,10 +6,15 @@ import { useSelector } from "react-redux";
 import { useModal } from "./ModalContext";
 import ImagePop from "./ImagePop";
 import Avatar from "../../components/common/Avatar";
-import DateRangePicker from "../../components/common/DateRangePicker"; // Assuming this is the path to your DateRangePicker
+import DateRangePicker from "../../components/common/DateRangePicker";
+import eventBus from "../../services/eventBus";
+
+const PAGE_SIZE = 10;
 
 const ImageGallery = () => {
   const [images, setImages] = useState([]);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
   const { openModal } = useModal();
 
@@ -51,10 +55,12 @@ const ImageGallery = () => {
   const [isFilterPanelOpen, setIsFilterPanelOpen] = useState(false);
   const [hoveredImage, setHoveredImage] = useState(null);
   const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
 
   const imageGroupRefs = useRef({});
   const filterPanelRef = useRef(null);
   const filterButtonRef = useRef(null);
+  const loaderRef = useRef(null);
 
   useEffect(() => {
     const handleClickOutside = (event) => {
@@ -67,7 +73,6 @@ const ImageGallery = () => {
         setIsFilterPanelOpen(false);
       }
     };
-
     document.addEventListener("mousedown", handleClickOutside);
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
@@ -78,48 +83,120 @@ const ImageGallery = () => {
     if (!selectedProjectId) {
       setImages([]);
       setLoading(false);
+      setHasMore(false);
       return;
     }
 
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
     setLoading(true);
 
-    ImageGalleryAPI.ImagesGet(selectedProjectId, appliedFilters)
+    fetchImages(1, appliedFilters);
-      .then((res) => {
-        setImages(res.data);
-      })
-      .catch((err) => {
-        console.error("Error fetching images:", err);
-        setImages([]);
-      })
-      .finally(() => {
-        setLoading(false);
-      });
   }, [selectedProjectId, appliedFilters]);
 
-  const getUniqueValuesWithIds = useCallback(
+  // ✅ 1. Define fetchImages first
-    (idKey, nameKey) => {
+  const fetchImages = useCallback(async (page, filters) => {
-      const uniqueMap = new Map();
+    if (!selectedProjectId) return;
-      images.forEach((img) => {
+
-        if (img[idKey] && img[nameKey]) {
+    try {
-          uniqueMap.set(img[idKey], img[nameKey]);
+      if (page === 1) setLoading(true);
-        }
+      else setLoadingMore(true);
+
+      const res = await ImageGalleryAPI.ImagesGet(selectedProjectId, filters, page, PAGE_SIZE);
+      const newBatches = res.data || [];
+      const receivedCount = newBatches.length;
+
+      setImages((prevImages) => {
+        const uniqueNew = newBatches.filter(
+          (batch) => !prevImages.some((prev) => prev.batchId === batch.batchId)
+        );
+        return [...prevImages, ...uniqueNew];
       });
-      return Array.from(uniqueMap.entries());
+
-    },
+      setHasMore(receivedCount === PAGE_SIZE);
-    [images]
+    } catch (err) {
-  );
+      console.error("Error fetching images:", err);
+      setImages([]);
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
+  // ✅ 2. THEN use fetchImages inside useEffect
+  useEffect(() => {
+    const handleExternalEvent = (data) => {
+      if (selectedProjectId == data.projectId) {
+        setImages([]);
+        setPageNumber(1);
+        setHasMore(true);
+        fetchImages(1, appliedFilters); // Now safe
+      }
+    };
+
+    eventBus.on("image_gallery", handleExternalEvent);
+
+    return () => {
+      eventBus.off("image_gallery", handleExternalEvent);
+    };
+  }, [appliedFilters, fetchImages,selectedProjectId]);
+
+  useEffect(() => {
+    if (!loaderRef.current) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingMore && !loading) {
+          setPageNumber((prevPageNumber) => prevPageNumber + 1);
+        }
+      },
+      {
+        root: null,
+        rootMargin: "200px",
+        threshold: 0.1,
+      }
+    );
+
+    observer.observe(loaderRef.current);
+
+    return () => {
+      if (loaderRef.current) {
+        observer.unobserve(loaderRef.current);
+      }
+    };
+  }, [hasMore, loadingMore, loading]);
+
+  useEffect(() => {
+    if (pageNumber > 1) {
+      fetchImages(pageNumber, appliedFilters);
+    }
+  }, [pageNumber, fetchImages, appliedFilters]);
+
+  const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = images) => {
+    const map = new Map();
+    dataArray.forEach(batch => {
+      const id = batch[idKey];
+      const name = batch[nameKey];
+      if (id && name && !map.has(id)) {
+        map.set(id, name);
+      }
+    });
+    return Array.from(map.entries());
+  }, [images]);
 
   const getUniqueUploadedByUsers = useCallback(() => {
     const uniqueUsersMap = new Map();
-    images.forEach((img) => {
+    images.forEach(batch => {
-      if (img.uploadedBy && img.uploadedBy.id) {
+      batch.documents.forEach(doc => {
-        const fullName = `${img.uploadedBy.firstName || ""} ${
+        if (doc.uploadedBy && doc.uploadedBy.id) {
-          img.uploadedBy.lastName || ""
+          const fullName = `${doc.uploadedBy.firstName || ""} ${doc.uploadedBy.lastName || ""}`.trim();
-        }`.trim();
+          if (fullName) {
-        if (fullName) {
+            uniqueUsersMap.set(doc.uploadedBy.id, fullName);
-          uniqueUsersMap.set(img.uploadedBy.id, fullName);
+          }
         }
-      }
+      });
     });
     return Array.from(uniqueUsersMap.entries());
   }, [images]);
@@ -193,6 +270,9 @@ const ImageGallery = () => {
     };
     setAppliedFilters(payload);
     setIsFilterPanelOpen(false);
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
   }, [selectedFilters]);
 
   const handleClearAllFilters = useCallback(() => {
@@ -219,10 +299,15 @@ const ImageGallery = () => {
       endDate: null,
     };
     setAppliedFilters(initialStateApplied);
+    setImages([]);
+    setPageNumber(1);
+    setHasMore(true);
   }, []);
 
-  const filteredImages = images.filter((img) => {
+  const filteredBatches = images.filter((batch) => {
-    const uploadedAtMoment = moment(img.uploadedAt);
+    const firstDocUploadedAt = batch.documents[0]?.uploadedAt;
+    const uploadedAtMoment = firstDocUploadedAt ? moment(firstDocUploadedAt) : null;
+
     const startDateMoment = appliedFilters.startDate
       ? moment(appliedFilters.startDate)
       : null;
@@ -231,35 +316,26 @@ const ImageGallery = () => {
       : null;
 
     const isWithinDateRange =
-      (!startDateMoment || uploadedAtMoment.isSameOrAfter(startDateMoment, "day")) &&
+      (!startDateMoment || (uploadedAtMoment && uploadedAtMoment.isSameOrAfter(startDateMoment, "day"))) &&
-      (!endDateMoment || uploadedAtMoment.isSameOrBefore(endDateMoment, "day"));
+      (!endDateMoment || (uploadedAtMoment && uploadedAtMoment.isSameOrBefore(endDateMoment, "day")));
 
     const passesCategoryFilters =
       (appliedFilters.buildingIds === null ||
-        appliedFilters.buildingIds.includes(img.buildingId)) &&
+        appliedFilters.buildingIds.includes(batch.buildingId)) &&
       (appliedFilters.floorIds === null ||
-        appliedFilters.floorIds.includes(img.floorIds)) &&
+        appliedFilters.floorIds.includes(batch.floorIds)) &&
       (appliedFilters.activityIds === null ||
-        appliedFilters.activityIds.includes(img.activityId)) &&
+        appliedFilters.activityIds.includes(batch.activityId)) &&
       (appliedFilters.workAreaIds === null ||
-        appliedFilters.workAreaIds.includes(img.workAreaId)) &&
+        appliedFilters.workAreaIds.includes(batch.workAreaId)) &&
-      (appliedFilters.uploadedByIds === null ||
-        appliedFilters.uploadedByIds.includes(img.uploadedBy?.id)) &&
       (appliedFilters.workCategoryIds === null ||
-        appliedFilters.workCategoryIds.includes(img.workCategoryId));
+        appliedFilters.workCategoryIds.includes(batch.workCategoryId));
 
-    return isWithinDateRange && passesCategoryFilters;
+    const passesUploadedByFilter =
-  });
+      appliedFilters.uploadedByIds === null ||
+      batch.documents.some(doc => appliedFilters.uploadedByIds.includes(doc.uploadedBy?.id));
 
-  const imagesByActivityUser = {};
+    return isWithinDateRange && passesCategoryFilters && passesUploadedByFilter;
-  filteredImages.forEach((img) => {
-    const userName = `${img.uploadedBy?.firstName || ""} ${
-      img.uploadedBy?.lastName || ""
-    }`.trim();
-    const workArea = img.workAreaName || "Unknown";
-    const key = `${img.activityName}__${userName}__${workArea}`;
-    if (!imagesByActivityUser[key]) imagesByActivityUser[key] = [];
-    imagesByActivityUser[key].push(img);
   });
 
   const scrollLeft = useCallback((key) => {
@@ -337,32 +413,32 @@ const ImageGallery = () => {
     <div className={`gallery-container ${isFilterPanelOpen ? "filter-panel-open" : ""}`}>
       <div className="main-content">
         <div className="activity-section">
-          {loading ? (
+          {loading && pageNumber === 1 ? (
             <div className="spinner-container">
               <div className="spinner" />
             </div>
-          ) : Object.entries(imagesByActivityUser).length > 0 ? (
+          ) : filteredBatches.length > 0 ? (
-            Object.entries(imagesByActivityUser).map(([key, imgs]) => {
+            filteredBatches.map((batch) => {
-              const [activity, userName, workArea] = key.split("__");
+              const firstDoc = batch.documents[0];
-              const { buildingName, floorName, uploadedAt, workCategoryName } = imgs[0];
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
-              const date = moment(uploadedAt).format("YYYY-MM-DD");
+                }`.trim();
-              const time = moment(uploadedAt).format("hh:mm A");
+              const date = moment(firstDoc?.uploadedAt).format("DD-MM-YYYY"); // Changed format to DD/MM/YYYY
+              const time = moment(firstDoc?.uploadedAt).format("hh:mm A");
 
               return (
-                <div key={key} className="grouped-section">
+                <div key={batch.batchId} className="grouped-section">
                   <div className="group-heading">
                     <div className="d-flex flex-column">
                       <div className="d-flex align-items-center mb-1">
                         <Avatar
-                          size="xxs"
+                          size="xs"
-                          firstName={imgs[0].uploadedBy?.firstName}
+                          firstName={firstDoc?.uploadedBy?.firstName}
-                          lastName={imgs[0].uploadedBy?.lastName}
+                          lastName={firstDoc?.uploadedBy?.lastName}
                           className="me-2"
                         />
                         <div className="d-flex flex-column align-items-start">
                           <strong className="user-name-text">
-                            {imgs[0].uploadedBy?.firstName}{" "}
+                            {userName}
-                            {imgs[0].uploadedBy?.lastName}
                           </strong>
                           <span className="me-2">
                             {date} {time}
@@ -373,13 +449,14 @@ const ImageGallery = () => {
 
                     <div className="location-line">
                       <div>
-                        {buildingName} &gt; {floorName} &gt; <strong> {workArea} &gt;{" "}
+                        {batch.buildingName} &gt; {batch.floorName} &gt;{" "}
-                        {activity}</strong>
+                        <strong>{batch.workAreaName || "Unknown"} &gt;{" "}
+                          {batch.activityName}</strong>
                       </div>
-                      {workCategoryName && (
+                      {batch.workCategoryName && (
                         <div className="work-category-display ms-2">
                           <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
-                            {workCategoryName}
+                            {batch.workCategoryName}
                           </span>
                         </div>
                       )}
@@ -389,32 +466,32 @@ const ImageGallery = () => {
                   <div className="image-group-wrapper">
                     <button
                       className="scroll-arrow left-arrow"
-                      onClick={() => scrollLeft(key)}
+                      onClick={() => scrollLeft(batch.batchId)}
                     >
                       &#8249;
                     </button>
                     <div
                       className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[key] = el)}
+                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
                     >
-                      {imgs.map((img, idx) => {
+                      {batch.documents.map((doc, idx) => {
-                        const hoverDate = moment(img.uploadedAt).format("YYYY-MM-DD");
+                        const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY"); // Changed format to DD/MM/YYYY
-                        const hoverTime = moment(img.uploadedAt).format("hh:mm A");
+                        const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
 
                         return (
                           <div
-                            key={img.imageUrl}
+                            key={doc.id}
                             className="image-card"
                             onClick={() =>
-                              openModal(<ImagePop images={imgs} initialIndex={idx} />)
+                              openModal(<ImagePop batch={batch} initialIndex={idx} />)
                             }
-                            onMouseEnter={() => setHoveredImage(img)}
+                            onMouseEnter={() => setHoveredImage(doc)}
                             onMouseLeave={() => setHoveredImage(null)}
                           >
                             <div className="image-wrapper">
-                              <img src={img.imageUrl} alt={`Image ${idx + 1}`} />
+                              <img src={doc.url} alt={`Image ${idx + 1}`} />
                             </div>
-                            {hoveredImage === img && (
+                            {hoveredImage === doc && (
                               <div className="image-hover-description">
                                 <p>
                                   <strong>Date:</strong> {hoverDate}
@@ -423,7 +500,7 @@ const ImageGallery = () => {
                                   <strong>Time:</strong> {hoverTime}
                                 </p>
                                 <p>
-                                  <strong>Activity:</strong> {img.activityName}
+                                  <strong>Activity:</strong> {batch.activityName}
                                 </p>
                               </div>
                             )}
@@ -433,7 +510,7 @@ const ImageGallery = () => {
                     </div>
                     <button
                       className="scroll-arrow right-arrow"
-                      onClick={() => scrollRight(key)}
+                      onClick={() => scrollRight(batch.batchId)}
                     >
                       &#8250;
                     </button>
@@ -442,10 +519,17 @@ const ImageGallery = () => {
               );
             })
           ) : (
-            <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
               No images match the selected filters.
             </p>
           )}
+
+          <div ref={loaderRef} style={{ height: '50px', margin: '20px 0', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            {loadingMore && hasMore && <div className="spinner" />}
+            {!hasMore && !loading && filteredBatches.length > 0 && (
+              <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
+            )}
+          </div>
         </div>
       </div>
 
@@ -457,7 +541,7 @@ const ImageGallery = () => {
         >
           {isFilterPanelOpen ? (
             <>
-              Filter <span className="ms-1">&#10006;</span> {/* Added ms-1 for spacing */}
+              Filter <span className="ms-1">&#10006;</span>
             </>
           ) : (
             <>

src/pages/Gallary/ImageGallery.css

@@ -400,6 +400,7 @@
   -webkit-overflow-scrolling: touch;
   scroll-behavior: smooth;
   width: 100%;
+  margin-left: 34px;
 }
 
 .scroll-arrow {

src/pages/Gallary/ImageGalleryAPI.jsx

@@ -1,9 +1,9 @@
 import { api } from "../../utils/axiosClient";
 
 export const ImageGalleryAPI = {
-
+    ImagesGet: (projectId, filter, pageNumber, pageSize) => {
-    ImagesGet: (projectId, filter) => {
         const payloadJsonString = JSON.stringify(filter);
-        return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}`)
+        // Corrected API endpoint with pagination parameters
+        return api.get(`/api/image/images/${projectId}?filter=${payloadJsonString}&pageNumber=${pageNumber}&pageSize=${pageSize}`);
     },
-}
+};

src/pages/Gallary/ImagePop.jsx

@@ -3,32 +3,38 @@ import "./ImagePop.css";
 import { useModal } from "./ModalContext";
 import moment from "moment";
 
-const ImagePop = ({ images, initialIndex = 0 }) => {
+const ImagePop = ({ batch, initialIndex = 0 }) => {
   const { closeModal } = useModal();
-  // State to keep track of the currently displayed image's index
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
 
-  // Effect to update currentIndex if the initialIndex prop changes (e.g., if the modal is reused)
+  // Effect to update currentIndex if the initialIndex prop changes
   useEffect(() => {
     setCurrentIndex(initialIndex);
-  }, [initialIndex, images]);
+  }, [initialIndex, batch]);
 
-  // If no images are provided or the array is empty, don't render
+  // If no batch or documents are provided, don't render
-  if (!images || images.length === 0) return null;
+  if (!batch || !batch.documents || batch.documents.length === 0) return null;
 
-  // Get the current image based on currentIndex
+  // Get the current image document from the batch's documents array
-  const image = images[currentIndex];
+  const image = batch.documents[currentIndex];
 
   // Fallback if for some reason the image at the current index doesn't exist
   if (!image) return null;
 
-  // Format details for display
+  // Format details for display from the individual image document
   const fullName = `${image.uploadedBy?.firstName || ""} ${
     image.uploadedBy?.lastName || ""
   }`.trim();
   const date = moment(image.uploadedAt).format("YYYY-MM-DD");
   const time = moment(image.uploadedAt).format("hh:mm A");
 
+  // Location and category details from the 'batch' object (as previously corrected)
+  const buildingName = batch.buildingName;
+  const floorName = batch.floorName;
+  const workAreaName = batch.workAreaName;
+  const activityName = batch.activityName;  
+  const batchComment = batch.comment;
+
   // Handler for navigating to the previous image
   const handlePrev = () => {
     setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
@@ -37,13 +43,13 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
   // Handler for navigating to the next image
   const handleNext = () => {
     setCurrentIndex((prevIndex) =>
-      Math.min(images.length - 1, prevIndex + 1)
+      Math.min(batch.documents.length - 1, prevIndex + 1)
     );
   };
 
   // Determine if previous/next buttons should be enabled/visible
   const hasPrev = currentIndex > 0;
-  const hasNext = currentIndex < images.length - 1;
+  const hasNext = currentIndex < batch.documents.length - 1;
 
   return (
     <div className="image-modal-overlay">
@@ -61,7 +67,7 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
         )}
 
         {/* The main image display */}
-        <img src={image.imageUrl} alt="Preview" className="modal-image" />
+        <img src={image.url} alt="Preview" className="modal-image" />
 
         {/* Next button, only shown if there's a next image */}
         {hasNext && (
@@ -79,11 +85,12 @@ const ImagePop = ({ images, initialIndex = 0 }) => {
             <strong>📅 Date:</strong> {date} {time}
           </p>
           <p>
-            <strong>🏢 Location:</strong> {image.buildingName} &gt;{" "}
+            <strong>🏢 Location:</strong> {buildingName} &gt; {floorName} &gt;{" "}
-            {image.floorName} &gt; {image.activityName}
+            {workAreaName || "Unknown"} &gt; {activityName}
           </p>
           <p>
-            <strong>📝 Comments:</strong> {image.comment}
+            {/* Display the comment from the batch object */}
+            <strong>📝 Comments:</strong> {batchComment || "N/A"}
           </p>
         </div>
       </div>

src/services/signalRService.js

@@ -92,6 +92,13 @@ export function startSignalR(loggedUser) {
         clearCacheKey("AttendanceLogs")
         eventBus.emit("employee", data);
       }
+
+      if (data.keyword == "Task_Report") {
+        eventBus.emit("image_gallery", data);
+      }
+      if (data.keyword == "Task_Comment") {
+        eventBus.emit("image_gallery", data);
+      }
     }
   });