Improve event information display

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/features/event/event-information.tsx

@@ -59,6 +59,33 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const renderEventLocation = useCallback(() => {
     const event = status!.event!;
 
+    if (!event.location) return null;
+
+    const text = [
+      <>{event.location.get('name')}</>,
+    ];
+
+    if (event.location.get('street')?.trim()) {
+      text.push (<><br />{event.location.get('street')}</>);
+    }
+
+    const address = [event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ');
+
+    if (address) {
+      text.push(<><br />{address}</>);
+    }
+
+    if (tileServer && event.location.get('latitude')) {
+      text.push(
+        <>
+          <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>
+        </>,
+      );
+    }
+
     return event.location && (
       <Stack space={1}>
         <Text size='xl' weight='bold'>
@@ -66,21 +93,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         </Text>
         <HStack space={2} alignItems='center'>
           <Icon src={require('@tabler/icons/map-pin.svg')} />
-          <Text>
+          <Text>{text}</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>
         </HStack>
       </Stack>
     );