Merge pull request 'fix/117-toaster_button_on_event_creation' (#118)
Reviewed-on: #118 Reviewed-by: Dominik <mail@dominikstahl.dev>
This commit is contained in:
commit
ed6174ad34
5 changed files with 161 additions and 151 deletions
|
|
@ -40,14 +40,12 @@ export default function ShowEvent() {
|
|||
|
||||
if (isLoading || userLoading) {
|
||||
return (
|
||||
<div className='flex justify-center items-center h-screen'>
|
||||
Loading...
|
||||
</div>
|
||||
<div className='flex justify-center items-center h-full'>Loading...</div>
|
||||
);
|
||||
}
|
||||
if (error || !eventData?.data?.event) {
|
||||
return (
|
||||
<div className='flex justify-center items-center h-screen'>
|
||||
<div className='flex justify-center items-center h-full'>
|
||||
Error loading event.
|
||||
</div>
|
||||
);
|
||||
|
|
@ -70,167 +68,169 @@ export default function ShowEvent() {
|
|||
};
|
||||
|
||||
return (
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
<div className='flex items-center justify-center h-full'>
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] mx-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
|
||||
<CardContent>
|
||||
<div className='flex flex-col gap-5 w-full'>
|
||||
<div className='grid grid-row-start:auto gap-4 sm:gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
|
||||
<div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
<CardContent>
|
||||
<div className='flex flex-col gap-5 w-full'>
|
||||
<div className='grid grid-row-start:auto gap-4 sm:gap-8'>
|
||||
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
|
||||
<div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<h1 className='text-center'>
|
||||
{event.title || 'Untitled Event'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[100px]'></div>
|
||||
</div>
|
||||
<div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
|
||||
<h1 className='text-center'>
|
||||
{event.title || 'Untitled Event'}
|
||||
</h1>
|
||||
</div>
|
||||
<div className='w-0 sm:w-[100px]'></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>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
start Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.start_time
|
||||
? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
end Time
|
||||
</Label>
|
||||
<Label size='large'>
|
||||
{event.end_time
|
||||
? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='w-54'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Location
|
||||
</Label>
|
||||
<Label size='large'>{event.location || '-'}</Label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
created:
|
||||
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
start Time
|
||||
</Label>
|
||||
<Label>
|
||||
{event.created_at ? formatDate(event.created_at) : '-'}
|
||||
<Label size='large'>
|
||||
{event.start_time
|
||||
? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
updated:
|
||||
<div>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
end Time
|
||||
</Label>
|
||||
<Label>
|
||||
{event.updated_at ? formatDate(event.updated_at) : '-'}
|
||||
<Label size='large'>
|
||||
{event.end_time
|
||||
? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
|
||||
: '-'}
|
||||
</Label>
|
||||
</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 sm:gap-8'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='w-54'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Location
|
||||
</Label>
|
||||
<Label size='large'>{event.location || '-'}</Label>
|
||||
</div>
|
||||
<div className='flex flex-col gap-4'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
Organiser:
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
created:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.created_at ? formatDate(event.created_at) : '-'}
|
||||
</Label>
|
||||
</div>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='w-[70px] text-[var(--color-neutral-300)]'>
|
||||
updated:
|
||||
</Label>
|
||||
<Label>
|
||||
{event.updated_at ? formatDate(event.updated_at) : '-'}
|
||||
</Label>
|
||||
<Label size='large'>{organiserName}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
</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 sm:gap-8'>
|
||||
<div className='h-full w-full'>
|
||||
<div className='flex flex-row gap-2'>
|
||||
<Label className='text-[var(--color-neutral-300)]'>
|
||||
Organiser:
|
||||
</Label>
|
||||
<Label size='large'>{organiserName}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Description
|
||||
</Label>
|
||||
<Label size='large'>{event.description || '-'}</Label>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full mt-2'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Description
|
||||
</Label>
|
||||
<Label size='large'>{event.description || '-'}</Label>
|
||||
Participants
|
||||
</Label>{' '}
|
||||
<div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2 sm:overflow-y-auto sm:mb-0'>
|
||||
{event.participants?.map((user) => (
|
||||
<ParticipantListEntry key={user.user.id} {...user} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='h-full w-full mt-2'>
|
||||
<Label className='text-[var(--color-neutral-300)] mb-2'>
|
||||
Participants
|
||||
</Label>{' '}
|
||||
<div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2 sm:overflow-y-auto sm:mb-0'>
|
||||
{event.participants?.map((user) => (
|
||||
<ParticipantListEntry key={user.user.id} {...user} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant='destructive' className='w-full'>
|
||||
delete
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the event “
|
||||
{event.title}”? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant='secondary'
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<Dialog
|
||||
open={deleteDialogOpen}
|
||||
onOpenChange={setDeleteDialogOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant='destructive' className='w-full'>
|
||||
delete
|
||||
</Button>
|
||||
<Button
|
||||
variant='muted'
|
||||
onClick={() => {
|
||||
deleteEvent.mutate(
|
||||
{ eventID: event.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.push('/home');
|
||||
toast.custom((t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title='Event deleted'
|
||||
description={event?.title}
|
||||
variant='success'
|
||||
/>
|
||||
));
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Delete Event</DialogTitle>
|
||||
<DialogDescription>
|
||||
Are you sure you want to delete the event “
|
||||
{event.title}”? This action cannot be undone.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant='secondary'
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant='muted'
|
||||
onClick={() => {
|
||||
deleteEvent.mutate(
|
||||
{ eventID: event.id },
|
||||
{
|
||||
onSuccess: () => {
|
||||
router.push('/home');
|
||||
toast.custom((t) => (
|
||||
<ToastInner
|
||||
toastId={t}
|
||||
title='Event deleted'
|
||||
description={event?.title}
|
||||
variant='success'
|
||||
/>
|
||||
));
|
||||
},
|
||||
},
|
||||
},
|
||||
);
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<RedirectButton
|
||||
redirectUrl={`/events/edit/${eventID}`}
|
||||
buttonText='edit'
|
||||
className='w-full'
|
||||
/>
|
||||
) : null}
|
||||
);
|
||||
setDeleteDialogOpen(false);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
) : null}
|
||||
</div>
|
||||
<div className='w-[20%] grid max-sm:w-full'>
|
||||
{session.data?.user?.id === event.organizer.id ? (
|
||||
<RedirectButton
|
||||
redirectUrl={`/events/edit/${eventID}`}
|
||||
buttonText='edit'
|
||||
className='w-full'
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Suspense } from 'react';
|
|||
|
||||
export default function NewEvent() {
|
||||
return (
|
||||
<div className='flex flex-col items-center justify-center h-screen'>
|
||||
<div className='flex flex-col items-center justify-center h-full'>
|
||||
<Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
|
||||
<CardHeader className='p-0 m-0 gap-0' />
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@ export default function Events() {
|
|||
const events = eventsData?.data?.events || [];
|
||||
|
||||
return (
|
||||
<div className='relative h-screen flex flex-col items-center'>
|
||||
<div className='relative h-full flex flex-col items-center'>
|
||||
{/* Heading */}
|
||||
<h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
|
||||
My Events
|
||||
|
|
|
|||
|
|
@ -233,7 +233,7 @@ function CalendarWithUserEvents({
|
|||
resourceTitleAccessor={(event) => event.title}
|
||||
startAccessor={(event) => event.start}
|
||||
endAccessor={(event) => event.end}
|
||||
selectable={sesstion.data?.user?.id === userId && !additionalEvents}
|
||||
selectable={sesstion.data?.user?.id === userId}
|
||||
onEventDrop={(event) => {
|
||||
const { start, end, event: droppedEvent } = event;
|
||||
if (droppedEvent.type === 'blocked_private') return;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
const startFromUrl = searchParams.get('start');
|
||||
const endFromUrl = searchParams.get('end');
|
||||
|
||||
const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
|
||||
const {
|
||||
mutateAsync: createEvent,
|
||||
status,
|
||||
isSuccess,
|
||||
error,
|
||||
} = usePostApiEvent();
|
||||
const { data, isLoading, error: fetchError } = useGetApiUserMe();
|
||||
const { data: eventData } = useGetApiEventEventID(props.eventId!, {
|
||||
query: { enabled: props.type === 'edit' },
|
||||
|
|
@ -150,8 +155,10 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
participants: selectedParticipants.map((u) => u.id),
|
||||
};
|
||||
|
||||
let eventID: string | undefined;
|
||||
|
||||
if (props.type === 'edit' && props.eventId) {
|
||||
await patchEvent.mutateAsync({
|
||||
const mutationResult = await patchEvent.mutateAsync({
|
||||
eventID: props.eventId,
|
||||
data: {
|
||||
title: data.title,
|
||||
|
|
@ -162,9 +169,12 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
participants: data.participants,
|
||||
},
|
||||
});
|
||||
eventID = mutationResult.data.event.id;
|
||||
console.log('Updating event');
|
||||
} else {
|
||||
console.log('Creating event');
|
||||
const mutationResult = await createEvent({ data });
|
||||
eventID = mutationResult.data.event.id;
|
||||
createEvent({ data });
|
||||
}
|
||||
|
||||
|
|
@ -173,7 +183,7 @@ const EventForm: React.FC<EventFormProps> = (props) => {
|
|||
toastId={t}
|
||||
title='Event saved'
|
||||
description={event?.title}
|
||||
onAction={() => router.push(`/events/${event?.id}`)}
|
||||
onAction={() => router.push(`/events/${eventID}`)}
|
||||
variant='success'
|
||||
buttonText='show'
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue