feat: localize guest endpoints and caching
This commit is contained in:
Codex Agent
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Link, useParams } from 'react-router-dom';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { cn } from '@/lib/utils';
|
||||
@@ -18,32 +18,37 @@ import {
|
||||
} from '../services/achievementApi';
|
||||
import { useGuestIdentity } from '../context/GuestIdentityContext';
|
||||
import { Sparkles, Award, Trophy, Camera, Users, BarChart2, Flame } from 'lucide-react';
|
||||
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
|
||||
import type { LocaleCode } from '../i18n/messages';
|
||||
import { localizeTaskLabel } from '../lib/localizeTaskLabel';
|
||||
|
||||
function formatNumber(value: number): string {
|
||||
return new Intl.NumberFormat('de-DE').format(value);
|
||||
}
|
||||
const GENERIC_ERROR = 'GENERIC_ERROR';
|
||||
|
||||
function formatRelativeTime(input: string): string {
|
||||
function formatRelativeTimestamp(input: string, formatter: Intl.RelativeTimeFormat): string {
|
||||
const date = new Date(input);
|
||||
if (Number.isNaN(date.getTime())) return '';
|
||||
const diff = Date.now() - date.getTime();
|
||||
const diff = date.getTime() - Date.now();
|
||||
const minute = 60_000;
|
||||
const hour = 60 * minute;
|
||||
const day = 24 * hour;
|
||||
if (diff < minute) return 'gerade eben';
|
||||
if (diff < hour) {
|
||||
const minutes = Math.round(diff / minute);
|
||||
return `vor ${minutes} Min`;
|
||||
}
|
||||
if (diff < day) {
|
||||
const hours = Math.round(diff / hour);
|
||||
return `vor ${hours} Std`;
|
||||
}
|
||||
const days = Math.round(diff / day);
|
||||
return `vor ${days} Tagen`;
|
||||
const abs = Math.abs(diff);
|
||||
if (abs < minute) return formatter.format(0, 'second');
|
||||
if (abs < hour) return formatter.format(Math.round(diff / minute), 'minute');
|
||||
if (abs < day) return formatter.format(Math.round(diff / hour), 'hour');
|
||||
return formatter.format(Math.round(diff / day), 'day');
|
||||
}
|
||||
|
||||
function Leaderboard({ title, icon: Icon, entries, emptyCopy }: { title: string; icon: React.ElementType; entries: LeaderboardEntry[]; emptyCopy: string }) {
|
||||
type LeaderboardProps = {
|
||||
title: string;
|
||||
description: string;
|
||||
icon: React.ElementType;
|
||||
entries: LeaderboardEntry[];
|
||||
emptyCopy: string;
|
||||
formatNumber: (value: number) => string;
|
||||
t: TranslateFn;
|
||||
};
|
||||
|
||||
function Leaderboard({ title, description, icon: Icon, entries, emptyCopy, formatNumber, t }: LeaderboardProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center gap-2 pb-4">
|
||||
@@ -52,7 +57,7 @@ function Leaderboard({ title, icon: Icon, entries, emptyCopy }: { title: string;
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base font-semibold">{title}</CardTitle>
|
||||
<CardDescription className="text-xs">Top 5 Teilnehmer dieses Events</CardDescription>
|
||||
<CardDescription className="text-xs">{description}</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
@@ -64,11 +69,11 @@ function Leaderboard({ title, icon: Icon, entries, emptyCopy }: { title: string;
|
||||
<li key={`${entry.guest}-${index}`} className="flex items-center justify-between rounded-lg border border-border/50 bg-muted/30 px-3 py-2">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs font-semibold text-muted-foreground">#{index + 1}</span>
|
||||
<span className="font-medium text-foreground">{entry.guest || 'Gast'}</span>
|
||||
<span className="font-medium text-foreground">{entry.guest || t('achievements.leaderboard.guestFallback')}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>{entry.photos} Fotos</span>
|
||||
<span>{entry.likes} Likes</span>
|
||||
<span>{t('achievements.leaderboard.item.photos', { count: formatNumber(entry.photos) })}</span>
|
||||
<span>{t('achievements.leaderboard.item.likes', { count: formatNumber(entry.likes) })}</span>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
@@ -79,27 +84,21 @@ function Leaderboard({ title, icon: Icon, entries, emptyCopy }: { title: string;
|
||||
);
|
||||
}
|
||||
|
||||
function progressMeta(badge: AchievementBadge) {
|
||||
const target = badge.target ?? 0;
|
||||
const progress = badge.progress ?? 0;
|
||||
const ratio = target > 0 ? Math.min(1, progress / target) : 0;
|
||||
return {
|
||||
progress,
|
||||
target,
|
||||
ratio: badge.earned ? 1 : ratio,
|
||||
};
|
||||
}
|
||||
type BadgesGridProps = {
|
||||
badges: AchievementBadge[];
|
||||
t: TranslateFn;
|
||||
};
|
||||
|
||||
function BadgesGrid({ badges }: { badges: AchievementBadge[] }) {
|
||||
function BadgesGrid({ badges, t }: BadgesGridProps) {
|
||||
if (badges.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Badges</CardTitle>
|
||||
<CardDescription>Erfülle Aufgaben und sammle Likes, um Badges freizuschalten.</CardDescription>
|
||||
<CardTitle>{t('achievements.badges.title')}</CardTitle>
|
||||
<CardDescription>{t('achievements.badges.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Noch keine Badges verfügbar.</p>
|
||||
<p className="text-sm text-muted-foreground">{t('achievements.badges.empty')}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
@@ -108,13 +107,15 @@ function BadgesGrid({ badges }: { badges: AchievementBadge[] }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Badges</CardTitle>
|
||||
<CardDescription>Dein Fortschritt bei den verfügbaren Erfolgen.</CardDescription>
|
||||
<CardTitle>{t('achievements.badges.title')}</CardTitle>
|
||||
<CardDescription>{t('achievements.badges.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
||||
{badges.map((badge) => {
|
||||
const { ratio } = progressMeta(badge);
|
||||
const percentage = Math.round(ratio * 100);
|
||||
const target = badge.target ?? 0;
|
||||
const progress = badge.progress ?? 0;
|
||||
const ratio = target > 0 ? Math.min(1, progress / target) : 0;
|
||||
const percentage = Math.round((badge.earned ? 1 : ratio) * 100);
|
||||
return (
|
||||
<div
|
||||
key={badge.id}
|
||||
@@ -128,22 +129,12 @@ function BadgesGrid({ badges }: { badges: AchievementBadge[] }) {
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<p className="text-sm font-semibold text-foreground">{badge.title}</p>
|
||||
<p className="text-xs text-muted-foreground line-clamp-2">{badge.description}</p>
|
||||
<p className="text-xs text-muted-foreground">{badge.description}</p>
|
||||
</div>
|
||||
<span className="rounded-full bg-white/30 p-2 text-pink-500">
|
||||
<Award className="h-4 w-4" />
|
||||
</span>
|
||||
<span className="text-xs font-semibold text-muted-foreground">{percentage}%</span>
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<div className="h-2 w-full overflow-hidden rounded-full bg-muted/40">
|
||||
<div
|
||||
className={cn('h-2 rounded-full transition-all', badge.earned ? 'bg-emerald-500' : 'bg-pink-500')}
|
||||
style={{ width: `${Math.max(8, percentage)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">
|
||||
{badge.earned ? 'Freigeschaltet 🎉' : `Fortschritt: ${badge.progress}/${badge.target}`}
|
||||
</p>
|
||||
<div className="mt-3 h-2 rounded-full bg-muted">
|
||||
<div className="h-2 rounded-full bg-gradient-to-r from-pink-500 to-purple-500" style={{ width: `${percentage}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -153,21 +144,26 @@ function BadgesGrid({ badges }: { badges: AchievementBadge[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Timeline({ points }: { points: TimelinePoint[] }) {
|
||||
if (points.length === 0) {
|
||||
return null;
|
||||
}
|
||||
type TimelineProps = {
|
||||
points: TimelinePoint[];
|
||||
t: TranslateFn;
|
||||
formatNumber: (value: number) => string;
|
||||
};
|
||||
|
||||
function Timeline({ points, t, formatNumber }: TimelineProps) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Timeline</CardTitle>
|
||||
<CardDescription>Wie das Event im Laufe der Zeit Fahrt aufgenommen hat.</CardDescription>
|
||||
<CardTitle>{t('achievements.timeline.title')}</CardTitle>
|
||||
<CardDescription>{t('achievements.timeline.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
{points.map((point) => (
|
||||
<div key={point.date} className="flex items-center justify-between rounded-lg border border-border/40 bg-muted/20 px-3 py-2">
|
||||
<span className="font-medium text-foreground">{point.date}</span>
|
||||
<span className="text-muted-foreground">{point.photos} Fotos | {point.guests} Gäste</span>
|
||||
<span className="text-muted-foreground">
|
||||
{t('achievements.timeline.row', { photos: formatNumber(point.photos), guests: formatNumber(point.guests) })}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
@@ -175,16 +171,24 @@ function Timeline({ points }: { points: TimelinePoint[] }) {
|
||||
);
|
||||
}
|
||||
|
||||
function Feed({ feed }: { feed: FeedEntry[] }) {
|
||||
type FeedProps = {
|
||||
feed: FeedEntry[];
|
||||
t: TranslateFn;
|
||||
formatRelativeTime: (value: string) => string;
|
||||
locale: LocaleCode;
|
||||
formatNumber: (value: number) => string;
|
||||
};
|
||||
|
||||
function Feed({ feed, t, formatRelativeTime, locale, formatNumber }: FeedProps) {
|
||||
if (feed.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Live Feed</CardTitle>
|
||||
<CardDescription>Neue Uploads erscheinen hier in Echtzeit.</CardDescription>
|
||||
<CardTitle>{t('achievements.feed.title')}</CardTitle>
|
||||
<CardDescription>{t('achievements.feed.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Noch keine Uploads – starte die Kamera und lege los!</p>
|
||||
<p className="text-sm text-muted-foreground">{t('achievements.feed.empty')}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
@@ -193,159 +197,135 @@ function Feed({ feed }: { feed: FeedEntry[] }) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Live Feed</CardTitle>
|
||||
<CardDescription>Die neuesten Momente aus deinem Event.</CardDescription>
|
||||
<CardTitle>{t('achievements.feed.title')}</CardTitle>
|
||||
<CardDescription>{t('achievements.feed.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{feed.map((item) => (
|
||||
<div key={item.photoId} className="flex items-center gap-3 rounded-lg border border-border/40 bg-muted/20 p-3">
|
||||
{item.thumbnail ? (
|
||||
<img src={item.thumbnail} alt="Vorschau" className="h-16 w-16 rounded-md object-cover" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-md bg-muted"> <Camera className="h-6 w-6 text-muted-foreground" /> </div>
|
||||
)}
|
||||
<div className="flex-1 text-sm">
|
||||
<p className="font-semibold text-foreground">{item.guest || 'Gast'}</p>
|
||||
{item.task && <p className="text-xs text-muted-foreground">Aufgabe: {item.task}</p>}
|
||||
<div className="mt-1 flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>{formatRelativeTime(item.createdAt)}</span>
|
||||
<span>{item.likes} Likes</span>
|
||||
{feed.map((item) => {
|
||||
const taskLabel = localizeTaskLabel(item.task ?? null, locale);
|
||||
return (
|
||||
<div key={item.photoId} className="flex items-center gap-3 rounded-lg border border-border/40 bg-muted/20 p-3">
|
||||
{item.thumbnail ? (
|
||||
<img src={item.thumbnail} alt={t('achievements.feed.thumbnailAlt')} className="h-16 w-16 rounded-md object-cover" />
|
||||
) : (
|
||||
<div className="flex h-16 w-16 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
||||
<Camera className="h-6 w-6" aria-hidden />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 text-sm">
|
||||
<p className="font-semibold text-foreground">{item.guest || t('achievements.leaderboard.guestFallback')}</p>
|
||||
{taskLabel && <p className="text-xs text-muted-foreground">{t('achievements.feed.taskLabel', { task: taskLabel })}</p>}
|
||||
<div className="mt-1 flex items-center gap-4 text-xs text-muted-foreground">
|
||||
<span>{formatRelativeTime(item.createdAt)}</span>
|
||||
<span>{t('achievements.feed.likesLabel', { count: formatNumber(item.likes) })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
);
|
||||
})}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function Highlights({ topPhoto, trendingEmotion }: { topPhoto: TopPhotoHighlight | null; trendingEmotion: TrendingEmotionHighlight | null }) {
|
||||
type HighlightsProps = {
|
||||
topPhoto: TopPhotoHighlight | null;
|
||||
trendingEmotion: TrendingEmotionHighlight | null;
|
||||
t: TranslateFn;
|
||||
formatRelativeTime: (value: string) => string;
|
||||
locale: LocaleCode;
|
||||
formatNumber: (value: number) => string;
|
||||
};
|
||||
|
||||
function Highlights({ topPhoto, trendingEmotion, t, formatRelativeTime, locale, formatNumber }: HighlightsProps) {
|
||||
if (!topPhoto && !trendingEmotion) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{topPhoto && (
|
||||
<Card>
|
||||
const renderTopPhoto = () => {
|
||||
if (!topPhoto) return null;
|
||||
const localizedTask = localizeTaskLabel(topPhoto.task ?? null, locale);
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Publikumsliebling</CardTitle>
|
||||
<CardDescription>Das Foto mit den meisten Likes.</CardDescription>
|
||||
<CardTitle>{t('achievements.highlights.topTitle')}</CardTitle>
|
||||
<CardDescription>{t('achievements.highlights.topDescription')}</CardDescription>
|
||||
</div>
|
||||
<Trophy className="h-6 w-6 text-amber-400" />
|
||||
<Trophy className="h-6 w-6 text-amber-400" aria-hidden />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2 text-sm">
|
||||
<div className="overflow-hidden rounded-xl border border-border/40">
|
||||
{topPhoto.thumbnail ? (
|
||||
<img src={topPhoto.thumbnail} alt="Top Foto" className="h-48 w-full object-cover" />
|
||||
<img src={topPhoto.thumbnail} alt={t('achievements.highlights.topTitle')} className="h-48 w-full object-cover" />
|
||||
) : (
|
||||
<div className="flex h-48 w-full items-center justify-center bg-muted text-muted-foreground">Kein Vorschau-Bild</div>
|
||||
<div className="flex h-48 w-full items-center justify-center bg-muted text-muted-foreground">
|
||||
{t('achievements.highlights.noPreview')}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<p><span className="font-semibold text-foreground">{topPhoto.guest || 'Gast'}</span> – {topPhoto.likes} Likes</p>
|
||||
{topPhoto.task && <p className="text-muted-foreground">Aufgabe: {topPhoto.task}</p>}
|
||||
<p>
|
||||
<span className="font-semibold text-foreground">{topPhoto.guest || t('achievements.leaderboard.guestFallback')}</span>
|
||||
{` – ${t('achievements.highlights.likesAmount', { count: formatNumber(topPhoto.likes) })}`}
|
||||
</p>
|
||||
{localizedTask && (
|
||||
<p className="text-muted-foreground">
|
||||
{t('achievements.highlights.taskLabel', { task: localizedTask })}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">{formatRelativeTime(topPhoto.createdAt)}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
);
|
||||
};
|
||||
|
||||
{trendingEmotion && (
|
||||
<Card>
|
||||
const renderTrendingEmotion = () => {
|
||||
if (!trendingEmotion) return null;
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>Trend-Emotion</CardTitle>
|
||||
<CardDescription>Diese Stimmung taucht gerade besonders oft auf.</CardDescription>
|
||||
<CardTitle>{t('achievements.highlights.trendingTitle')}</CardTitle>
|
||||
<CardDescription>{t('achievements.highlights.trendingDescription')}</CardDescription>
|
||||
</div>
|
||||
<Flame className="h-6 w-6 text-pink-500" />
|
||||
<Flame className="h-6 w-6 text-pink-500" aria-hidden />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-lg font-semibold text-foreground">{trendingEmotion.name}</p>
|
||||
<p className="text-sm text-muted-foreground">{trendingEmotion.count} Fotos mit dieser Stimmung</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('achievements.highlights.trendingCount', { count: formatNumber(trendingEmotion.count) })}
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
{renderTopPhoto()}
|
||||
{renderTrendingEmotion()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function FlowSummary({ data, token }: { data: AchievementsPayload; token: string }) {
|
||||
const personal = data.personal;
|
||||
const tasksDone = personal?.tasks ?? data.summary.tasksSolved;
|
||||
const photos = personal?.photos ?? data.summary.totalPhotos;
|
||||
const likes = personal?.likes ?? data.summary.likesTotal;
|
||||
const guests = data.summary.uniqueGuests;
|
||||
const earnedBadges = personal?.badges.filter((badge) => badge.earned).length ?? 0;
|
||||
const nextBadge = personal?.badges.find((badge) => !badge.earned);
|
||||
type PersonalActionsProps = {
|
||||
token: string;
|
||||
t: TranslateFn;
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="rounded-[32px] border border-slate-100 bg-white/95 p-6 shadow-sm dark:border-white/10 dark:bg-slate-900/70">
|
||||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.35em] text-slate-500 dark:text-white/60">Dein Flow</p>
|
||||
<h2 className="mt-1 text-2xl font-semibold text-slate-900 dark:text-white">
|
||||
{tasksDone === 0 ? 'Starte deine erste Mission.' : 'Weiter so, dein Event lebt!'}
|
||||
</h2>
|
||||
<p className="text-sm text-slate-500 dark:text-white/70">
|
||||
{nextBadge ? `Noch ${Math.max(0, nextBadge.target - nextBadge.progress)} Schritte bis „${nextBadge.title}“.` : 'Alle aktuellen Badges freigeschaltet.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button asChild>
|
||||
<Link to={`/e/${encodeURIComponent(token)}/tasks`} className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Aufgabe ziehen
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to={`/e/${encodeURIComponent(token)}/gallery`} className="flex items-center gap-2">
|
||||
<Camera className="h-4 w-4" />
|
||||
Galerie öffnen
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<FlowStat label="Deine Aufgaben" value={formatNumber(tasksDone)} />
|
||||
<FlowStat label="Fotos gesamt" value={formatNumber(photos)} />
|
||||
<FlowStat label="Likes gesammelt" value={formatNumber(likes)} />
|
||||
<FlowStat label="Badges" value={`${earnedBadges}/${personal?.badges.length ?? 0}`} />
|
||||
</div>
|
||||
<div className="mt-4 grid gap-3 sm:grid-cols-2">
|
||||
<FlowStat label="Aktive Gäste" value={formatNumber(guests)} />
|
||||
<FlowStat label="Letzte Mission" value={personal ? personal.guestName || 'Gast' : 'Event'} muted />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function FlowStat({ label, value, muted = false }: { label: string; value: string; muted?: boolean }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-2xl border border-slate-100 bg-white/80 px-4 py-3 text-left shadow-sm dark:border-white/10 dark:bg-white/5',
|
||||
muted && 'opacity-80'
|
||||
)}
|
||||
>
|
||||
<p className="text-[0.65rem] uppercase tracking-[0.35em] text-slate-400 dark:text-white/60">{label}</p>
|
||||
<p className="mt-2 text-xl font-semibold text-slate-900 dark:text-white">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PersonalActions({ token }: { token: string }) {
|
||||
function PersonalActions({ token, t }: PersonalActionsProps) {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild>
|
||||
<Link to={`/e/${encodeURIComponent(token)}/upload`} className="flex items-center gap-2">
|
||||
<Camera className="h-4 w-4" />
|
||||
Neues Foto hochladen
|
||||
<Camera className="h-4 w-4" aria-hidden />
|
||||
{t('achievements.personal.actions.upload')}
|
||||
</Link>
|
||||
</Button>
|
||||
<Button variant="outline" asChild>
|
||||
<Link to={`/e/${encodeURIComponent(token)}/tasks`} className="flex items-center gap-2">
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Aufgabe ziehen
|
||||
<Sparkles className="h-4 w-4" aria-hidden />
|
||||
{t('achievements.personal.actions.tasks')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
@@ -355,11 +335,17 @@ function PersonalActions({ token }: { token: string }) {
|
||||
export default function AchievementsPage() {
|
||||
const { token } = useParams<{ token: string }>();
|
||||
const identity = useGuestIdentity();
|
||||
const { t, locale } = useTranslation();
|
||||
const [data, setData] = useState<AchievementsPayload | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [activeTab, setActiveTab] = useState<'personal' | 'event' | 'feed'>('personal');
|
||||
|
||||
const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
|
||||
const formatNumber = (value: number) => numberFormatter.format(value);
|
||||
const relativeFormatter = useMemo(() => new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }), [locale]);
|
||||
const formatRelative = (value: string) => formatRelativeTimestamp(value, relativeFormatter);
|
||||
|
||||
const personalName = identity.hydrated && identity.name ? identity.name : undefined;
|
||||
|
||||
useEffect(() => {
|
||||
@@ -368,7 +354,11 @@ export default function AchievementsPage() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
fetchAchievements(token, personalName, controller.signal)
|
||||
fetchAchievements(token, {
|
||||
guestName: personalName,
|
||||
locale,
|
||||
signal: controller.signal,
|
||||
})
|
||||
.then((payload) => {
|
||||
setData(payload);
|
||||
if (!payload.personal) {
|
||||
@@ -378,12 +368,11 @@ export default function AchievementsPage() {
|
||||
.catch((err) => {
|
||||
if (err.name === 'AbortError') return;
|
||||
console.error('Failed to load achievements', err);
|
||||
setError(err.message || 'Erfolge konnten nicht geladen werden.');
|
||||
setError(err.message || GENERIC_ERROR);
|
||||
})
|
||||
.finally(() => setLoading(false));
|
||||
|
||||
return () => controller.abort();
|
||||
}, [token, personalName]);
|
||||
}, [token, personalName, locale]);
|
||||
|
||||
const hasPersonal = Boolean(data?.personal);
|
||||
|
||||
@@ -396,11 +385,11 @@ export default function AchievementsPage() {
|
||||
<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">
|
||||
<Award className="h-5 w-5" />
|
||||
<Award className="h-5 w-5" aria-hidden />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Erfolge</h1>
|
||||
<p className="text-sm text-muted-foreground">Behalte deine Highlights, Badges und die aktivsten Gäste im Blick.</p>
|
||||
<h1 className="text-2xl font-semibold text-foreground">{t('achievements.page.title')}</h1>
|
||||
<p className="text-sm text-muted-foreground">{t('achievements.page.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -416,9 +405,9 @@ export default function AchievementsPage() {
|
||||
{!loading && error && (
|
||||
<Alert variant="destructive">
|
||||
<AlertDescription className="flex items-center justify-between gap-3">
|
||||
<span>{error}</span>
|
||||
<span>{error === GENERIC_ERROR ? t('achievements.page.loadError') : error}</span>
|
||||
<Button variant="outline" size="sm" onClick={() => setActiveTab(hasPersonal ? 'personal' : 'event')}>
|
||||
Erneut versuchen
|
||||
{t('achievements.page.retry')}
|
||||
</Button>
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
@@ -426,8 +415,6 @@ export default function AchievementsPage() {
|
||||
|
||||
{!loading && !error && data && (
|
||||
<>
|
||||
<FlowSummary data={data} token={token} />
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Button
|
||||
variant={activeTab === 'personal' ? 'default' : 'outline'}
|
||||
@@ -435,24 +422,24 @@ export default function AchievementsPage() {
|
||||
disabled={!hasPersonal}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Sparkles className="h-4 w-4" />
|
||||
Meine Erfolge
|
||||
<Sparkles className="h-4 w-4" aria-hidden />
|
||||
{t('achievements.page.buttons.personal')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'event' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('event')}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<Users className="h-4 w-4" />
|
||||
Event Highlights
|
||||
<Users className="h-4 w-4" aria-hidden />
|
||||
{t('achievements.page.buttons.event')}
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'feed' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('feed')}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<BarChart2 className="h-4 w-4" />
|
||||
Live Feed
|
||||
<BarChart2 className="h-4 w-4" aria-hidden />
|
||||
{t('achievements.page.buttons.feed')}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -463,41 +450,68 @@ export default function AchievementsPage() {
|
||||
<Card>
|
||||
<CardHeader className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-lg font-semibold">Hi {data.personal.guestName || identity.name || 'Gast'}!</CardTitle>
|
||||
<CardTitle className="text-lg font-semibold">
|
||||
{t('achievements.personal.greeting', { name: data.personal.guestName || identity.name || t('achievements.leaderboard.guestFallback') })}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{data.personal.photos} Fotos | {data.personal.tasks} Aufgaben | {data.personal.likes} Likes
|
||||
{t('achievements.personal.stats', {
|
||||
photos: formatNumber(data.personal.photos),
|
||||
tasks: formatNumber(data.personal.tasks),
|
||||
likes: formatNumber(data.personal.likes),
|
||||
})}
|
||||
</CardDescription>
|
||||
</div>
|
||||
<PersonalActions token={token} />
|
||||
<PersonalActions token={token} t={t} />
|
||||
</CardHeader>
|
||||
</Card>
|
||||
|
||||
<BadgesGrid badges={data.personal.badges} />
|
||||
<BadgesGrid badges={data.personal.badges} t={t} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'event' && (
|
||||
<div className="space-y-5">
|
||||
<Highlights topPhoto={data.highlights.topPhoto} trendingEmotion={data.highlights.trendingEmotion} />
|
||||
<Timeline points={data.highlights.timeline} />
|
||||
<Highlights
|
||||
topPhoto={data.highlights.topPhoto}
|
||||
trendingEmotion={data.highlights.trendingEmotion}
|
||||
t={t}
|
||||
formatRelativeTime={formatRelative}
|
||||
locale={locale}
|
||||
formatNumber={formatNumber}
|
||||
/>
|
||||
<Timeline points={data.highlights.timeline} t={t} formatNumber={formatNumber} />
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<Leaderboard
|
||||
title="Top Uploads"
|
||||
title={t('achievements.leaderboard.uploadsTitle')}
|
||||
description={t('achievements.leaderboard.description')}
|
||||
icon={Users}
|
||||
entries={data.leaderboards.uploads}
|
||||
emptyCopy="Noch keine Uploads – sobald Fotos vorhanden sind, erscheinen sie hier."
|
||||
emptyCopy={t('achievements.leaderboard.uploadsEmpty')}
|
||||
t={t}
|
||||
formatNumber={formatNumber}
|
||||
/>
|
||||
<Leaderboard
|
||||
title="Beliebteste Gäste"
|
||||
title={t('achievements.leaderboard.likesTitle')}
|
||||
description={t('achievements.leaderboard.description')}
|
||||
icon={Trophy}
|
||||
entries={data.leaderboards.likes}
|
||||
emptyCopy="Likes fehlen noch – motiviere die Gäste, Fotos zu liken."
|
||||
emptyCopy={t('achievements.leaderboard.likesEmpty')}
|
||||
t={t}
|
||||
formatNumber={formatNumber}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'feed' && <Feed feed={data.feed} />}
|
||||
{activeTab === 'feed' && (
|
||||
<Feed
|
||||
feed={data.feed}
|
||||
t={t}
|
||||
formatRelativeTime={formatRelative}
|
||||
locale={locale}
|
||||
formatNumber={formatNumber}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function HomePage() {
|
||||
const stats = useEventStats();
|
||||
const { event } = useEventData();
|
||||
const { completedCount } = useGuestTaskProgress(token);
|
||||
const { t } = useTranslation();
|
||||
const { t, locale } = useTranslation();
|
||||
const { branding } = useEventBranding();
|
||||
|
||||
const heroStorageKey = token ? `guestHeroDismissed_${token}` : 'guestHeroDismissed';
|
||||
@@ -86,7 +86,15 @@ export default function HomePage() {
|
||||
async function loadMissions() {
|
||||
setMissionLoading(true);
|
||||
try {
|
||||
const response = await fetch(`/api/v1/events/${encodeURIComponent(token)}/tasks`);
|
||||
const response = await fetch(
|
||||
`/api/v1/events/${encodeURIComponent(token)}/tasks?locale=${encodeURIComponent(locale)}`,
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!response.ok) throw new Error('Aufgaben konnten nicht geladen werden.');
|
||||
const payload = await response.json();
|
||||
if (cancelled) return;
|
||||
@@ -119,7 +127,7 @@ export default function HomePage() {
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [shuffleMissionPreview, token]);
|
||||
}, [shuffleMissionPreview, token, locale]);
|
||||
|
||||
if (!token) {
|
||||
return null;
|
||||
|
||||
@@ -34,7 +34,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
const navigate = useNavigate();
|
||||
const photoId = params.photoId;
|
||||
const eventToken = params.token || token;
|
||||
const { t } = useTranslation();
|
||||
const { t, locale } = useTranslation();
|
||||
const toast = useToast();
|
||||
|
||||
const [standalonePhoto, setStandalonePhoto] = useState<Photo | null>(null);
|
||||
@@ -62,7 +62,12 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/photos/${photoId}`);
|
||||
const res = await fetch(`/api/v1/photos/${photoId}?locale=${encodeURIComponent(locale)}`, {
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
},
|
||||
});
|
||||
if (res.ok) {
|
||||
const fetchedPhoto: Photo = await res.json();
|
||||
setStandalonePhoto(fetchedPhoto);
|
||||
@@ -84,7 +89,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
} else if (!isStandalone) {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [isStandalone, photoId, eventToken, standalonePhoto, location.state, t]);
|
||||
}, [isStandalone, photoId, eventToken, standalonePhoto, location.state, t, locale]);
|
||||
|
||||
// Update likes when photo changes
|
||||
React.useEffect(() => {
|
||||
@@ -148,7 +153,15 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
(async () => {
|
||||
setTaskLoading(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/events/${encodeURIComponent(eventToken)}/tasks`);
|
||||
const res = await fetch(
|
||||
`/api/v1/events/${encodeURIComponent(eventToken)}/tasks?locale=${encodeURIComponent(locale)}`,
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (res.ok) {
|
||||
const tasks = await res.json();
|
||||
const foundTask = tasks.find((t: any) => t.id === taskId);
|
||||
@@ -179,7 +192,7 @@ export default function PhotoLightbox({ photos, currentIndex, onClose, onIndexCh
|
||||
setTaskLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [photo?.task_id, eventToken, t]);
|
||||
}, [photo?.task_id, eventToken, t, locale]);
|
||||
|
||||
async function onLike() {
|
||||
if (liked || !photo) return;
|
||||
|
||||
@@ -8,6 +8,7 @@ import { useGuestTaskProgress } from '../hooks/useGuestTaskProgress';
|
||||
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import EmotionPicker from '../components/EmotionPicker';
|
||||
import { useEventBranding } from '../context/EventBrandingContext';
|
||||
import { useTranslation, type TranslateFn } from '../i18n/useTranslation';
|
||||
|
||||
@@ -168,7 +169,7 @@ export default function TaskPickerPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const { branding } = useEventBranding();
|
||||
const { t } = useTranslation();
|
||||
const { t, locale } = useTranslation();
|
||||
|
||||
const { completedCount, isCompleted } = useGuestTaskProgress(eventKey);
|
||||
|
||||
@@ -194,31 +195,61 @@ export default function TaskPickerPage() {
|
||||
}), [branding.primaryColor, branding.secondaryColor]);
|
||||
|
||||
const recentTaskIdsRef = React.useRef<number[]>([]);
|
||||
const tasksCacheRef = React.useRef<Map<string, { data: Task[]; etag?: string | null }>>(new Map());
|
||||
const initialEmotionRef = React.useRef(false);
|
||||
|
||||
const fetchTasks = React.useCallback(async () => {
|
||||
if (!eventKey) return;
|
||||
const cacheKey = `${eventKey}:${locale}`;
|
||||
const cached = tasksCacheRef.current.get(cacheKey);
|
||||
setIsFetching(true);
|
||||
setLoading(true);
|
||||
setLoading(!cached);
|
||||
setError(null);
|
||||
|
||||
if (cached) {
|
||||
setTasks(cached.data);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/tasks`);
|
||||
const headers: HeadersInit = {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
};
|
||||
|
||||
if (cached?.etag) {
|
||||
headers['If-None-Match'] = cached.etag;
|
||||
}
|
||||
|
||||
const response = await fetch(
|
||||
`/api/v1/events/${encodeURIComponent(eventKey)}/tasks?locale=${encodeURIComponent(locale)}`,
|
||||
{ headers }
|
||||
);
|
||||
|
||||
if (response.status === 304 && cached) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!response.ok) throw new Error('Aufgaben konnten nicht geladen werden.');
|
||||
const payload = await response.json();
|
||||
if (Array.isArray(payload)) {
|
||||
const entry = { data: payload, etag: response.headers.get('ETag') };
|
||||
tasksCacheRef.current.set(cacheKey, entry);
|
||||
setTasks(payload);
|
||||
} else {
|
||||
tasksCacheRef.current.set(cacheKey, { data: [], etag: response.headers.get('ETag') });
|
||||
setTasks([]);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load tasks', err);
|
||||
setError(err instanceof Error ? err.message : 'Unbekannter Fehler');
|
||||
setTasks([]);
|
||||
if (!cached) {
|
||||
setTasks([]);
|
||||
}
|
||||
} finally {
|
||||
setIsFetching(false);
|
||||
setLoading(false);
|
||||
}
|
||||
}, [eventKey]);
|
||||
}, [eventKey, locale]);
|
||||
|
||||
React.useEffect(() => {
|
||||
fetchTasks();
|
||||
@@ -348,8 +379,12 @@ export default function TaskPickerPage() {
|
||||
const controller = new AbortController();
|
||||
setPhotoPoolLoading(true);
|
||||
setPhotoPoolError(null);
|
||||
fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/photos?locale=de`, {
|
||||
fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/photos?locale=${encodeURIComponent(locale)}`, {
|
||||
signal: controller.signal,
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (!res.ok) {
|
||||
@@ -373,7 +408,7 @@ export default function TaskPickerPage() {
|
||||
});
|
||||
|
||||
return () => controller.abort();
|
||||
}, [eventKey, photoPool.length, t]);
|
||||
}, [eventKey, photoPool.length, t, locale]);
|
||||
|
||||
const similarPhotos = React.useMemo(() => {
|
||||
if (!currentTask) return [];
|
||||
|
||||
@@ -110,7 +110,7 @@ export default function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
const [searchParams] = useSearchParams();
|
||||
const { markCompleted, completedCount } = useGuestTaskProgress(token);
|
||||
const { t } = useTranslation();
|
||||
const { t, locale } = useTranslation();
|
||||
const stats = useEventStats();
|
||||
|
||||
const taskIdParam = searchParams.get('task');
|
||||
@@ -209,7 +209,15 @@ const [canUpload, setCanUpload] = useState(true);
|
||||
try {
|
||||
setLoadingTask(true);
|
||||
|
||||
const res = await fetch(`/api/v1/events/${encodeURIComponent(eventKey)}/tasks`);
|
||||
const res = await fetch(
|
||||
`/api/v1/events/${encodeURIComponent(eventKey)}/tasks?locale=${encodeURIComponent(locale)}`,
|
||||
{
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'X-Locale': locale,
|
||||
},
|
||||
}
|
||||
);
|
||||
if (!res.ok) throw new Error('Tasks konnten nicht geladen werden');
|
||||
const payload = (await res.json()) as unknown;
|
||||
const entries = Array.isArray(payload) ? payload.filter(isTaskPayload) : [];
|
||||
@@ -264,7 +272,7 @@ const [canUpload, setCanUpload] = useState(true);
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [eventKey, taskId, emotionSlug, t, token]);
|
||||
}, [eventKey, taskId, emotionSlug, t, token, locale]);
|
||||
|
||||
// Check upload limits
|
||||
useEffect(() => {
|
||||
|
||||
Reference in New Issue
Block a user