feat: localize guest endpoints and caching
This commit is contained in:
Codex Agent
@@ -1,8 +1,7 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Page } from './_util';
|
||||
import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
|
||||
import { useParams, useSearchParams } from 'react-router-dom';
|
||||
import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
|
||||
import { Heart, Image as ImageIcon, Share2 } from 'lucide-react';
|
||||
import { likePhoto } from '../services/photosApi';
|
||||
@@ -11,6 +10,7 @@ import { fetchEvent, fetchStats, type EventData, type EventStats } from '../serv
|
||||
import { useTranslation } from '../i18n/useTranslation';
|
||||
import { sharePhotoLink } from '../lib/sharePhoto';
|
||||
import { useToast } from '../components/ToastHost';
|
||||
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
||||
|
||||
const allowedGalleryFilters: GalleryFilter[] = ['latest', 'popular', 'mine', 'photobooth'];
|
||||
|
||||
@@ -36,8 +36,8 @@ const normalizeImageUrl = (src?: string | null) => {
|
||||
|
||||
export default function GalleryPage() {
|
||||
const { token } = useParams<{ token?: string }>();
|
||||
const navigate = useNavigate();
|
||||
const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '');
|
||||
const { t, locale } = useTranslation();
|
||||
const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(token ?? '', locale);
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const photoIdParam = searchParams.get('photoId');
|
||||
const modeParam = searchParams.get('mode');
|
||||
@@ -48,9 +48,9 @@ export default function GalleryPage() {
|
||||
const [event, setEvent] = useState<EventData | null>(null);
|
||||
const [stats, setStats] = useState<EventStats | null>(null);
|
||||
const [eventLoading, setEventLoading] = useState(true);
|
||||
const { t } = useTranslation();
|
||||
const toast = useToast();
|
||||
const [shareTargetId, setShareTargetId] = React.useState<number | null>(null);
|
||||
const numberFormatter = React.useMemo(() => new Intl.NumberFormat(locale), [locale]);
|
||||
|
||||
useEffect(() => {
|
||||
setFilterState(parseGalleryFilter(modeParam));
|
||||
@@ -146,10 +146,11 @@ export default function GalleryPage() {
|
||||
if (!token) return;
|
||||
setShareTargetId(photo.id);
|
||||
try {
|
||||
const localizedTask = localizeTaskLabel(photo.task_title ?? null, locale);
|
||||
const result = await sharePhotoLink({
|
||||
token,
|
||||
photoId: photo.id,
|
||||
title: photo.task_title ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
|
||||
title: localizedTask ?? event?.name ?? t('share.title', 'Geteiltes Foto'),
|
||||
text: t('share.shareText', { event: event?.name ?? 'Fotospiel' }),
|
||||
});
|
||||
|
||||
@@ -167,55 +168,72 @@ export default function GalleryPage() {
|
||||
}
|
||||
|
||||
if (!token) {
|
||||
return <Page title="Galerie"><p>Event nicht gefunden.</p></Page>;
|
||||
return (
|
||||
<Page title={t('galleryPage.title', 'Galerie')}>
|
||||
<p>{t('galleryPage.eventNotFound', 'Event nicht gefunden.')}</p>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
if (eventLoading) {
|
||||
return <Page title="Galerie"><p>Lade Event-Info...</p></Page>;
|
||||
return (
|
||||
<Page title={t('galleryPage.title', 'Galerie')}>
|
||||
<p>{t('galleryPage.loadingEvent', 'Lade Event-Info...')}</p>
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
||||
const newPhotosBadgeText = t('galleryPage.badge.newPhotos', {
|
||||
count: numberFormatter.format(newCount),
|
||||
}, `${newCount} neue Fotos`);
|
||||
const badgeEmphasisClass = newCount > 0
|
||||
? 'border border-pink-200 bg-pink-500/15 text-pink-600'
|
||||
: 'border border-transparent bg-muted text-muted-foreground';
|
||||
|
||||
return (
|
||||
<Page title="Galerie">
|
||||
<section className="space-y-4 px-4">
|
||||
<div className="rounded-[32px] border border-white/40 bg-gradient-to-br from-pink-50 via-white to-white p-6 shadow-sm">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-wide text-muted-foreground">Live-Galerie</p>
|
||||
<div className="mt-1 flex items-center gap-2 text-2xl font-semibold text-foreground">
|
||||
<ImageIcon className="h-6 w-6 text-pink-500" aria-hidden />
|
||||
<span>{event?.name ?? 'Event'}</span>
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{photos.length} Fotos · {totalLikes} ❤️ · {stats?.onlineGuests ?? 0} Gäste online
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-start gap-2 sm:items-end">
|
||||
{newCount > 0 && (
|
||||
<Button size="sm" className="rounded-full" onClick={acknowledgeNew}>
|
||||
{newCount} neue Fotos ansehen
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/e/${encodeURIComponent(token)}/upload`)}
|
||||
>
|
||||
Neues Foto hochladen
|
||||
</Button>
|
||||
</div>
|
||||
<Page title="">
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-full bg-pink-500/10 text-pink-500">
|
||||
<ImageIcon className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">{t('galleryPage.title')}</h1>
|
||||
<p className="text-sm text-muted-foreground">{t('galleryPage.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{newCount > 0 ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={acknowledgeNew}
|
||||
className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold transition ${badgeEmphasisClass}`}
|
||||
>
|
||||
{newPhotosBadgeText}
|
||||
</button>
|
||||
) : (
|
||||
<span className={`inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold ${badgeEmphasisClass}`}>
|
||||
{newPhotosBadgeText}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<FiltersBar value={filter} onChange={setFilter} className="mt-2" />
|
||||
{loading && <p className="px-4">Lade…</p>}
|
||||
{loading && <p className="px-4">{t('galleryPage.loading', 'Lade…')}</p>}
|
||||
<div className="grid gap-3 px-4 pb-16 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{list.map((p: any) => {
|
||||
const imageUrl = normalizeImageUrl(p.thumbnail_path || p.file_path);
|
||||
const createdLabel = p.created_at
|
||||
? new Date(p.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
|
||||
: t('gallery.justNow', 'Gerade eben');
|
||||
: t('galleryPage.photo.justNow', 'Gerade eben');
|
||||
const likeCount = counts[p.id] ?? (p.likes_count || 0);
|
||||
const localizedTaskTitle = localizeTaskLabel(p.task_title ?? null, locale);
|
||||
const altSuffix = localizedTaskTitle
|
||||
? t('galleryPage.photo.altTaskSuffix', { task: localizedTaskTitle })
|
||||
: '';
|
||||
const altText = t('galleryPage.photo.alt', { id: p.id, suffix: altSuffix }, `Foto ${p.id}${altSuffix}`);
|
||||
|
||||
const openPhoto = () => {
|
||||
const index = list.findIndex((photo: any) => photo.id === p.id);
|
||||
@@ -237,7 +255,7 @@ export default function GalleryPage() {
|
||||
>
|
||||
<img
|
||||
src={imageUrl}
|
||||
alt={`Foto ${p.id}${p.task_title ? ` - ${p.task_title}` : ''}`}
|
||||
alt={altText}
|
||||
className="h-64 w-full object-cover transition duration-500 group-hover:scale-105"
|
||||
onError={(e) => {
|
||||
(e.target as HTMLImageElement).src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjRjNGNEY2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIxNCIgZmlsbD0iIzk5OSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZHk9Ii4zZW0iPk5vIEltYWdlPC90ZXh0Pjwvc3ZnPg==';
|
||||
@@ -246,10 +264,10 @@ export default function GalleryPage() {
|
||||
/>
|
||||
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent" aria-hidden />
|
||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 space-y-2 px-4 pb-4">
|
||||
{p.task_title && <p className="text-sm font-medium leading-tight line-clamp-2">{p.task_title}</p>}
|
||||
{localizedTaskTitle && <p className="text-sm font-medium leading-tight line-clamp-2">{localizedTaskTitle}</p>}
|
||||
<div className="flex items-center justify-between text-xs text-white/80">
|
||||
<span>{createdLabel}</span>
|
||||
<span>{p.uploader_name || 'Gast'}</span>
|
||||
<span>{p.uploader_name || t('galleryPage.photo.anonymous', 'Gast')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute bottom-3 right-3 flex items-center gap-2">
|
||||
@@ -260,7 +278,7 @@ export default function GalleryPage() {
|
||||
onShare(p);
|
||||
}}
|
||||
className={`flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-white/10 transition ${shareTargetId === p.id ? 'opacity-60' : 'hover:bg-white/20'}`}
|
||||
aria-label={t('share.button', 'Teilen')}
|
||||
aria-label={t('galleryPage.photo.shareAria', 'Foto teilen')}
|
||||
disabled={shareTargetId === p.id}
|
||||
>
|
||||
<Share2 className="h-4 w-4" aria-hidden />
|
||||
@@ -272,7 +290,7 @@ export default function GalleryPage() {
|
||||
onLike(p.id);
|
||||
}}
|
||||
className={`flex items-center gap-1 rounded-full border border-white/30 bg-white/10 px-3 py-1 text-sm font-medium transition ${liked.has(p.id) ? 'text-pink-300' : 'text-white'}`}
|
||||
aria-label="Foto liken"
|
||||
aria-label={t('galleryPage.photo.likeAria', 'Foto liken')}
|
||||
>
|
||||
<Heart className={`h-4 w-4 ${liked.has(p.id) ? 'fill-current' : ''}`} aria-hidden />
|
||||
{likeCount}
|
||||
|
||||
Reference in New Issue
Block a user