From c51d7565035146cc3f689c0cc4b508b78d9bb5ee Mon Sep 17 00:00:00 2001 From: paul Date: Thu, 24 Jul 2025 11:45:05 +0200 Subject: [PATCH] fix: resolve date formatting error in event creation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix TypeError "e.match is not a function" when creating events - Update useLocalizedDate hook to handle both string and object date formats - Add type safety for date format configuration - Fix date format strings to use correct date-fns format (lowercase) - Ensure backward compatibility with existing date settings The issue was caused by SettingsPage saving date formats as objects while useLocalizedDate expected strings. This fix handles both formats gracefully and prevents the error page redirect. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- frontend/src/hooks/useLocalizedDate.ts | 15 +++++++++-- .../pages/admin/CreateEventPageEnhanced.tsx | 2 +- frontend/src/pages/admin/SettingsPage.tsx | 27 ++++++++++++------- .../src/services/publicSettings.service.ts | 2 +- 4 files changed, 33 insertions(+), 13 deletions(-) diff --git a/frontend/src/hooks/useLocalizedDate.ts b/frontend/src/hooks/useLocalizedDate.ts index 1f16d64..f2ad5ad 100644 --- a/frontend/src/hooks/useLocalizedDate.ts +++ b/frontend/src/hooks/useLocalizedDate.ts @@ -22,7 +22,14 @@ export const useLocalizedDate = () => { const format = (date: Date | string, formatStr?: string) => { const dateObj = typeof date === 'string' ? new Date(date) : date; // Use admin-configured date format if available and no format string provided - const dateFormat = formatStr || settings?.general_date_format || 'PPP'; + let dateFormat = formatStr; + if (!dateFormat && settings?.general_date_format) { + // Handle both string and object formats + dateFormat = typeof settings.general_date_format === 'string' + ? settings.general_date_format + : settings.general_date_format.format || 'PPP'; + } + dateFormat = dateFormat || 'PPP'; return dateFnsFormat(dateObj, dateFormat, { locale: getLocale() }); }; @@ -35,6 +42,10 @@ export const useLocalizedDate = () => { format, formatDistanceToNow, locale: getLocale(), - dateFormat: settings?.general_date_format || 'PPP' + dateFormat: settings?.general_date_format + ? (typeof settings.general_date_format === 'string' + ? settings.general_date_format + : settings.general_date_format.format || 'PPP') + : 'PPP' }; }; \ No newline at end of file diff --git a/frontend/src/pages/admin/CreateEventPageEnhanced.tsx b/frontend/src/pages/admin/CreateEventPageEnhanced.tsx index 3ee389f..ae943ff 100644 --- a/frontend/src/pages/admin/CreateEventPageEnhanced.tsx +++ b/frontend/src/pages/admin/CreateEventPageEnhanced.tsx @@ -84,7 +84,7 @@ export const CreateEventPageEnhanced: React.FC = () => { const [formData, setFormData] = useState({ event_type: 'wedding', event_name: '', - event_date: format(new Date(), 'yyyy-MM-dd'), + event_date: new Date().toISOString().split('T')[0], // Initialize with ISO date format host_name: '', host_email: '', admin_email: '', diff --git a/frontend/src/pages/admin/SettingsPage.tsx b/frontend/src/pages/admin/SettingsPage.tsx index f467995..c97de62 100644 --- a/frontend/src/pages/admin/SettingsPage.tsx +++ b/frontend/src/pages/admin/SettingsPage.tsx @@ -57,7 +57,7 @@ export const SettingsPage: React.FC = () => { enable_registration: false, maintenance_mode: false, default_language: 'en', - date_format: { format: 'DD/MM/YYYY', locale: 'en-GB' } + date_format: { format: 'dd/MM/yyyy', locale: 'en-GB' } }); // Security settings state @@ -99,7 +99,11 @@ export const SettingsPage: React.FC = () => { enable_registration: settings.general_enable_registration || false, maintenance_mode: settings.general_maintenance_mode || false, default_language: settings.general_default_language || 'en', - date_format: settings.general_date_format || { format: 'DD/MM/YYYY', locale: 'en-GB' } + date_format: settings.general_date_format + ? (typeof settings.general_date_format === 'string' + ? { format: settings.general_date_format, locale: settings.general_date_format.includes('MM/dd') ? 'en-US' : 'en-GB' } + : settings.general_date_format) + : { format: 'dd/MM/yyyy', locale: 'en-GB' } }); // Extract security settings @@ -130,7 +134,12 @@ export const SettingsPage: React.FC = () => { // Convert to the format expected by the API const settingsData: Record = {}; Object.entries(generalSettings).forEach(([key, value]) => { - settingsData[`general_${key}`] = value; + // Special handling for date_format - only send the format string + if (key === 'date_format' && typeof value === 'object' && value.format) { + settingsData[`general_${key}`] = value.format; + } else { + settingsData[`general_${key}`] = value; + } }); return settingsService.updateSettings(settingsData); }, @@ -395,10 +404,10 @@ export const SettingsPage: React.FC = () => { {t('settings.general.dateFormat')}

{t('settings.general.dateFormatHelp')} diff --git a/frontend/src/services/publicSettings.service.ts b/frontend/src/services/publicSettings.service.ts index eba2821..0c7eb87 100644 --- a/frontend/src/services/publicSettings.service.ts +++ b/frontend/src/services/publicSettings.service.ts @@ -15,7 +15,7 @@ export interface PublicSettings { theme_config: any; default_language: string; enable_analytics: boolean; - general_date_format: string; + general_date_format: string | { format: string; locale: string }; enable_recaptcha: boolean; recaptcha_site_key: string | null; maintenance_mode: boolean;