diff --git a/src/renderer/components/DateDistance.js b/src/renderer/components/DateDistance.js
index 80d749320..373482026 100644
--- a/src/renderer/components/DateDistance.js
+++ b/src/renderer/components/DateDistance.js
@@ -1,49 +1,61 @@
-import { useState, useEffect } from 'react'
-import { useIntl } from 'react-intl'
+import React from 'react'
+import { FormattedDate, FormattedRelativeTime } from 'react-intl'
-const second = 1000
-const minute = 60 * second
-const hour = 60 * minute
-const day = 24 * hour
// We use relative dates for anything within the last 7 days, and then absolute
// dates for anything else.
-const USE_WORDS_WITHIN = 7 * 24 * 60 * 60 * 1000 // 7 days
+const USE_WORDS_WITHIN_SECONDS = 4 * 24 * 60 * 60 // 4 days
+const MINUTE = 60
+const HOUR = 60 * 60
+const DAY = 60 * 60 * 24
-const DateDistance = ({ date = Date.now() }) => {
- const { formatRelativeTime, formatDate } = useIntl()
- const [distance, setDistance] = useState(Date.now() - date)
+const DateDistance = ({ date = new Date(), style }) => {
+ // Round distance to nearest 10 seconds
+ const distanceInSeconds = Math.floor((Date.now() - date) / 10000) * 10
- useEffect(
- () => {
- if (distance > day) return
- const timeout = distance < hour ? 30 * second : hour
- const timeoutId = setTimeout(() => {
- setDistance(Date.now() - date)
- }, timeout)
- return () => clearTimeout(timeoutId)
- },
- [date, distance]
- )
+ const absValue = Math.abs(distanceInSeconds)
- let text
- if (distance < minute) {
- text = 'ahorita'
- } else if (distance <= hour) {
- text = formatRelativeTime(Math.round(-distance / minute), 'minute', {
- numeric: 'auto'
- })
- } else if (distance <= day) {
- text = formatRelativeTime(Math.round(-distance / hour), 'hour', {
- numeric: 'auto'
- })
- } else if (distance <= USE_WORDS_WITHIN) {
- text = formatRelativeTime(Math.round(-distance / day), 'day', {
- numeric: 'auto'
- })
+ if (absValue > USE_WORDS_WITHIN_SECONDS) {
+ return (
+
+ )
+ } else if (absValue < MINUTE) {
+ return (
+
+ )
+ } else if (absValue < HOUR) {
+ return (
+
+ )
+ } else if (absValue < DAY) {
+ return (
+
+ )
} else {
- text = formatDate(date)
+ return (
+
+ )
}
- return text
}
export default DateDistance
diff --git a/src/renderer/components/DateDistance.stories.js b/src/renderer/components/DateDistance.stories.js
index 1d2270ea5..edd942448 100644
--- a/src/renderer/components/DateDistance.stories.js
+++ b/src/renderer/components/DateDistance.stories.js
@@ -14,6 +14,10 @@ export const twoDays = () => (
)
+export const oneAndHalfHours = () => (
+
+)
+
export const thirtySeconds = () => (
)
@@ -21,3 +25,5 @@ export const thirtySeconds = () => (
export const twoMinutes = () => (
)
+
+export const now = () =>