Merge pull request #532 from SCCapstone/516

516: Show end date on day overflow
SCCapstone · Apr 18, 2024 · 30eeafe · 30eeafe
2 parents 0943cbf + f2100a2
commit 30eeafe
Showing 1 changed file with 27 additions and 4 deletions.
diff --git a/FU.SPA/src/components/PostCard.jsx b/FU.SPA/src/components/PostCard.jsx
@@ -46,6 +46,7 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
   if (post.startTime) {
     let startOfToday = dayjs().startOf('day');
     let postStartDateTime = dayjs(post.startTime);
+    let postEndDateTime = dayjs(post.endTime);
 
     let startDate = dayjs(post.startTime).format('MMM D, YYYY');
     if (postStartDateTime < startOfToday) {
@@ -60,14 +61,34 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
       startDate = dayjs(post.startTime).format('MMM D');
     }
 
+    let endDate = '';
+    if (!postEndDateTime.isSame(postStartDateTime, 'day')) {
+      endDate = dayjs(post.endTime).format('MMM D, YYYY');
+      if (postEndDateTime < startOfToday) {
+        // Use default
+      } else if (postEndDateTime < startOfToday.add(1, 'day')) {
+        endDate = 'Today';
+      } else if (postEndDateTime < startOfToday.add(2, 'day')) {
+        endDate = 'Tomorrow';
+      } else if (postEndDateTime < startOfToday.add(6, 'day')) {
+        endDate = dayjs(post.endTime).format('ddd');
+      } else if (postEndDateTime < startOfToday.add(1, 'year')) {
+        endDate = dayjs(post.endTime).format('MMM D');
+      }
+    }
+
     var startTime = new Date(post.startTime).toLocaleString('en-US', {
       timeStyle: 'short',
     });
     var endTime = new Date(post.endTime).toLocaleString('en-US', {
       timeStyle: 'short',
     });
 
-    dateTimeString = `${startDate}, ${startTime} - ${endTime}`;
+    dateTimeString = `${startDate}, ${startTime} - `;
+    if (endDate !== '') {
+      dateTimeString += `${endDate}, `;
+    }
+    dateTimeString += `${endTime}`;
   } else {
     dateTimeString = 'No time';
   }
@@ -127,9 +148,11 @@ const PostCard = ({ post, showActions, onTagClick, showJoinedStatus }) => {
             {post.game}
           </Typography>
         </Tooltip>
-        <Typography variant="body2" noWrap>
-          {dateTimeString}
-        </Typography>
+        <Tooltip title={dateTimeString}>
+          <Typography variant="body2" noWrap>
+            {dateTimeString}
+          </Typography>
+        </Tooltip>
         <Divider
           sx={{
             borderColor: Theme.palette.primary.main,