From c2bac4e640fbda63b941ee65818648057832c97e Mon Sep 17 00:00:00 2001 From: Kartik Sharma Date: Tue, 23 Sep 2025 16:17:28 +0530 Subject: [PATCH] Integrating api for imageGallery. --- .../ImageGallery/ImageGalleryListView.jsx | 211 ++++++++---------- src/hooks/useImageGallery.js | 17 +- src/pages/ImageGallery/ImageGalleryPage.jsx | 3 +- 3 files changed, 102 insertions(+), 129 deletions(-) diff --git a/src/components/ImageGallery/ImageGalleryListView.jsx b/src/components/ImageGallery/ImageGalleryListView.jsx index 3d16ff6c..e9f8f8e0 100644 --- a/src/components/ImageGallery/ImageGalleryListView.jsx +++ b/src/components/ImageGallery/ImageGalleryListView.jsx @@ -9,7 +9,6 @@ const ImageGalleryListView = ({ hasNextPage, loaderRef, openModal, - SCROLL_THRESHOLD, formatUTCToLocalTime, moment, }) => { @@ -19,18 +18,16 @@ const ImageGalleryListView = ({ useEffect(() => { const updateThreshold = () => { - if (window.innerWidth >= 1400) setScrollThreshold(6); // xl screens - else if (window.innerWidth >= 992) setScrollThreshold(5); // lg - else if (window.innerWidth >= 768) setScrollThreshold(4); // md - else setScrollThreshold(3); // sm & xs + if (window.innerWidth >= 1400) setScrollThreshold(6); + else if (window.innerWidth >= 992) setScrollThreshold(5); + else if (window.innerWidth >= 768) setScrollThreshold(4); + else setScrollThreshold(3); }; updateThreshold(); window.addEventListener("resize", updateThreshold); return () => window.removeEventListener("resize", updateThreshold); }, []); - - const scrollLeft = useCallback( (key) => imageGroupRefs.current[key]?.scrollBy({ left: -200, behavior: "smooth" }), @@ -42,132 +39,104 @@ const ImageGalleryListView = ({ [] ); + if (!images.length && !isLoading) { + return

No images match the selected filters.

; + } + return (
- {isLoading ? ( -
-

Loading...

-
- ) : images.length ? ( - images.map((batch) => { - const doc = batch.documents[0]; - const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || "" - }`.trim(); - const date = formatUTCToLocalTime(doc.uploadedAt); - const hasArrows = batch.documents.length > scrollThreshold; + {images.map((batch) => { + if (!batch.documents?.length) return null; // skip empty batches - return ( -
-
- {/* Uploader Info */} -
- -
- {userName} - {date} -
-
+ const doc = batch.documents[0]; + const userName = `${doc.uploadedBy?.firstName || ""} ${doc.uploadedBy?.lastName || ""}`.trim(); + const date = formatUTCToLocalTime(doc.uploadedAt); + const hasArrows = batch.documents.length > scrollThreshold; - {/* Location Info */} -
-
- - {batch.buildingName} - - - - {batch.floorName} - - - - {batch.workAreaName || "Unknown"} - - {batch.activityName} - -
- {batch.workCategoryName && ( - - {batch.workCategoryName} - - )} + return ( +
+
+
+ +
+ {userName} + {date}
- {/* Images */} -
- {hasArrows && ( - - )} -
- (imageGroupRefs.current[batch.batchId] = el) - } - > - {batch.documents.map((d, i) => { - const hoverDate = moment(d.uploadedAt).format( - "DD MMMM, YYYY" - ); - const hoverTime = moment(d.uploadedAt).format("hh:mm A"); - - return ( -
- openModal() - } - onMouseEnter={() => setHoveredImage(d)} - onMouseLeave={() => setHoveredImage(null)} - > -
- {`Image -
- {hoveredImage === d && ( -
-

- Date: {hoverDate} -

-

- Time: {hoverTime} -

-

- Activity: {batch.activityName} -

-
- )} -
- ); - })} +
+
+ + {batch.buildingName} + + + + {batch.floorName} + + + + {batch.workAreaName || "Unknown"} + + {batch.activityName} +
- {hasArrows && ( - + {batch.workCategoryName && ( + {batch.workCategoryName} )}
- ); - }) - ) : ( -

- No images match the selected filters. -

- )} + +
+ {hasArrows && ( + + )} +
(imageGroupRefs.current[batch.batchId] = el)} + > + {batch.documents.map((d, i) => { + const hoverDate = moment(d.uploadedAt).format("DD MMMM, YYYY"); + const hoverTime = moment(d.uploadedAt).format("hh:mm A"); + + return ( +
openModal()} + onMouseEnter={() => setHoveredImage(d)} + onMouseLeave={() => setHoveredImage(null)} + > +
+ {`Image +
+ {hoveredImage === d && ( +
+

Date: {hoverDate}

+

Time: {hoverTime}

+

Activity: {batch.activityName}

+
+ )} +
+ ); + })} +
+ {hasArrows && ( + + )} +
+
+ ); + })}
{isFetchingNextPage && hasNextPage &&

Loading...

} diff --git a/src/hooks/useImageGallery.js b/src/hooks/useImageGallery.js index b1511d93..4df92fc9 100644 --- a/src/hooks/useImageGallery.js +++ b/src/hooks/useImageGallery.js @@ -89,16 +89,19 @@ import { useInfiniteQuery } from "@tanstack/react-query"; const PAGE_SIZE = 10; const useImageGallery = (selectedProjectId, filters) => { - const hasFilters = filters && Object.values(filters).some( - value => Array.isArray(value) ? value.length > 0 : value !== null && value !== "" - ); + const hasFilters = + filters && + Object.values(filters).some((value) => + Array.isArray(value) ? value.length > 0 : value !== null && value !== "" + ); return useInfiniteQuery({ queryKey: ["imageGallery", selectedProjectId, hasFilters ? filters : null], enabled: !!selectedProjectId, - getNextPageParam: (lastPage, allPages) => { - if (!lastPage?.data?.length) return undefined; - return allPages.length + 1; + getNextPageParam: (lastPage) => { + const currentPage = lastPage?.data?.currentPage || 1; + const totalPages = lastPage?.data?.totalPages || 1; + return currentPage < totalPages ? currentPage + 1 : undefined; }, queryFn: async ({ pageParam = 1 }) => { const res = await ImageGalleryAPI.ImagesGet( @@ -107,7 +110,7 @@ const useImageGallery = (selectedProjectId, filters) => { pageParam, PAGE_SIZE ); - return res; + return res.data; // Important: use res.data to match API response }, }); }; diff --git a/src/pages/ImageGallery/ImageGalleryPage.jsx b/src/pages/ImageGallery/ImageGalleryPage.jsx index 74d50208..f191ed48 100644 --- a/src/pages/ImageGallery/ImageGalleryPage.jsx +++ b/src/pages/ImageGallery/ImageGalleryPage.jsx @@ -185,7 +185,8 @@ const ImageGalleryPage = () => { }, [hasNextPage, isFetchingNextPage, isLoading, fetchNextPage]); return ( -
+ +
{/* Card wrapper */}