From 29c9098a914c4fb8c4c6100e31f6e2bf0a7a7228 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 20 Aug 2023 14:46:01 +0200
Subject: [PATCH 1/2] Improve event information display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/event/event-information.tsx      | 43 ++++++++++++-------
 1 file changed, 28 insertions(+), 15 deletions(-)

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 4b9f6c0a4..fe5380d1c 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/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>
-            {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>
     );

From 8bd8e60d4af023812815b039da93e49eee700d42 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 20 Aug 2023 14:46:01 +0200
Subject: [PATCH 2/2] Add keys to fragments
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/event/event-information.tsx      | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index fe5380d1c..557c3abfa 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -62,27 +62,38 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
     if (!event.location) return null;
 
     const text = [
-      <>{event.location.get('name')}</>,
+      <React.Fragment key='event-name'>
+        {event.location.get('name')}
+      </React.Fragment>,
     ];
 
     if (event.location.get('street')?.trim()) {
-      text.push (<><br />{event.location.get('street')}</>);
+      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(<><br />{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>,
       );
     }