64 lines
2.1 KiB
TypeScript
64 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import { useLocation, useNavigate, useParams } from 'react-router-dom';
|
|
import { Dialog, DialogContent } from '@/components/ui/dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Heart } from 'lucide-react';
|
|
import { likePhoto } from '../services/photosApi';
|
|
|
|
type Photo = { id: number; file_path?: string; thumbnail_path?: string; likes_count?: number; created_at?: string };
|
|
|
|
export default function PhotoLightbox() {
|
|
const nav = useNavigate();
|
|
const { state } = useLocation();
|
|
const { photoId } = useParams();
|
|
const [photo, setPhoto] = React.useState<Photo | null>((state as any)?.photo ?? null);
|
|
|
|
const [likes, setLikes] = React.useState<number | null>(null);
|
|
const [liked, setLiked] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (photo) return;
|
|
(async () => {
|
|
const res = await fetch(`/api/v1/photos/${photoId}`);
|
|
if (res.ok) setPhoto(await res.json());
|
|
})();
|
|
}, [photo, photoId]);
|
|
|
|
React.useEffect(() => {
|
|
if (photo && likes === null) setLikes(photo.likes_count ?? 0);
|
|
}, [photo, likes]);
|
|
|
|
async function onLike() {
|
|
if (liked || !photo) return;
|
|
setLiked(true);
|
|
const c = await likePhoto(photo.id);
|
|
setLikes(c);
|
|
}
|
|
|
|
function onOpenChange(open: boolean) {
|
|
if (!open) nav(-1);
|
|
}
|
|
|
|
return (
|
|
<Dialog open onOpenChange={onOpenChange}>
|
|
<DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
|
|
<div className="flex items-center justify-between p-2">
|
|
<div className="flex items-center gap-2">
|
|
<Button variant="secondary" size="sm" onClick={onLike} disabled={liked}>
|
|
<Heart className="mr-1 h-4 w-4" /> {likes ?? 0}
|
|
</Button>
|
|
</div>
|
|
<Button variant="secondary" size="sm" onClick={() => nav(-1)}>Schließen</Button>
|
|
</div>
|
|
<div className="flex items-center justify-center">
|
|
{photo ? (
|
|
<img src={photo.file_path || photo.thumbnail_path} alt="Foto" className="max-h-[80vh] w-auto" />
|
|
) : (
|
|
<div className="p-6">Lade…</div>
|
|
)}
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|