From 4adfbc8e8eb6db44b33e328449417f8fe76818ca Mon Sep 17 00:00:00 2001 From: Kartik sharma Date: Sat, 5 Jul 2025 21:59:18 +0530 Subject: [PATCH] Adding next and previous button hide and correction in filter logic. --- src/pages/Gallary/ImageGallary.jsx | 130 +++++++++++++++++++++-------- 1 file changed, 93 insertions(+), 37 deletions(-) diff --git a/src/pages/Gallary/ImageGallary.jsx b/src/pages/Gallary/ImageGallary.jsx index 41e15348..e12ad6c7 100644 --- a/src/pages/Gallary/ImageGallary.jsx +++ b/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); - else setLoadingMore(true); + if (page === 1) { + 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( - (batch) => !prevImages.some((prev) => prev.batchId === batch.batchId) + const uniqueNewBatches = newBatches.filter( + (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); } }; @@ -141,7 +166,7 @@ const ImageGallery = () => { return () => { eventBus.off("image_gallery", handleExternalEvent); }; - }, [appliedFilters, fetchImages,selectedProjectId]); + }, [appliedFilters, fetchImages, selectedProjectId]); useEffect(() => { if (!loaderRef.current) return; @@ -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 floors = getUniqueValuesWithIds("floorIds", "floorName"); - const activities = getUniqueValuesWithIds("activityId", "activityName"); - const workAreas = getUniqueValuesWithIds("workAreaId", "workAreaName"); + const buildings = getUniqueValuesWithIds("buildingId", "buildingName", initialImageCache); + + const floors = getUniqueValuesWithIds("floorId", "floorName", initialImageCache); + 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, }; - setAppliedFilters(payload); - setIsFilterPanelOpen(false); - setImages([]); - setPageNumber(1); - setHasMore(true); - }, [selectedFilters]); + + 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); + setImages([]); + setPageNumber(1); + setHasMore(true); + } + }, [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 (
@@ -464,18 +514,21 @@ const ImageGallery = () => {
- + {/* Render Left Scroll Button conditionally */} + {showScrollButtons && ( + + )}
(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 = () => { ); })}
- + {/* Render Right Scroll Button conditionally */} + {showScrollButtons && ( + + )}
);