Creating a custom hook for ImageGallery to call an API.

src/pages/Gallary/ImageGallary.jsx

@@ -5,10 +5,11 @@ 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 SCROLL_THRESHOLD = 5;
 
@@ -152,15 +153,8 @@ const ImageGallery = () => {
   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);
       }
@@ -245,9 +239,7 @@ const ImageGallery = () => {
         }
         return false;
       }
-      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) {
+      if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
-        return false;
-      }
       return oldVal !== newVal;
     });
 
@@ -352,12 +344,7 @@ 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" : ""}`}
@@ -373,12 +360,8 @@ const ImageGallery = () => {
           ) : 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 (
@@ -388,12 +371,8 @@ const ImageGallery = () => {
                       <div className="d-flex align-items-center mb-1">
                         <Avatar 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>
@@ -452,12 +431,8 @@ const ImageGallery = () => {
           <button type="button" className="btn-close" onClick={() => setIsFilterPanelOpen(false)} aria-label="Close" />
         </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")}
@@ -467,8 +442,6 @@ const ImageGallery = () => {
           {renderFilterCategory("Activity", activities, "activity")}
           {renderFilterCategory("Uploaded By (User)", uploadedByUsers, "uploadedBy")}
           {renderFilterCategory("Work Category", workCategories, "workCategory")}
-
-
         </div>
       </div>
     </div>