Creating a custom hook for ImageGallery to call an API.

src/hooks/useImageGallery.js

@@ -0,0 +1,85 @@
+import { useState, useCallback } from "react";
+// import { ImageGalleryAPI } from "../repositories/ImageGalleyRepository";
+import { ImageGalleryAPI } from "../repositories/ImageGalleryAPI";
+
+const PAGE_SIZE = 10;
+
+const useImageGallery = (selectedProjectId) => {
+  const [images, setImages] = useState([]);
+  const [allImagesData, setAllImagesData] = useState([]);
+  const [pageNumber, setPageNumber] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [loadingMore, setLoadingMore] = useState(false);
+
+  const fetchImages = useCallback(async (page = 1, filters = {}, reset = false) => {
+    if (!selectedProjectId) return;
+
+    try {
+      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((prev) => {
+        if (page === 1 || reset) return newBatches;
+        const uniqueNew = newBatches.filter(
+          (batch) => !prev.some((b) => b.batchId === batch.batchId)
+        );
+        return [...prev, ...uniqueNew];
+      });
+
+      setAllImagesData((prev) => {
+        if (page === 1 || reset) return newBatches;
+        const uniqueAll = newBatches.filter(
+          (batch) => !prev.some((b) => b.batchId === batch.batchId)
+        );
+        return [...prev, ...uniqueAll];
+      });
+
+      setHasMore(receivedCount === PAGE_SIZE);
+    } catch (error) {
+      console.error("Error fetching images:", error);
+      if (page === 1) {
+        setImages([]);
+        setAllImagesData([]);
+      }
+      setHasMore(false);
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+    }
+  }, [selectedProjectId]);
+
+  const resetGallery = useCallback(() => {
+    setImages([]);
+    setAllImagesData([]);
+    setPageNumber(1);
+    setHasMore(true);
+  }, []);
+
+  return {
+    images,
+    allImagesData,
+    pageNumber,
+    setPageNumber,
+    hasMore,
+    loading,
+    loadingMore,
+    fetchImages,
+    resetGallery,
+  };
+};
+
+export default useImageGallery;

src/pages/Gallary/ImageGallary.jsx

@@ -1,25 +1,32 @@
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import "./ImageGallery.css";
-import { ImageGalleryAPI } from "./ImageGalleryAPI";
 import moment from "moment";
 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";
 import eventBus from "../../services/eventBus";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import { formatUTCToLocalTime } from "../../utils/dateUtils";
-import DateRangePicker from "../../components/common/DateRangePicker";
+import useImageGallery from "../../hooks/useImageGallery";
 
-const PAGE_SIZE = 10;
 const SCROLL_THRESHOLD = 5;
 
 const ImageGallery = () => {
-  const [images, setImages] = useState([]);
-  const [allImagesData, setAllImagesData] = useState([]);
-  const [pageNumber, setPageNumber] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
+  const {
+    images,
+    allImagesData,
+    pageNumber,
+    setPageNumber,
+    hasMore,
+    loading,
+    loadingMore,
+    fetchImages,
+    resetGallery,
+  } = useImageGallery(selectedProjectId);
+
   const { openModal } = useModal();
 
   const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
@@ -58,8 +65,6 @@ 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 loaderRef = useRef(null);
@@ -91,71 +96,18 @@ const ImageGallery = () => {
 
   useEffect(() => {
     if (!selectedProjectId) {
-      setImages([]);
+      resetGallery();
-      setAllImagesData([]);
-      setLoading(false);
-      setHasMore(false);
       return;
     }
 
-    setImages([]);
+    resetGallery();
-    setPageNumber(1);
-    setHasMore(true);
-    setLoading(true);
-
-    setAllImagesData([]);
     fetchImages(1, appliedFilters, true);
   }, [selectedProjectId, appliedFilters]);
 
-  const fetchImages = useCallback(async (page, filters) => {
-    if (!selectedProjectId) return;
-
-    try {
-      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 uniqueNewBatches = newBatches.filter(
-          (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
-        );
-        return [...prevImages, ...uniqueNewBatches];
-      });
-
-      setAllImagesData((prevAllImages) => {
-        const uniqueAllImages = newBatches.filter(
-          (newBatch) => !prevAllImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
-        );
-        return [...prevAllImages, ...uniqueAllImages];
-      });
-
-      setHasMore(receivedCount === PAGE_SIZE);
-    } catch (err) {
-      console.error("Error fetching images:", err);
-      if (page === 1) {
-        setImages([]);
-        setAllImagesData([]);
-      }
-      setHasMore(false);
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  }, [selectedProjectId]);
-
   useEffect(() => {
     const handleExternalEvent = (data) => {
       if (selectedProjectId === data.projectId) {
-        setImages([]);
+        resetGallery();
-        setAllImagesData([]);
-        setPageNumber(1);
-        setHasMore(true);
         fetchImages(1, appliedFilters, true);
       }
     };
@@ -196,20 +148,13 @@ const ImageGallery = () => {
     if (pageNumber > 1) {
       fetchImages(pageNumber, appliedFilters);
     }
-  }, [pageNumber, fetchImages, appliedFilters]);
+  }, [pageNumber]);
 
   const getUniqueValuesWithIds = useCallback((idKey, nameKey) => {
     const map = new Map();
     allImagesData.forEach(batch => {
-      let id;
+      let id = idKey === "floorIds" ? batch.floorIds : batch[idKey];
-      if (idKey === "floorIds") {
-        id = batch.floorIds;
-      } else {
-        id = batch[idKey];
-      }
-
       const name = batch[nameKey];
-
       if (id && name && !map.has(id)) {
         map.set(id, name);
       }
@@ -272,30 +217,12 @@ const ImageGallery = () => {
 
   const handleApplyFilters = useCallback(() => {
     const payload = {
-      buildingIds:
+      buildingIds: selectedFilters.building.length ? selectedFilters.building.map((item) => item[0]) : null,
-        selectedFilters.building.length > 0
+      floorIds: selectedFilters.floor.length ? selectedFilters.floor.map((item) => item[0]) : null,
-          ? selectedFilters.building.map((item) => item[0])
+      workAreaIds: selectedFilters.workArea.length ? selectedFilters.workArea.map((item) => item[0]) : null,
-          : null,
+      workCategoryIds: selectedFilters.workCategory.length ? selectedFilters.workCategory.map((item) => item[0]) : null,
-      floorIds:
+      activityIds: selectedFilters.activity.length ? selectedFilters.activity.map((item) => item[0]) : null,
-        selectedFilters.floor.length > 0
+      uploadedByIds: selectedFilters.uploadedBy.length ? selectedFilters.uploadedBy.map((item) => item[0]) : null,
-          ? selectedFilters.floor.map((item) => item[0])
-          : null,
-      workAreaIds:
-        selectedFilters.workArea.length > 0
-          ? selectedFilters.workArea.map((item) => item[0])
-          : null,
-      workCategoryIds:
-        selectedFilters.workCategory.length > 0
-          ? selectedFilters.workCategory.map((item) => item[0])
-          : null,
-      activityIds:
-        selectedFilters.activity.length > 0
-          ? selectedFilters.activity.map((item) => item[0])
-          : null,
-      uploadedByIds:
-        selectedFilters.uploadedBy.length > 0
-          ? selectedFilters.uploadedBy.map((item) => item[0])
-          : null,
       startDate: selectedFilters.startDate || null,
       endDate: selectedFilters.endDate || null,
     };
@@ -303,30 +230,23 @@ const ImageGallery = () => {
     const areFiltersChanged = Object.keys(payload).some(key => {
       const oldVal = appliedFilters[key];
       const newVal = payload[key];
-
       if (Array.isArray(oldVal) && Array.isArray(newVal)) {
         if (oldVal.length !== newVal.length) return true;
         const oldSet = new Set(oldVal);
         const newSet = new Set(newVal);
-        if (oldSet.size !== newSet.size) return true;
         for (const item of newSet) {
           if (!oldSet.has(item)) return true;
         }
         return false;
       }
-      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
-        return false;
-      }
       return oldVal !== newVal;
     });
 
     if (areFiltersChanged) {
       setAppliedFilters(payload);
-      setImages([]);
+      resetGallery();
-      setPageNumber(1);
-      setHasMore(true);
     }
-    // Removed setIsFilterPanelOpen(false); to keep the drawer open
   }, [selectedFilters, appliedFilters]);
 
   const handleClearAllFilters = useCallback(() => {
@@ -353,9 +273,7 @@ const ImageGallery = () => {
       endDate: null,
     };
     setAppliedFilters(initialStateApplied);
-    setImages([]);
+    resetGallery();
-    setPageNumber(1);
-    setHasMore(true);
   }, []);
 
   const scrollLeft = useCallback((key) => {
@@ -382,22 +300,18 @@ const ImageGallery = () => {
               Clear
             </button>
           )}
-          {type !== "dateRange" &&
+          {type !== "dateRange" && selectedFilters[type]?.length > 0 && (
-            selectedFilters[type] &&
+            <button
-            selectedFilters[type].length > 0 && (
+              className="clear-button"
-              <button
+              onClick={(e) => {
-                className="clear-button"
+                e.stopPropagation();
-                onClick={(e) => {
+                setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
-                  e.stopPropagation();
+              }}
-                  setSelectedFilters((prev) => ({ ...prev, [type]: [] }));
+            >
-                }}
+              Clear
-              >
+            </button>
-                Clear
+          )}
-              </button>
+          <span className="collapse-icon">{collapsedFilters[type] ? '+' : '-'}</span>
-            )}
-          <span className="collapse-icon">
-            {collapsedFilters[type] ? '+' : '-'}
-          </span>
         </div>
       </div>
       {!collapsedFilters[type] && (
@@ -412,24 +326,16 @@ const ImageGallery = () => {
               />
             </div>
           ) : (
-            items.map((item) => {
+            items.map(([itemId, itemName]) => (
-              const itemId = item[0];
+              <label key={itemId}>
-              const itemName = item[1];
+                <input
-              const isChecked = selectedFilters[type].some(
+                  type="checkbox"
-                (selectedItem) => selectedItem[0] === itemId
+                  checked={selectedFilters[type].some((item) => item[0] === itemId)}
-              );
+                  onChange={() => toggleFilter(type, itemId, itemName)}
-
+                />
-              return (
+                {itemName}
-                <label key={itemId}>
+              </label>
-                  <input
+            ))
-                    type="checkbox"
-                    checked={isChecked}
-                    onChange={() => toggleFilter(type, itemId, itemName)}
-                  />
-                  {itemName}
-                </label>
-              );
-            })
           )}
         </div>
       )}
@@ -438,39 +344,24 @@ const ImageGallery = () => {
 
   return (
     <div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
-      <Breadcrumb
+      <Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
-        data={[
-          { label: "Home", link: "/" },
-          { label: "Gallary", link: null },
-        ]}
-      ></Breadcrumb>
       <div className="main-content">
         <button
           className={`filter-button btn-primary ${isFilterPanelOpen ? "closed-icon" : ""}`}
           onClick={() => setIsFilterPanelOpen(!isFilterPanelOpen)}
           ref={filterButtonRef}
         >
-          {isFilterPanelOpen ? (
+          {isFilterPanelOpen ? <i className="fa-solid fa-times fs-5"></i> : <i className="fa-solid fa-filter ms-1 fs-5"></i>}
-            <i className="fa-solid fa-times fs-5"></i>
-          ) : (
-            <><i className="fa-solid fa-filter ms-1 fs-5"></i></>
-          )}
         </button>
 
         <div className="activity-section">
           {loading && pageNumber === 1 ? (
-            <div className="spinner-container">
+            <div className="spinner-container"><div className="spinner" /></div>
-              <div className="spinner" />
-            </div>
           ) : images.length > 0 ? (
             images.map((batch) => {
               const firstDoc = batch.documents[0];
-              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
+              const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
-                }`.trim();
+              const date = formatUTCToLocalTime(firstDoc?.uploadedAt);
-              const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
-
-
-
               const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
 
               return (
@@ -478,29 +369,15 @@ const ImageGallery = () => {
                   <div className="group-heading">
                     <div className="d-flex flex-column">
                       <div className="d-flex align-items-center mb-1">
-                        <Avatar
+                        <Avatar size="xs" firstName={firstDoc?.uploadedBy?.firstName} lastName={firstDoc?.uploadedBy?.lastName} className="me-2" />
-                          size="xs"
-                          firstName={firstDoc?.uploadedBy?.firstName}
-                          lastName={firstDoc?.uploadedBy?.lastName}
-                          className="me-2"
-                        />
                         <div className="d-flex flex-column align-items-start">
-                          <strong className="user-name-text">
+                          <strong className="user-name-text">{userName}</strong>
-                            {userName}
+                          <span className="me-2">{date}</span>
-                          </strong>
-                          <span className="me-2">
-                            {date}
-                          </span>
                         </div>
                       </div>
                     </div>
-
                     <div className="location-line">
-                      <div>
+                      <div>{batch.buildingName} &gt; {batch.floorName} &gt; <strong>{batch.workAreaName || "Unknown"} &gt; {batch.activityName}</strong></div>
-                        {batch.buildingName} &gt; {batch.floorName} &gt;{" "}
-                        <strong>{batch.workAreaName || "Unknown"} &gt;{" "}
-                          {batch.activityName}</strong>
-                      </div>
                       {batch.workCategoryName && (
                         <div className="work-category-display ms-2">
                           <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1">
@@ -510,106 +387,52 @@ const ImageGallery = () => {
                       )}
                     </div>
                   </div>
-
                   <div className="image-group-wrapper">
-                    {showScrollButtons && (
+                    {showScrollButtons && <button className="scroll-arrow left-arrow" onClick={() => scrollLeft(batch.batchId)}>&#8249;</button>}
-                      <button
+                    <div className="image-group-horizontal" ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}>
-                        className="scroll-arrow left-arrow"
-                        onClick={() => scrollLeft(batch.batchId)}
-                      >
-                        &#8249;
-                      </button>
-                    )}
-                    <div
-                      className="image-group-horizontal"
-                      ref={(el) => (imageGroupRefs.current[batch.batchId] = el)}
-                    >
                       {batch.documents.map((doc, idx) => {
                         const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
                         const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
 
                         return (
-                          <div
+                          <div key={doc.id} className="image-card" onClick={() => openModal(<ImagePop batch={batch} initialIndex={idx} />)} onMouseEnter={() => setHoveredImage(doc)} onMouseLeave={() => setHoveredImage(null)}>
-                            key={doc.id}
-                            className="image-card"
-                            onClick={() =>
-                              openModal(<ImagePop batch={batch} initialIndex={idx} />)
-                            }
-                            onMouseEnter={() => setHoveredImage(doc)}
-                            onMouseLeave={() => setHoveredImage(null)}
-                          >
                             <div className="image-wrapper">
                               <img src={doc.url} alt={`Image ${idx + 1}`} />
                             </div>
                             {hoveredImage === doc && (
                               <div className="image-hover-description">
-                                <p>
+                                <p><strong>Date:</strong> {hoverDate}</p>
-                                  <strong>Date:</strong> {hoverDate}
+                                <p><strong>Time:</strong> {hoverTime}</p>
-                                </p>
+                                <p><strong>Activity:</strong> {batch.activityName}</p>
-                                <p>
-                                  <strong>Time:</strong> {hoverTime}
-                                </p>
-                                <p>
-                                  <strong>Activity:</strong> {batch.activityName}
-                                </p>
                               </div>
                             )}
                           </div>
                         );
                       })}
                     </div>
-                    {showScrollButtons && (
+                    {showScrollButtons && <button className="scroll-arrow right-arrow" onClick={() => scrollRight(batch.batchId)}>&#8250;</button>}
-                      <button
-                        className="scroll-arrow right-arrow"
-                        onClick={() => scrollRight(batch.batchId)}
-                      >
-                        &#8250;
-                      </button>
-                    )}
                   </div>
                 </div>
               );
             })
           ) : (
-            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>
+            !loading && <p style={{ textAlign: "center", color: "#777", marginTop: "50px" }}>No images match the selected filters.</p>
-              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 && images.length > 0 && (
+            {!hasMore && !loading && images.length > 0 && <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>}
-              <p style={{ color: '#aaa' }}>You've reached the end of the images.</p>
-            )}
           </div>
         </div>
       </div>
 
-      <div
+      <div className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`} tabIndex="-1" id="filterOffcanvas" aria-labelledby="filterOffcanvasLabel" ref={filterPanelRef}>
-        className={`offcanvas offcanvas-end ${isFilterPanelOpen ? "show" : ""}`}
-        tabIndex="-1"
-        id="filterOffcanvas"
-        aria-labelledby="filterOffcanvasLabel"
-        ref={filterPanelRef}
-      >
         <div className="offcanvas-header">
-          <h5 className="offcanvas-title" id="filterOffcanvasLabel">
+          <h5 className="offcanvas-title" id="filterOffcanvasLabel">Filters</h5>
-            Filters
+          <button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
-          </h5>
-          <button
-            type="button"
-            className="btn-close"
-            onClick={() => setIsFilterPanelOpen(false)}
-            aria-label="Close"
-          ></button>
         </div>
         <div className="filter-actions mt-auto mx-2">
-          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>
+          <button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</button>
-            Clear All
+          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>Apply Filters</button>
-          </button>
-          <button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
-            Apply Filters
-          </button>
         </div>
         <div className="offcanvas-body d-flex flex-column">
           {renderFilterCategory("Date Range", [], "dateRange")}
@@ -619,12 +442,10 @@ const ImageGallery = () => {
           {renderFilterCategory("Activity", activities, "activity")}
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
-
-
         </div>
       </div>
     </div>
   );
 };
 
-export default ImageGallery;
+export default ImageGallery;

src/repositories/ImageGalleryAPI.jsx

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