Adding next and previous button hide and correction in filter logic.

src/pages/Gallary/ImageGallary.jsx

@@ -10,6 +10,7 @@ import DateRangePicker from "../../components/common/DateRangePicker";
 import eventBus from "../../services/eventBus";
 
 const PAGE_SIZE = 10;
+const SCROLL_THRESHOLD = 5; // Define how many images are visible before scroll buttons appear
 
 const ImageGallery = () => {
   const [images, setImages] = useState([]);
@@ -17,6 +18,7 @@ const ImageGallery = () => {
   const [hasMore, setHasMore] = useState(true);
   const selectedProjectId = useSelector((store) => store.localVariables.projectId);
   const { openModal } = useModal();
+  const [initialImageCache, setInitialImageCache] = useState([]);
 
   const yesterday = moment().subtract(1, 'days').format('YYYY-MM-DD');
 
@@ -95,23 +97,41 @@ const ImageGallery = () => {
     fetchImages(1, appliedFilters);
   }, [selectedProjectId, appliedFilters]);
 
-  // ✅ 1. Define fetchImages first
   const fetchImages = useCallback(async (page, filters) => {
     if (!selectedProjectId) return;
 
     try {
-      if (page === 1) setLoading(true);
+      if (page === 1) {
-      else setLoadingMore(true);
+        setLoading(true);
+        const noFiltersApplied = Object.values(filters).every(
+          (val) => val === null || (Array.isArray(val) && val.length === 0)
+        );
+
+        if (noFiltersApplied) {
+          setInitialImageCache([]); // Reset cache before fetching
+        }
+      } 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(
+        const uniqueNewBatches = newBatches.filter(
-          (batch) => !prevImages.some((prev) => prev.batchId === batch.batchId)
+          (newBatch) => !prevImages.some((prevBatch) => prevBatch.batchId === newBatch.batchId)
         );
-        return [...prevImages, ...uniqueNew];
+        const updatedImages = [...prevImages, ...uniqueNewBatches];
+
+        const noFiltersApplied = Object.values(filters).every(
+          (val) => val === null || (Array.isArray(val) && val.length === 0)
+        );
+        if (page === 1 && noFiltersApplied) {
+          setInitialImageCache(updatedImages);
+        }
+
+        return updatedImages;
       });
 
       setHasMore(receivedCount === PAGE_SIZE);
@@ -125,14 +145,19 @@ const ImageGallery = () => {
     }
   }, [selectedProjectId]);
 
-  // ✅ 2. THEN use fetchImages inside useEffect
+  const isNoFiltersApplied = (filters) =>
+    Object.values(filters).every(
+      (val) => val === null || (Array.isArray(val) && val.length === 0)
+    );
+
+
   useEffect(() => {
     const handleExternalEvent = (data) => {
       if (selectedProjectId == data.projectId) {
         setImages([]);
         setPageNumber(1);
         setHasMore(true);
-        fetchImages(1, appliedFilters); // Now safe
+        fetchImages(1, appliedFilters);
       }
     };
 
@@ -174,7 +199,7 @@ const ImageGallery = () => {
     }
   }, [pageNumber, fetchImages, appliedFilters]);
 
-  const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = images) => {
+  const getUniqueValuesWithIds = useCallback((idKey, nameKey, dataArray = initialImageCache) => {
     const map = new Map();
     dataArray.forEach(batch => {
       const id = batch[idKey];
@@ -184,7 +209,8 @@ const ImageGallery = () => {
       }
     });
     return Array.from(map.entries());
-  }, [images]);
+  }, [initialImageCache]);
+
 
   const getUniqueUploadedByUsers = useCallback(() => {
     const uniqueUsersMap = new Map();
@@ -201,12 +227,13 @@ const ImageGallery = () => {
     return Array.from(uniqueUsersMap.entries());
   }, [images]);
 
-  const buildings = getUniqueValuesWithIds("buildingId", "buildingName");
+  const buildings = getUniqueValuesWithIds("buildingId", "buildingName", initialImageCache);
-  const floors = getUniqueValuesWithIds("floorIds", "floorName");
+
-  const activities = getUniqueValuesWithIds("activityId", "activityName");
+  const floors = getUniqueValuesWithIds("floorId", "floorName", initialImageCache);
-  const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName");
+  const activities = getUniqueValuesWithIds("activityId", "activityName", initialImageCache);
+  const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName", initialImageCache);
   const uploadedByUsers = getUniqueUploadedByUsers();
-  const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName");
+  const workCategories = getUniqueValuesWithIds("workCategoryId", "workCategoryName", initialImageCache);
 
   const toggleFilter = useCallback((type, itemId, itemName) => {
     setSelectedFilters((prev) => {
@@ -268,12 +295,32 @@ const ImageGallery = () => {
       startDate: selectedFilters.startDate || null,
       endDate: selectedFilters.endDate || null,
     };
+
+    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;
+      }
+      return oldVal !== newVal;
+    });
+
+    if (areFiltersChanged) {
         setAppliedFilters(payload);
-    setIsFilterPanelOpen(false);
         setImages([]);
         setPageNumber(1);
         setHasMore(true);
-  }, [selectedFilters]);
+    }
+  }, [selectedFilters, appliedFilters]);
+
 
   const handleClearAllFilters = useCallback(() => {
     const initialStateSelected = {
@@ -323,7 +370,7 @@ const ImageGallery = () => {
       (appliedFilters.buildingIds === null ||
         appliedFilters.buildingIds.includes(batch.buildingId)) &&
       (appliedFilters.floorIds === null ||
-        appliedFilters.floorIds.includes(batch.floorIds)) &&
+        appliedFilters.floorIds.includes(batch.floorId)) &&
       (appliedFilters.activityIds === null ||
         appliedFilters.activityIds.includes(batch.activityId)) &&
       (appliedFilters.workAreaIds === null ||
@@ -422,9 +469,12 @@ const ImageGallery = () => {
               const firstDoc = batch.documents[0];
               const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""
                 }`.trim();
-              const date = moment(firstDoc?.uploadedAt).format("DD-MM-YYYY"); // Changed format to DD/MM/YYYY
+              const date = moment(firstDoc?.uploadedAt).format("DD-MM-YYYY");
               const time = moment(firstDoc?.uploadedAt).format("hh:mm A");
 
+              // Determine if scroll buttons should be shown for this batch
+              const showScrollButtons = batch.documents.length > SCROLL_THRESHOLD;
+
               return (
                 <div key={batch.batchId} className="grouped-section">
                   <div className="group-heading">
@@ -464,18 +514,21 @@ const ImageGallery = () => {
                   </div>
 
                   <div className="image-group-wrapper">
+                    {/* Render Left Scroll Button conditionally */}
+                    {showScrollButtons && (
                       <button
                         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"); // Changed format to DD/MM/YYYY
+                        const hoverDate = moment(doc.uploadedAt).format("DD-MM-YYYY");
                         const hoverTime = moment(doc.uploadedAt).format("hh:mm A");
 
                         return (
@@ -508,12 +561,15 @@ const ImageGallery = () => {
                         );
                       })}
                     </div>
+                    {/* Render Right Scroll Button conditionally */}
+                    {showScrollButtons && (
                       <button
                         className="scroll-arrow right-arrow"
                         onClick={() => scrollRight(batch.batchId)}
                       >
                         &#8250;
                       </button>
+                    )}
                   </div>
                 </div>
               );