feat(event): add event view page
This commit is contained in:
parent
173be63a9c
commit
a357a5a8d7
1 changed files with 175 additions and 0 deletions
175
src/app/events/[eventID]/page.tsx
Normal file
175
src/app/events/[eventID]/page.tsx
Normal file
|
|
@ -0,0 +1,175 @@
|
||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
import Logo from '@/components/misc/logo';
|
||||||
|
import { ThemePicker } from '@/components/misc/theme-picker';
|
||||||
|
import { Card, CardContent, CardHeader } from '@/components/ui/card';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { useGetApiEventEventID } from '@/generated/api/event/event';
|
||||||
|
import { useGetApiUserMe } from '@/generated/api/user/user';
|
||||||
|
import { RedirectButton } from '@/components/buttons/redirect-button';
|
||||||
|
import { useSession } from 'next-auth/react';
|
||||||
|
import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
|
||||||
|
|
||||||
|
export default function ShowEvent() {
|
||||||
|
const session = useSession();
|
||||||
|
const pathname = usePathname();
|
||||||
|
|
||||||
|
// Extract eventId from URL like /events/[eventId]
|
||||||
|
const eventId = pathname.split('/').pop() || '';
|
||||||
|
|
||||||
|
// Fetch event data
|
||||||
|
const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
|
||||||
|
const { data: userData, isLoading: userLoading } = useGetApiUserMe();
|
||||||
|
|
||||||
|
if (isLoading || userLoading) {
|
||||||
|
return (
|
||||||
|
<div className='flex justify-center items-center h-screen'>
|
||||||
|
Loading...
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (error || !eventData?.data?.event) {
|
||||||
|
return (
|
||||||
|
<div className='flex justify-center items-center h-screen'>
|
||||||
|
Error loading event.
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const event = eventData.data.event;
|
||||||
|
const organiserName = userData?.data.user?.name || 'Unknown User';
|
||||||
|
|
||||||
|
// Format dates & times for display
|
||||||
|
const formatDate = (isoString?: string) => {
|
||||||
|
if (!isoString) return '-';
|
||||||
|
return new Date(isoString).toLocaleDateString();
|
||||||
|
};
|
||||||
|
const formatTime = (isoString?: string) => {
|
||||||
|
if (!isoString) return '-';
|
||||||
|
return new Date(isoString).toLocaleTimeString([], {
|
||||||
|
hour: '2-digit',
|
||||||
|
minute: '2-digit',
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='flex flex-col items-center justify-center h-screen'>
|
||||||
|
<div className='absolute top-4 right-4'>
|
||||||
|
<ThemePicker />
|
||||||
|
</div>
|
||||||
|
<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' />
|
||||||
|
|
||||||
|
<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='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:
|
||||||
|
</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>
|
||||||
|
</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='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'>
|
||||||
|
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}
|
||||||
|
participant={user.user.name}
|
||||||
|
imageSrc={user.user.image}
|
||||||
|
></ParticipantListEntry>
|
||||||
|
))}
|
||||||
|
</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 ? (
|
||||||
|
<RedirectButton
|
||||||
|
redirectUrl={`/events/edit/${eventId}`}
|
||||||
|
buttonText='edit'
|
||||||
|
className='w-full'
|
||||||
|
/>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue