DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions 1

fix: autofill on event editing #126

Closed
micha.bok wants to merge 1 commit from fix/autofill_on_event_editing into main
pull from: fix/autofill_on_event_editing
merge into: DHBW-WE:main
Conversation 0 Commits 1 Files changed 1 +20 -10
1 changed files with 20 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/components/forms/event-form.tsx
View file

@ -58,9 +58,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
error, error,
} = usePostApiEvent(); } = usePostApiEvent();
const { data, isLoading, error: fetchError } = useGetApiUserMe(); const { data, isLoading, error: fetchError } = useGetApiUserMe();
const { data: eventData } = useGetApiEventEventID(props.eventId!, { const { data: eventData, isLoading: eventLoading } = useGetApiEventEventID(
query: { enabled: props.type === 'edit' }, props.eventId!,
}); {
query: { enabled: props.type === 'edit' },
},
);
const patchEvent = usePatchApiEventEventID(); const patchEvent = usePatchApiEventEventID();
const router = useRouter(); const router = useRouter();
@ -87,7 +90,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
// Update state when event data loads // Update state when event data loads
React.useEffect(() => { React.useEffect(() => {
if (props.type === 'edit' && event) { if (props.type === 'edit' && event && !eventLoading) {
setTitle(event.title || ''); setTitle(event.title || '');
// Parse start_time and end_time // Parse start_time and end_time
if (event.start_time) { if (event.start_time) {
@ -113,7 +116,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
setEndDate(end); setEndDate(end);
setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm" setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
} }
}, [event, props.type, startFromUrl, endFromUrl]); }, [event, props.type, startFromUrl, endFromUrl, eventLoading]);
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) { async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault(); e.preventDefault();
@ -210,8 +213,9 @@ const EventForm: React.FC<EventFormProps> = (props) => {
const createdAtDisplay = new Date(createdAtValue).toLocaleDateString(); const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString(); const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
if (props.type === 'edit' && isLoading) return <div>Loading...</div>; if (props.type === 'edit' && (isLoading || eventLoading))
if (props.type === 'edit' && fetchError) return <div>Loading...</div>;
if (props.type === 'edit' && (fetchError || !eventData?.data?.event))
return <div>Error loading event.</div>; return <div>Error loading event.</div>;
return ( return (
@ -232,7 +236,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
} }
name='eventName' name='eventName'
variantSize='big' variantSize='big'
value={title} value={title || (props.type === 'edit' && event?.title) || ''}
onChange={(e) => setTitle(e.target.value)} onChange={(e) => setTitle(e.target.value)}
/> />
</div> </div>
@ -265,7 +269,9 @@ const EventForm: React.FC<EventFormProps> = (props) => {
label='Location' label='Location'
placeholder='where is the event?' placeholder='where is the event?'
name='eventLocation' name='eventLocation'
value={location} value={
location || (props.type === 'edit' && event?.location) || ''
}
onChange={(e) => setLocation(e.target.value)} onChange={(e) => setLocation(e.target.value)}
/> />
</div> </div>
@ -301,7 +307,11 @@ const EventForm: React.FC<EventFormProps> = (props) => {
placeholder='What is the event about?' placeholder='What is the event about?'
name='eventDescription' name='eventDescription'
variantSize='textarea' variantSize='textarea'
value={description} value={
description ||
(props.type === 'edit' && event?.description) ||
''
}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
></LabeledInput> ></LabeledInput>
</div> </div>