Merge branch 'events' into 'develop'

Improve event information display

See merge request soapbox-pub/soapbox!2645

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

@@ -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>
+          <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>
     );