122 lines
4.3 KiB
TypeScript
122 lines
4.3 KiB
TypeScript
import React from 'react';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import { Button } from '@/components/ui/button';
|
|
import { fetchPhotoShare } from '../services/photosApi';
|
|
import { useTranslation } from '../i18n/useTranslation';
|
|
import { useToast } from '../components/ToastHost';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
interface ShareResponse {
|
|
slug: string;
|
|
expires_at?: string;
|
|
photo: {
|
|
id: number;
|
|
title?: string;
|
|
likes_count?: number;
|
|
emotion?: { name?: string; emoji?: string } | null;
|
|
image_urls: { full: string; thumbnail: string };
|
|
};
|
|
event?: { id: number; name?: string | null } | null;
|
|
}
|
|
|
|
export default function SharedPhotoPage() {
|
|
const { slug } = useParams<{ slug: string }>();
|
|
const { t } = useTranslation();
|
|
const toast = useToast();
|
|
const [state, setState] = React.useState<{
|
|
loading: boolean;
|
|
error: string | null;
|
|
data: ShareResponse | null;
|
|
}>({ loading: true, error: null, data: null });
|
|
|
|
React.useEffect(() => {
|
|
let active = true;
|
|
if (!slug) return;
|
|
|
|
setState({ loading: true, error: null, data: null });
|
|
fetchPhotoShare(slug)
|
|
.then((data) => {
|
|
if (!active) return;
|
|
setState({ loading: false, error: null, data });
|
|
})
|
|
.catch((error: any) => {
|
|
if (!active) return;
|
|
setState({ loading: false, error: error?.message ?? t('share.error', 'Moment konnte nicht geladen werden.'), data: null });
|
|
});
|
|
|
|
return () => {
|
|
active = false;
|
|
};
|
|
}, [slug, t]);
|
|
|
|
const handleCopy = React.useCallback(async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(window.location.href);
|
|
toast.push({ text: t('share.copySuccess', 'Link kopiert!') });
|
|
} catch {
|
|
toast.push({ text: t('share.copyError', 'Link konnte nicht kopiert werden.'), type: 'error' });
|
|
}
|
|
}, [toast, t]);
|
|
|
|
if (state.loading) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center gap-3 bg-gradient-to-br from-pink-50 to-white px-4 text-center">
|
|
<Loader2 className="h-8 w-8 animate-spin text-pink-500" aria-hidden />
|
|
<p className="text-sm text-muted-foreground">{t('share.loading', 'Moment wird geladen...')}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (state.error || !state.data) {
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-gradient-to-br from-pink-50 to-white px-6 text-center">
|
|
<p className="text-lg font-semibold text-foreground">{t('share.expiredTitle', 'Link abgelaufen')}</p>
|
|
<p className="text-sm text-muted-foreground max-w-md">{state.error ?? t('share.expiredDescription', 'Dieses Foto ist nicht mehr verfügbar.')}</p>
|
|
<Button asChild>
|
|
<Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { data } = state;
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-white via-pink-50 to-white px-4 py-8">
|
|
<div className="mx-auto flex max-w-2xl flex-col gap-5">
|
|
<div className="rounded-3xl border border-white/60 bg-white/80 p-6 text-center shadow">
|
|
<p className="text-xs uppercase tracking-wide text-muted-foreground">{t('share.title', 'Geteiltes Foto')}</p>
|
|
<h1 className="mt-2 text-2xl font-semibold text-foreground">{data.event?.name ?? t('share.defaultEvent', 'Ein besonderer Moment')}</h1>
|
|
{data.photo.title && (
|
|
<p className="mt-1 text-sm text-muted-foreground">{data.photo.title}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="overflow-hidden rounded-[32px] border border-white/60 bg-black">
|
|
<img
|
|
src={data.photo.image_urls.full}
|
|
alt={data.photo.title ?? 'Foto'}
|
|
className="h-full w-full object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
|
|
{data.photo.emotion && (
|
|
<p className="text-center text-sm text-muted-foreground">
|
|
{data.photo.emotion.emoji} {data.photo.emotion.name}
|
|
</p>
|
|
)}
|
|
|
|
<div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
|
|
<Button variant="secondary" onClick={handleCopy}>
|
|
{t('share.copyLink', 'Link kopieren')}
|
|
</Button>
|
|
<Button asChild>
|
|
<Link to="/event">{t('share.openEvent', 'Event öffnen')}</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|