fix: improve date display (#3728)

feat: improve date display
ONEARMY · Jul 6, 2024 · 2ad5619 · 2ad5619
1 parent 10e8b6c
commit 2ad5619
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/packages/components/src/CommentItem/CommentItem.tsx b/packages/components/src/CommentItem/CommentItem.tsx
@@ -1,4 +1,5 @@
 import { createRef, useEffect, useState } from 'react'
+import { format, formatDistanceToNow } from 'date-fns'
 import { Avatar, Box, Flex, Text } from 'theme-ui'
 
 import { Button } from '../Button/Button'
@@ -26,7 +27,14 @@ const formatDate = (d: string | undefined): string => {
   if (!d) {
     return ''
   }
-  return new Date(d).toLocaleDateString('en-GB').replace(/\//g, '-')
+  return format(new Date(d), 'dd MMMM yyyy h:mm a')
+}
+
+const relativeDateFormat = (d: string | undefined): string => {
+  if (!d) {
+    return ''
+  }
+  return formatDistanceToNow(new Date(d), { addSuffix: true })
 }
 
 export const CommentItem = (props: IProps) => {
@@ -65,6 +73,7 @@ export const CommentItem = (props: IProps) => {
   }
 
   const date = formatDate(_edited || _created)
+  const relativeDate = relativeDateFormat(_edited || _created)
   const maxHeight = isShowMore ? 'max-content' : '128px'
   const item = isReply ? 'ReplyItem' : 'CommentItem'
 
@@ -134,7 +143,9 @@ export const CommentItem = (props: IProps) => {
                 {_edited && (
                   <Text sx={{ fontSize: 0, color: 'grey' }}>(Edited)</Text>
                 )}
-                <Text sx={{ fontSize: 1 }}>{date}</Text>
+                <Text sx={{ fontSize: 1 }} title={date}>
+                  {relativeDate}
+                </Text>
               </Flex>
 
               {isEditable && (