fix: Guard EventEditorPage state initialization with loadedEventIdRef and key prop to prevent values resetting to defaults on edit

This commit is contained in:
Richard
2026-07-31 12:20:37 +02:00
parent c295471827
commit 1a880d3452
3 changed files with 65 additions and 55 deletions
+1 -1
View File
@@ -11,7 +11,7 @@
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<title>Schichtplaner — Veranstaltungsschichtpläne</title> <title>Schichtplaner — Veranstaltungsschichtpläne</title>
<script type="module" crossorigin src="/assets/index-udMfIy9d.js"></script> <script type="module" crossorigin src="/assets/index-Mp9FLWF3.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-B6pC8vGA.css"> <link rel="stylesheet" crossorigin href="/assets/index-B6pC8vGA.css">
</head> </head>
<body class="bg-paper text-main font-sans antialiased min-h-screen"> <body class="bg-paper text-main font-sans antialiased min-h-screen">
+1
View File
@@ -490,6 +490,7 @@ export default function App() {
/> />
) : activeTab === 'event-editor' ? ( ) : activeTab === 'event-editor' ? (
<EventEditorPage <EventEditorPage
key={eventToEdit?.id || 'new-event'}
eventToEdit={eventToEdit} eventToEdit={eventToEdit}
skills={skills} skills={skills}
user={user} user={user}
+10 -1
View File
@@ -1,10 +1,12 @@
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */ /* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V5 */
/* Hallmark · component: EventEditorPage · genre: editorial · theme: Atelier (Dark & Light) · studied-DNA: https://inihaus.de */ /* Hallmark · component: EventEditorPage · genre: editorial · theme: Atelier (Dark & Light) · studied-DNA: https://inihaus.de */
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import { ArrowLeft, Calendar, Layers, Plus, Trash2, Edit3, CheckCircle2, AlertCircle, Users, UserCheck } from 'lucide-react'; import { ArrowLeft, Calendar, Layers, Plus, Trash2, Edit3, CheckCircle2, AlertCircle, Users, UserCheck } from 'lucide-react';
import { apiFetch } from '../api/client'; import { apiFetch } from '../api/client';
export default function EventEditorPage({ eventToEdit, skills, user, onBack, onSubmit, onDeleteEvent }) { export default function EventEditorPage({ eventToEdit, skills, user, onBack, onSubmit, onDeleteEvent }) {
const loadedEventIdRef = useRef(undefined);
const [eventId, setEventId] = useState(eventToEdit?.id || null); const [eventId, setEventId] = useState(eventToEdit?.id || null);
const [title, setTitle] = useState(eventToEdit?.title || ''); const [title, setTitle] = useState(eventToEdit?.title || '');
const [description, setDescription] = useState(eventToEdit?.description || ''); const [description, setDescription] = useState(eventToEdit?.description || '');
@@ -26,6 +28,12 @@ export default function EventEditorPage({ eventToEdit, skills, user, onBack, onS
useEffect(() => { useEffect(() => {
fetchUsers(); fetchUsers();
const currentId = eventToEdit?.id || null;
// Only populate form fields if eventId changed or initial load
if (loadedEventIdRef.current !== currentId) {
loadedEventIdRef.current = currentId;
if (eventToEdit) { if (eventToEdit) {
setEventId(eventToEdit.id); setEventId(eventToEdit.id);
setTitle(eventToEdit.title || ''); setTitle(eventToEdit.title || '');
@@ -82,6 +90,7 @@ export default function EventEditorPage({ eventToEdit, skills, user, onBack, onS
} }
]); ]);
} }
}
}, [eventToEdit]); }, [eventToEdit]);
const fetchUsers = async () => { const fetchUsers = async () => {