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

feat(event-page): create ShowEvent component to display event details

Browse source
This commit is contained in:
micha 2025-06-19 04:32:22 +02:00
parent 9a187788c4
commit 7f419afe47
1 changed files with 156 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

156
src/app/event/[eventID]/page.tsx Normal file
View file

@ -0,0 +1,156 @@
'use client';
import React from 'react';
import { useRouter, 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';
export default function ShowEvent() {
const router = useRouter();
const pathname = usePathname();
// Extract eventId from URL like /event/[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-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-[100px]'>
<Logo colorType='monochrome' logoType='submark' width={50} />
</div>
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
<h1>{event.title || 'Untitled Event'}</h1>
</div>
<div className='w-0 sm:w-[100px]'>
<RedirectButton
redirectUrl={`/event/edit/${eventId}`}
buttonText='edit'
/>
</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-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'>
<Label>Participants</Label>{' '}
{/* TODO: add participants display */}
</div>
</div>
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'></div>
</div>
</div>
</CardContent>
</Card>
</div>
);
}