[GH-411] Use relative date/time for comments (#1574)

This replaces the absolute date for comments on cards with a relative
date/time format and moves the absolute value into a tooltip.

Fixes: #411

webapp/src/components/cardDetail/__snapshots__/comment.test.tsx.snap

@@ -16,9 +16,14 @@ exports[`components/cardDetail/comment return comment 1`] = `
         class="comment-username"
       />
       <div
-        class="comment-date"
+        class="octo-tooltip tooltip-top"
+        data-tooltip="October 01, 2020, 12:00 AM"
       >
-        October 01, 2020, 12:00 AM
+        <div
+          class="comment-date"
+        >
+          a day ago
+        </div>
       </div>
       <div
         aria-label="menuwrapper"
@@ -121,9 +126,14 @@ exports[`components/cardDetail/comment return comment and delete comment 1`] = `
         class="comment-username"
       />
       <div
-        class="comment-date"
+        class="octo-tooltip tooltip-top"
+        data-tooltip="October 01, 2020, 12:00 AM"
       >
-        October 01, 2020, 12:00 AM
+        <div
+          class="comment-date"
+        >
+          a day ago
+        </div>
       </div>
       <div
         aria-label="menuwrapper"
@@ -226,9 +236,14 @@ exports[`components/cardDetail/comment return comment readonly 1`] = `
         class="comment-username"
       />
       <div
-        class="comment-date"
+        class="octo-tooltip tooltip-top"
+        data-tooltip="October 01, 2020, 12:00 AM"
       >
-        October 01, 2020, 12:00 AM
+        <div
+          class="comment-date"
+        >
+          a day ago
+        </div>
       </div>
     </div>
     <div

webapp/src/components/cardDetail/comment.test.tsx

@@ -4,6 +4,7 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import React from 'react'
 import {Provider as ReduxProvider} from 'react-redux'
+import moment from 'moment'
 
 import {mocked} from 'ts-jest/utils'
 
@@ -37,9 +38,20 @@ describe('components/cardDetail/comment', () => {
         },
     }
     const store = mockStateStore([], state)
+
     beforeEach(() => {
         jest.clearAllMocks()
+        moment.now = () => {
+            return dateFixed + (24 * 60 * 60 * 1000)
+        }
     })
+
+    afterEach(() => {
+        moment.now = () => {
+            return Number(new Date())
+        }
+    })
+
     test('return comment', () => {
         const {container} = render(wrapIntl(
             <ReduxProvider store={store}>

webapp/src/components/cardDetail/comment.tsx

@@ -13,6 +13,7 @@ import Menu from '../../widgets/menu'
 import MenuWrapper from '../../widgets/menuWrapper'
 import {getUser} from '../../store/users'
 import {useAppSelector} from '../../store/hooks'
+import Tooltip from '../../widgets/tooltip'
 
 import './comment.scss'
 
@@ -28,6 +29,7 @@ const Comment: FC<Props> = (props: Props) => {
     const intl = useIntl()
     const html = Utils.htmlFromMarkdown(comment.title)
     const user = useAppSelector(getUser(userId))
+    const date = new Date(comment.createAt)
 
     return (
         <div
@@ -40,9 +42,11 @@ const Comment: FC<Props> = (props: Props) => {
                     src={userImageUrl}
                 />
                 <div className='comment-username'>{user?.username}</div>
-                <div className='comment-date'>
-                    {Utils.displayDateTime(new Date(comment.createAt), intl)}
-                </div>
+                <Tooltip title={Utils.displayDateTime(date, intl)}>
+                    <div className='comment-date'>
+                        {Utils.relativeDisplayDateTime(date, intl)}
+                    </div>
+                </Tooltip>
 
                 {!props.readonly && (
                     <MenuWrapper>

webapp/src/utils.ts

@@ -2,6 +2,7 @@
 // See LICENSE.txt for license information.
 import marked from 'marked'
 import {IntlShape} from 'react-intl'
+import moment from 'moment'
 
 import {Block} from './blocks/block'
 import {createBoard} from './blocks/board'
@@ -265,6 +266,10 @@ class Utils {
         })
     }
 
+    static relativeDisplayDateTime(date: Date, intl: IntlShape): string {
+        return moment(date).locale(intl.locale.toLowerCase()).fromNow()
+    }
+
     static sleep(miliseconds: number): Promise<void> {
         return new Promise((resolve) => setTimeout(resolve, miliseconds))
     }