admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Creating a custom hook for ImageGallery to call an API.

Browse Source
This commit is contained in:
Kartik sharma 2025-07-11 13:13:44 +05:30 committed by pramod mahajan
parent 94358c7aa2
commit 85d10e3b17
1 changed files with 11 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/Gallary/ImageGallary.jsx
View File

@ -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;
if (idKey === "floorIds") {
id = batch.floorIds;
} else {
id = batch[idKey];
}
let id = idKey === "floorIds" ? batch.floorIds : 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)) {
return false;
}
if ((oldVal === null && newVal === "") || (oldVal === "" && newVal === null)) return false;
return oldVal !== newVal;
});
@ -352,12 +344,7 @@ const ImageGallery = () => {
return (
<div className={`gallery-container container-fluid ${isFilterPanelOpen ? "filter-panel-open-end" : ""}`}>
<Breadcrumb
data={[
{ label: "Home", link: "/" },
{ label: "Gallary", link: null },
]}
></Breadcrumb>
<Breadcrumb data={[{ label: "Home", link: "/" }, { label: "Gallary", link: null }]} />
<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 || ""
}`.trim();
const date = formatUTCToLocalTime(firstDoc?.uploadedAt)
const userName = `${firstDoc?.uploadedBy?.firstName || ""} ${firstDoc?.uploadedBy?.lastName || ""}`.trim();
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">
{userName}
</strong>
<span className="me-2">
{date}
</span>
<strong className="user-name-text">{userName}</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}>
Clear All
</button>
<button className="btn btn-primary btn-xs" onClick={handleApplyFilters}>
Apply Filters
</button>
<button className="btn btn-secondary btn-xs" onClick={handleClearAllFilters}>Clear All</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>