paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

fix: Add localized date formatting to gallery views

Browse Source 
- Update GalleryLayout to use localized date formatting
- Update GalleryPage to use localized date formatting
- Dates now properly display in German/English based on selected language

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
paul
2025-07-09 07:11:08 +02:00
parent 12ba91952e
commit c8cfce3e36
2 changed files with 10 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/gallery/GalleryLayout.tsx
+5 -3
View File
@@ -1,8 +1,9 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { Calendar, Clock, Download, LogOut } from 'lucide-react';
import { format, parseISO } from 'date-fns';
import { parseISO } from 'date-fns';
import { useTranslation } from 'react-i18next';
import { useLocalizedDate } from '../../hooks/useLocalizedDate';
import { Button } from '../common';
import { DynamicFavicon } from '../common/DynamicFavicon';
@@ -42,6 +43,7 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
children,
}) => {
const { t } = useTranslation();
const { format } = useLocalizedDate();
return (
<div className="min-h-screen bg-neutral-50">
{/* Dynamic Favicon */}
@@ -78,13 +80,13 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
{event.event_date && (
<span className="flex items-center">
<Calendar className="w-4 h-4 mr-1" />
{format(parseISO(event.event_date), 'MMMM d, yyyy')}
{format(parseISO(event.event_date), 'PP')}
</span>
)}
{event.expires_at && (
<span className="flex items-center">
<Clock className="w-4 h-4 mr-1" />
{t('gallery.expires')} {format(parseISO(event.expires_at), 'MMM d')}
{t('gallery.expires')} {format(parseISO(event.expires_at), 'PP')}
</span>
)}
</div>
frontend/src/pages/GalleryPage.tsx
+5 -3
View File
@@ -1,8 +1,9 @@
import React, { useState } from 'react';
import { useParams, Link } from 'react-router-dom';
import { Camera, Calendar, AlertCircle, Clock } from 'lucide-react';
import { format, differenceInDays, parseISO } from 'date-fns';
import { differenceInDays, parseISO } from 'date-fns';
import { useTranslation } from 'react-i18next';
import { useLocalizedDate } from '../hooks/useLocalizedDate';
import { useQuery } from '@tanstack/react-query';
import { Card, CardContent, Input, Button, Loading, ReCaptcha } from '../components/common';
@@ -16,6 +17,7 @@ export const GalleryPage: React.FC = () => {
const { slug, token } = useParams<{ slug: string; token?: string }>();
const { isAuthenticated, login, event } = useGalleryAuth();
const { t, i18n } = useTranslation();
const { format } = useLocalizedDate();
const [password, setPassword] = useState('');
const [isLoggingIn, setIsLoggingIn] = useState(false);
const [loginError, setLoginError] = useState<string | null>(null);
@@ -166,7 +168,7 @@ export const GalleryPage: React.FC = () => {
<Clock className="w-16 h-16 text-amber-500 mx-auto mb-4" />
<h2 className="text-xl font-semibold mb-2">{t('gallery.expired')}</h2>
<p className="text-neutral-600 mb-4">
{t('gallery.expiredOn', { date: format(parseISO(galleryInfo.expires_at), 'MMMM d, yyyy') })}
{t('gallery.expiredOn', { date: format(parseISO(galleryInfo.expires_at), 'PP') })}
</p>
<p className="text-sm text-neutral-500">
{t('gallery.contactOrganizer')}
@@ -226,7 +228,7 @@ export const GalleryPage: React.FC = () => {
</h1>
<div className="flex items-center justify-center text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
<Calendar className="w-4 h-4 mr-1" />
{format(parseISO(galleryInfo!.event_date), 'MMMM d, yyyy')}
{format(parseISO(galleryInfo!.event_date), 'PP')}
</div>
</div>