Merge branch 'events' into 'develop'

Improve event information display

See merge request soapbox-pub/soapbox!2645
This commit is contained in:
marcin mikołajczak 2023-08-27 22:06:19 +00:00
commit eafb6d318a

View file

@ -59,6 +59,44 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
const renderEventLocation = useCallback(() => {
const event = status!.event!;
if (!event.location) return null;
const text = [
<React.Fragment key='event-name'>
{event.location.get('name')}
</React.Fragment>,
];
if (event.location.get('street')?.trim()) {
text.push (
<React.Fragment key='event-street'>
<br />{event.location.get('street')}
</React.Fragment>,
);
}
const address = [event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ');
if (address) {
text.push(
<React.Fragment key='event-address'>
<br />
{address}
</React.Fragment>,
);
}
if (tileServer && event.location.get('latitude')) {
text.push(
<React.Fragment key='event-map'>
<br />
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a>
</React.Fragment>,
);
}
return event.location && (
<Stack space={1}>
<Text size='xl' weight='bold'>
@ -66,21 +104,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
</Text>
<HStack space={2} alignItems='center'>
<Icon src={require('@tabler/icons/map-pin.svg')} />
<Text>
{event.location.get('name')}
<br />
{!!event.location.get('street')?.trim() && (<>
{event.location.get('street')}
<br />
</>)}
{[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
{tileServer && event.location.get('latitude') && (<>
<br />
<a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
<FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
</a>
</>)}
</Text>
<Text>{text}</Text>
</HStack>
</Stack>
);