refactor: update import paths
This commit is contained in:
parent
05649e3c11
commit
70a819f525
4 changed files with 8 additions and 8 deletions
|
|
@ -1,314 +0,0 @@
|
|||
'use client';
|
||||
import React from 'react';
|
||||
import LabeledInput from '@/components/labeled-input';
|
||||
import { Button } from '@/components/custom-ui/button';
|
||||
import Logo from '@/components/logo';
|
||||
import TimePicker from '@/components/time-picker';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { useGetApiUserMe } from '@/generated/api/user/user';
|
||||
import {
|
||||
usePostApiEvent,
|
||||
useGetApiEventEventID,
|
||||
usePatchApiEventEventID,
|
||||
} from '@/generated/api/event/event';
|
||||
import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface EventFormProps {
|
||||
type: 'create' | 'edit';
|
||||
eventId?: string;
|
||||
}
|
||||
|
||||
const EventForm: React.FC<EventFormProps> = (props) => {
|
||||
// Runtime validation
|
||||
if (props.type === 'edit' && !props.eventId) {
|
||||
throw new Error(
|
||||
'Error [event-form]: eventId must be provided when type is "edit".',
|
||||
);
|
||||
}
|
||||
|
||||
const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
|
||||
const { data, isLoading, error: fetchError } = useGetApiUserMe();
|
||||
const { data: eventData } = useGetApiEventEventID(props.eventId!, {
|
||||
query: { enabled: props.type === 'edit' },
|
||||
});
|
||||
const patchEvent = usePatchApiEventEventID();
|
||||
const router = useRouter();
|
||||
|
||||
// Extract event fields for form defaults
|
||||
const event = eventData?.data?.event;
|
||||
|
||||
// State for date and time fields
|
||||
const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
|
||||
const [startTime, setStartTime] = React.useState('');
|
||||
const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
|
||||
const [endTime, setEndTime] = React.useState('');
|
||||
// State for participants
|
||||
const [selectedParticipants, setSelectedParticipants] = React.useState<{
|
||||
[name: string]: boolean;
|
||||
}>({
|
||||
'Max Muster': false,
|
||||
// Add more participants as needed
|
||||
});
|
||||
|
||||
// State for form fields
|
||||
const [title, setTitle] = React.useState('');
|
||||
const [location, setLocation] = React.useState('');
|
||||
const [description, setDescription] = React.useState('');
|
||||
|
||||
// Update state when event data loads
|
||||
React.useEffect(() => {
|
||||
if (props.type === 'edit' && event) {
|
||||
setTitle(event.title || '');
|
||||
// Parse start_time and end_time
|
||||
if (event.start_time) {
|
||||
const start = new Date(event.start_time);
|
||||
setStartDate(start);
|
||||
setStartTime(start.toISOString().slice(11, 16)); // "HH:mm"
|
||||
}
|
||||
if (event.end_time) {
|
||||
const end = new Date(event.end_time);
|
||||
setEndDate(end);
|
||||
setEndTime(end.toISOString().slice(11, 16)); // "HH:mm"
|
||||
}
|
||||
setLocation(event.location || '');
|
||||
setDescription(event.description || '');
|
||||
}
|
||||
}, [event, props.type]);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.currentTarget);
|
||||
|
||||
function combine(date?: Date, time?: string) {
|
||||
if (!date || !time) return undefined;
|
||||
const [hours, minutes] = time.split(':');
|
||||
const d = new Date(date);
|
||||
d.setHours(Number(hours), Number(minutes), 0, 0);
|
||||
return d;
|
||||
}
|
||||
|
||||
const start = combine(startDate, startTime);
|
||||
const end = combine(endDate, endTime);
|
||||
|
||||
//validate form data
|
||||
if (!formData.get('eventName')) {
|
||||
alert('Event name is required.');
|
||||
return;
|
||||
}
|
||||
if (!start || !end) {
|
||||
alert('Please provide both start and end date/time.');
|
||||
return;
|
||||
} else if (start >= end) {
|
||||
alert('End time must be after start time.');
|
||||
return;
|
||||
}
|
||||
|
||||
const data = {
|
||||
title: formData.get('eventName') as string,
|
||||
description: formData.get('eventDescription') as string,
|
||||
start_time: start.toISOString(),
|
||||
end_time: end.toISOString(),
|
||||
location: formData.get('eventLocation') as string,
|
||||
created_at: formData.get('createdAt') as string,
|
||||
updated_at: formData.get('updatedAt') as string,
|
||||
organiser: formData.get('organiser') as string,
|
||||
};
|
||||
|
||||
if (props.type === 'edit' && props.eventId) {
|
||||
await patchEvent.mutateAsync({
|
||||
eventID: props.eventId,
|
||||
data: {
|
||||
title: data.title,
|
||||
description: data.description,
|
||||
start_time: data.start_time,
|
||||
end_time: data.end_time,
|
||||
location: data.location,
|
||||
},
|
||||
});
|
||||
console.log('Updating event with data:', data);
|
||||
} else {
|
||||
console.log('Creating event with data:', data);
|
||||
|
||||
createEvent({ data });
|
||||
}
|
||||
router.back();
|
||||
}
|
||||
|
||||
// Calculate values for organiser, created, and updated
|
||||
const organiserValue = isLoading
|
||||
? 'Loading...'
|
||||
: data?.data.user?.name || 'Unknown User';
|
||||
|
||||
// Use DB values for created_at/updated_at in edit mode
|
||||
const createdAtValue =
|
||||
props.type === 'edit' && event?.created_at
|
||||
? event.created_at
|
||||
: new Date().toISOString();
|
||||
const updatedAtValue =
|
||||
props.type === 'edit' && event?.updated_at
|
||||
? event.updated_at
|
||||
: new Date().toISOString();
|
||||
|
||||
// Format date for display
|
||||
const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
|
||||
const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
|
||||
|
||||
if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
|
||||
if (props.type === 'edit' && fetchError)
|
||||
return <div>Error loading event.</div>;
|
||||
|
||||
return (
|
||||
<form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
|
||||
<div className='grid grid-row-start:auto gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
|
||||
<div className='w-[50px]'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Event Name'
|
||||
placeholder={props.type === 'create' ? 'New Event' : 'Event Name'}
|
||||
name='eventName'
|
||||
variantSize='big'
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[50px]'></div>
|
||||
</div>
|
||||
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||
<div>
|
||||
<TimePicker
|
||||
dateLabel='start Time'
|
||||
timeLabel=' '
|
||||
date={startDate}
|
||||
setDate={setStartDate}
|
||||
time={startTime}
|
||||
setTime={setStartTime}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<TimePicker
|
||||
dateLabel='end Time'
|
||||
timeLabel=' '
|
||||
date={endDate}
|
||||
setDate={setEndDate}
|
||||
time={endTime}
|
||||
setTime={setEndTime}
|
||||
/>
|
||||
</div>
|
||||
<div className='w-54'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Location'
|
||||
placeholder='where is the event?'
|
||||
name='eventLocation'
|
||||
value={location}
|
||||
onChange={(e) => setLocation(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px]'>created:</Label>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
{createdAtDisplay}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px]'>updated:</Label>
|
||||
<p className='text-[var(--color-neutral-300)]'>
|
||||
{updatedAtDisplay}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
|
||||
<div className='h-full w-full grid grid-flow-row gap-4'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label>Organiser:</Label>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
{organiserValue}
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<LabeledInput
|
||||
type='text'
|
||||
label='Event Description'
|
||||
placeholder='What is the event about?'
|
||||
name='eventDescription'
|
||||
variantSize='textarea'
|
||||
value={description}
|
||||
onChange={(e) => setDescription(e.target.value)}
|
||||
></LabeledInput>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label>Participants</Label> {/* TODO: add participants input */}
|
||||
<ParticipantListEntry
|
||||
participant='Max Muster'
|
||||
checked={selectedParticipants['Max Muster']}
|
||||
onCheck={(checked) =>
|
||||
setSelectedParticipants((prev) => ({
|
||||
...prev,
|
||||
['Max Muster']: checked,
|
||||
}))
|
||||
}
|
||||
></ParticipantListEntry>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||
<Button
|
||||
type='button'
|
||||
variant='secondary'
|
||||
onClick={() => router.back()}
|
||||
>
|
||||
cancel
|
||||
</Button>
|
||||
{/* TODO: add onClick handler to cancel cancel */}
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||
<Button
|
||||
type='submit'
|
||||
variant='primary'
|
||||
disabled={status === 'pending'}
|
||||
>
|
||||
{status === 'pending' ? 'Saving...' : 'save event'}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{isSuccess && <p>Event created!</p>}
|
||||
{error && <p className='text-red-500'>Error: {error.message}</p>}
|
||||
</div>
|
||||
{/* Hidden inputs for formData */}
|
||||
<input
|
||||
type='hidden'
|
||||
name='startTime'
|
||||
value={
|
||||
startDate && startTime
|
||||
? `${startDate.toISOString().split('T')[0]}T${startTime}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<input
|
||||
type='hidden'
|
||||
name='endTime'
|
||||
value={
|
||||
endDate && endTime
|
||||
? `${endDate.toISOString().split('T')[0]}T${endTime}`
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<input type='hidden' name='organiser' value={organiserValue} />
|
||||
<input type='hidden' name='createdAt' value={createdAtValue} />
|
||||
<input type='hidden' name='updatedAt' value={updatedAtValue} />
|
||||
</form>
|
||||
);
|
||||
};
|
||||
|
||||
export default EventForm;
|
||||
Loading…
Add table
Add a link
Reference in a new issue