137 lines
4.1 KiB
TypeScript
137 lines
4.1 KiB
TypeScript
import React, { useRef, useEffect, useState, ReactNode } from 'react';
|
|
import { FaTrashAlt } from 'react-icons/fa';
|
|
import { openConfirm } from './ConfirmModal';
|
|
|
|
interface DatasetImageCardProps {
|
|
imageUrl: string;
|
|
alt: string;
|
|
children?: ReactNode;
|
|
className?: string;
|
|
onDelete?: () => void;
|
|
}
|
|
|
|
const DatasetImageCard: React.FC<DatasetImageCardProps> = ({
|
|
imageUrl,
|
|
alt,
|
|
children,
|
|
className = '',
|
|
onDelete = () => {},
|
|
}) => {
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
const [isVisible, setIsVisible] = useState<boolean>(false);
|
|
const [loaded, setLoaded] = useState<boolean>(false);
|
|
const [isCaptionLoaded, setIsCaptionLoaded] = useState<boolean>(false);
|
|
const [caption, setCaption] = useState<string>('');
|
|
const isGettingCaption = useRef<boolean>(false);
|
|
|
|
const fetchCaption = async () => {
|
|
try {
|
|
if (isGettingCaption.current || isCaptionLoaded) return;
|
|
isGettingCaption.current = true;
|
|
const response = await fetch(`/api/caption/${encodeURIComponent(imageUrl)}`);
|
|
const data = await response.text();
|
|
setCaption(data);
|
|
setIsCaptionLoaded(true);
|
|
} catch (error) {
|
|
console.error('Error fetching caption:', error);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
isVisible && fetchCaption();
|
|
}, [isVisible]);
|
|
|
|
useEffect(() => {
|
|
// Create intersection observer to check visibility
|
|
const observer = new IntersectionObserver(
|
|
entries => {
|
|
if (entries[0].isIntersecting) {
|
|
setIsVisible(true);
|
|
observer.disconnect();
|
|
}
|
|
},
|
|
{ threshold: 0.1 },
|
|
);
|
|
|
|
if (cardRef.current) {
|
|
observer.observe(cardRef.current);
|
|
}
|
|
|
|
return () => {
|
|
observer.disconnect();
|
|
};
|
|
}, []);
|
|
|
|
const handleLoad = (): void => {
|
|
setLoaded(true);
|
|
};
|
|
|
|
return (
|
|
<div className={`flex flex-col ${className}`}>
|
|
{/* Square image container */}
|
|
<div
|
|
ref={cardRef}
|
|
className="relative w-full"
|
|
style={{ paddingBottom: '100%' }} // Make it square
|
|
>
|
|
<div className="absolute inset-0 rounded-t-lg shadow-md">
|
|
{isVisible && (
|
|
<img
|
|
src={`/api/img/${encodeURIComponent(imageUrl)}`}
|
|
alt={alt}
|
|
onLoad={handleLoad}
|
|
className={`w-full h-full object-contain transition-opacity duration-300 ${
|
|
loaded ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
/>
|
|
)}
|
|
{children && <div className="absolute inset-0 flex items-center justify-center">{children}</div>}
|
|
<div className="absolute top-1 right-1">
|
|
<button
|
|
className="bg-gray-800 rounded-full p-2"
|
|
onClick={() => {
|
|
openConfirm({
|
|
title: 'Delete Image',
|
|
message: 'Are you sure you want to delete this image? This action cannot be undone.',
|
|
type: 'warning',
|
|
confirmText: 'Delete',
|
|
onConfirm: () => {
|
|
fetch('/api/img/delete', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ imgPath: imageUrl }),
|
|
})
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
console.log('Image deleted:', data);
|
|
onDelete();
|
|
})
|
|
.catch(error => {
|
|
console.error('Error deleting image:', error);
|
|
});
|
|
},
|
|
});
|
|
}}
|
|
>
|
|
<FaTrashAlt />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Text area below the image */}
|
|
<div className="w-full p-2 bg-gray-800 text-white text-sm rounded-b-lg h-[75px]">
|
|
{isVisible && isCaptionLoaded && (
|
|
<form>
|
|
<textarea className="w-full bg-transparent resize-none" defaultValue={caption} rows={3} />
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DatasetImageCard;
|