Merge pull request #2401 from oasisprotocol/lw/consistent-relative-time

Fix inconsistent relative time displays

Author: lukaw3d

.changelog/2401.bugfix.md

@@ -0,0 +1 @@
+Fix inconsistent relative time displays

src/app/components/TableCellAge/index.tsx

@@ -2,7 +2,6 @@ import { FC } from 'react'
 import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { formatDistanceToNow } from '../../utils/dateFormatter'
 import { useFormattedTimestamp } from '../../hooks/useFormattedTimestamp'
-import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
 import { useLocalSettings } from '../../hooks/useLocalSettings'
 import { TableAgeType } from '../../../types/table-age-type'
 
@@ -26,9 +25,7 @@ export const TableCellAge: FC<{ sinceTimestamp: string }> = ({ sinceTimestamp })
   if (isNaN(date.getTime())) return null
 
   const distance = formatDistanceToNow(date)
-  const distanceWithSuffix = formatDistanceStrict(sinceTimestamp, new Date(), {
-    addSuffix: true,
-  })
+  const distanceWithSuffix = formatDistanceToNow(date, { keepSuffix: true, style: 'long' })
   const title = (
     <>
       <div className="font-medium">{defaultFormatted}</div>

src/app/hooks/useFormattedTimestamp.ts

@@ -1,4 +1,4 @@
-import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
+import { formatDistanceToNow } from '../utils/dateFormatter'
 import { useTranslation } from 'react-i18next'
 import { useScreenSize } from './useScreensize'
 
@@ -41,8 +41,9 @@ export const useFormattedTimestampStringWithDistance = (
   const { isMobile } = useScreenSize()
   if (!timestampStr) return ''
   const timestamp = new Date(timestampStr)
-  const distance = formatDistanceStrict(timestamp, new Date(), {
-    addSuffix: true,
+  const distance = formatDistanceToNow(timestamp, {
+    keepSuffix: true,
+    style: 'long',
   })
   return isMobile
     ? distance

src/app/pages/RoflAppDetailsPage/LastActivity.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
+import { formatDistanceToNow } from '../../utils/dateFormatter'
 import { RuntimeTransaction } from '../../../oasis-nexus/api'
 import { SearchScope } from '../../../types/searchScope'
 import { TransactionLink } from '../../components/Transactions/TransactionLink'
@@ -26,8 +26,9 @@ export const LastActivity: FC<LastActivityProps> = ({ scope, transaction }) => {
           />
           <span>
             (
-            {formatDistanceStrict(transaction.timestamp, new Date(), {
-              addSuffix: true,
+            {formatDistanceToNow(new Date(transaction.timestamp), {
+              keepSuffix: true,
+              style: 'long',
             })}
             )
           </span>

src/app/utils/dateFormatter.ts

@@ -16,9 +16,9 @@ export const intlDateFormat = (date: Date | number) => dateFormat.format(date)
 // TODO: Works only in en-US locale, as suffixes are hardcoded
 export const formatDistanceToNow = (
   date: Date | number,
-  options: { baseDate?: Date | number; locale?: string; keepSuffix?: true } = {},
+  options: { baseDate?: Date | number; locale?: string; keepSuffix?: true; style?: 'short' | 'long' } = {},
 ) => {
-  const { baseDate = new Date(), locale = 'en-US', keepSuffix = false } = options
+  const { baseDate = new Date(), locale = 'en-US', keepSuffix = false, style = 'short' } = options
 
   const diffInSeconds = differenceInSeconds(date, baseDate)
   let unit: Intl.RelativeTimeFormatUnit
@@ -41,7 +41,7 @@ export const formatDistanceToNow = (
 
   const distanceWithSuffix = intlFormatDistance(date, baseDate, {
     unit,
-    style: 'short',
+    style,
     numeric: 'always',
     locale,
   })