101 lines
3.3 KiB
JavaScript
101 lines
3.3 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
||
import "./ImagePop.css";
|
||
import { useModal } from "./ModalContext";
|
||
import moment from "moment";
|
||
|
||
const ImagePop = ({ batch, initialIndex = 0 }) => {
|
||
const { closeModal } = useModal();
|
||
const [currentIndex, setCurrentIndex] = useState(initialIndex);
|
||
|
||
// Effect to update currentIndex if the initialIndex prop changes
|
||
useEffect(() => {
|
||
setCurrentIndex(initialIndex);
|
||
}, [initialIndex, batch]);
|
||
|
||
// If no batch or documents are provided, don't render
|
||
if (!batch || !batch.documents || batch.documents.length === 0) return null;
|
||
|
||
// Get the current image document from the batch's documents array
|
||
const image = batch.documents[currentIndex];
|
||
|
||
// Fallback if for some reason the image at the current index doesn't exist
|
||
if (!image) return null;
|
||
|
||
// Format details for display from the individual image document
|
||
const fullName = `${image.uploadedBy?.firstName || ""} ${
|
||
image.uploadedBy?.lastName || ""
|
||
}`.trim();
|
||
const date = moment(image.uploadedAt).format("YYYY-MM-DD");
|
||
const time = moment(image.uploadedAt).format("hh:mm A");
|
||
|
||
// Location and category details from the 'batch' object (as previously corrected)
|
||
const buildingName = batch.buildingName;
|
||
const floorName = batch.floorName;
|
||
const workAreaName = batch.workAreaName;
|
||
const activityName = batch.activityName;
|
||
const batchComment = batch.comment;
|
||
|
||
// Handler for navigating to the previous image
|
||
const handlePrev = () => {
|
||
setCurrentIndex((prevIndex) => Math.max(0, prevIndex - 1));
|
||
};
|
||
|
||
// Handler for navigating to the next image
|
||
const handleNext = () => {
|
||
setCurrentIndex((prevIndex) =>
|
||
Math.min(batch.documents.length - 1, prevIndex + 1)
|
||
);
|
||
};
|
||
|
||
// Determine if previous/next buttons should be enabled/visible
|
||
const hasPrev = currentIndex > 0;
|
||
const hasNext = currentIndex < batch.documents.length - 1;
|
||
|
||
return (
|
||
<div className="image-modal-overlay">
|
||
<div className="image-modal-content">
|
||
{/* Close button */}
|
||
<button className="close-button" onClick={closeModal}>
|
||
×
|
||
</button>
|
||
|
||
{/* Previous button, only shown if there's a previous image */}
|
||
{hasPrev && (
|
||
<button className="nav-button prev-button" onClick={handlePrev}>
|
||
‹ {/* Unicode for single left angle quotation mark */}
|
||
</button>
|
||
)}
|
||
|
||
{/* The main image display */}
|
||
<img src={image.url} alt="Preview" className="modal-image" />
|
||
|
||
{/* Next button, only shown if there's a next image */}
|
||
{hasNext && (
|
||
<button className="nav-button next-button" onClick={handleNext}>
|
||
› {/* Unicode for single right angle quotation mark */}
|
||
</button>
|
||
)}
|
||
|
||
{/* Image details */}
|
||
<div className="image-details">
|
||
<p>
|
||
<strong>👤 Uploaded By:</strong> {fullName}
|
||
</p>
|
||
<p>
|
||
<strong>📅 Date:</strong> {date} {time}
|
||
</p>
|
||
<p>
|
||
<strong>🏢 Location:</strong> {buildingName} > {floorName} >{" "}
|
||
{workAreaName || "Unknown"} > {activityName}
|
||
</p>
|
||
<p>
|
||
{/* Display the comment from the batch object */}
|
||
<strong>📝 Comments:</strong> {batchComment || "N/A"}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ImagePop; |