From 13ccc3fe7fe9a3e08ee1d4e48f544b0d66491c06 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 30 Nov 2022 18:34:05 +0100
Subject: [PATCH] Date display improvements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/ui/stack/stack.tsx     |  2 +-
 .../components/ui/textarea/textarea.tsx       |  2 +-
 .../features/event/components/event-date.tsx  |  5 ++--
 .../features/event/event-information.tsx      | 29 ++++++++++++++++---
 4 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 1931904b9..fed361e93 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -52,7 +52,7 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex flex-col items', {
+      className={classNames('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
         // @ts-ignore
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index ddf0c9d7d..9abfc499d 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -28,7 +28,7 @@ const Textarea = React.forwardRef(
         {...props}
         ref={ref}
         className={classNames({
-          'bg-white dark:bg-gray-900 shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
+          'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
             true,
           'font-mono': isCodeEditor,
           'text-red-600 border-red-600': hasError,
diff --git a/app/soapbox/features/event/components/event-date.tsx b/app/soapbox/features/event/components/event-date.tsx
index 130d818d4..bfd4c37dd 100644
--- a/app/soapbox/features/event/components/event-date.tsx
+++ b/app/soapbox/features/event/components/event-date.tsx
@@ -22,12 +22,13 @@ const EventDate: React.FC<IEventDate> = ({ status }) => {
   if (event.end_time) {
     const endDate = new Date(event.end_time);
 
-    const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
+    const sameYear = startDate.getFullYear() === endDate.getFullYear();
+    const sameDay = startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && sameYear;
 
     if (sameDay) {
       date = (
         <>
-          <FormattedDate value={event.start_time} year='2-digit' month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
+          <FormattedDate value={event.start_time} year={sameYear ? undefined : '2-digit'} month='short' day='2-digit' weekday='short' hour='2-digit' minute='2-digit' />
           {' - '}
           <FormattedDate value={event.end_time} hour='2-digit' minute='2-digit' />
         </>
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 9068d2d5c..54c5f5f40 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -88,7 +88,12 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
   const renderEventDate = useCallback(() => {
     const event = status?.event;
 
-    if (!event?.start_time) return null;
+    const startDate = new Date(event.start_time);
+    const endDate = new Date(event.end_time);
+
+    if (!startDate) return null;
+
+    const sameDay = endDate && startDate.getDate() === endDate.getDate() && startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear();
 
     return (
       <Stack space={1}>
@@ -98,10 +103,26 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         <HStack space={2} alignItems='center'>
           <Icon src={require('@tabler/icons/calendar.svg')} />
           <Text>
-            <FormattedDate value={event.start_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
-            {event.end_time && (<>
+            <FormattedDate
+              value={startDate}
+              year='numeric'
+              month='long'
+              day='2-digit'
+              weekday='long'
+              hour='2-digit'
+              minute='2-digit'
+            />
+            {endDate && (<>
               {' - '}
-              <FormattedDate value={event.end_time} year='numeric' month='long' day='2-digit' weekday='long' hour='2-digit' minute='2-digit' />
+              <FormattedDate
+                value={endDate}
+                year={sameDay ? undefined : 'numeric'}
+                month={sameDay ? undefined : 'long'}
+                day={sameDay ? undefined : '2-digit'}
+                weekday={sameDay ? undefined : 'long'}
+                hour='2-digit'
+                minute='2-digit'
+              />
             </>)}
           </Text>
         </HStack>