From 75024d8501a5ef0aa7333a7ce72269317e65cb37 Mon Sep 17 00:00:00 2001
From: floatingghost <hannah@coffee-and-dreams.uk>
Date: Thu, 21 Jul 2022 20:56:30 +0000
Subject: [PATCH] re-add time direction (#52)

Reviewed-on: https://akkoma.dev/AkkomaGang/pleroma-fe/pulls/52
---
 src/components/timeago/timeago.vue                 | 14 +++++++++++++-
 src/services/date_utils/date_utils.js              | 12 ++++++++++--
 .../specs/services/date_utils/date_utils.spec.js   | 14 +++++++-------
 3 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index 86229349..b46677a6 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -2,8 +2,13 @@
   <time
     :datetime="time"
     :title="localeDateString"
+    :class="{ warning: relativeTime.direction === 'time.in_future' }"
   >
-    {{ $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) }}
+    {{
+      relativeTime.direction === '' ?
+        $tc(relativeTime.key, relativeTime.num, [relativeTime.num]) :
+        $t(relativeTime.direction, [$tc(relativeTime.key, relativeTime.num, [relativeTime.num])])
+    }}
   </time>
 </template>
 
@@ -50,3 +55,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+@import '../../_variables.scss';
+time.warning {
+  color: var(--alertWarning, $fallback--alertWarning);
+}
+</style>
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index 677c184c..2d38ef51 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -6,11 +6,19 @@ export const WEEK = 7 * DAY
 export const MONTH = 30 * DAY
 export const YEAR = 365.25 * DAY
 
+const direction = (diff, nowThreshold) => {
+  if (Math.abs(diff) < nowThreshold) {
+    return ''
+  }
+  return diff >= 0 ? 'time.in_past' : 'time.in_future'
+}
+
 export const relativeTime = (date, nowThreshold = 1) => {
   if (typeof date === 'string') date = Date.parse(date)
   const round = Date.now() > date ? Math.floor : Math.ceil
-  const d = Math.abs(Date.now() - date)
-  let r = { num: round(d / YEAR), key: 'time.unit.years' }
+  const rawD = Date.now() - date
+  const d = Math.abs(rawD)
+  let r = { num: round(d / YEAR), key: 'time.unit.years', direction: direction(rawD, nowThreshold * SECOND) }
   if (d < nowThreshold * SECOND) {
     r.num = 0
     r.key = 'time.now'
diff --git a/test/unit/specs/services/date_utils/date_utils.spec.js b/test/unit/specs/services/date_utils/date_utils.spec.js
index bd1efe81..a3beaf23 100644
--- a/test/unit/specs/services/date_utils/date_utils.spec.js
+++ b/test/unit/specs/services/date_utils/date_utils.spec.js
@@ -5,36 +5,36 @@ describe('DateUtils', () => {
     it('returns now with low enough amount of seconds', () => {
       const futureTime = Date.now() + 20 * DateUtils.SECOND
       const pastTime = Date.now() - 20 * DateUtils.SECOND
-      expect(DateUtils.relativeTime(futureTime, 30)).to.eql({ num: 0, key: 'time.now' })
-      expect(DateUtils.relativeTime(pastTime, 30)).to.eql({ num: 0, key: 'time.now' })
+      expect(DateUtils.relativeTime(futureTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
+      expect(DateUtils.relativeTime(pastTime, 30)).to.eql({ num: 0, key: 'time.now', direction: '' })
     })
 
     it('rounds down for past', () => {
       const time = Date.now() - 1.8 * DateUtils.HOUR
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 1, key: 'time.unit.hours' })
+      expect(DateUtils.relativeTime(time)).to.eql({ num: 1, key: 'time.unit.hours', direction: 'time.in_past' })
     })
 
     it('rounds up for future', () => {
       const time = Date.now() + 1.8 * DateUtils.HOUR
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 2, key: 'time.unit.hours' })
+      expect(DateUtils.relativeTime(time)).to.eql({ num: 2, key: 'time.unit.hours', direction: 'time.in_future' })
     })
 
     it('uses plural when necessary', () => {
       const time = Date.now() - 3.8 * DateUtils.WEEK
-      expect(DateUtils.relativeTime(time)).to.eql({ num: 3, key: 'time.unit.weeks' })
+      expect(DateUtils.relativeTime(time)).to.eql({ num: 3, key: 'time.unit.weeks', direction: 'time.in_past' })
     })
 
     it('works with date string', () => {
       const time = Date.now() - 4 * DateUtils.MONTH
       const dateString = new Date(time).toISOString()
-      expect(DateUtils.relativeTime(dateString)).to.eql({ num: 4, key: 'time.unit.months' })
+      expect(DateUtils.relativeTime(dateString)).to.eql({ num: 4, key: 'time.unit.months', direction: 'time.in_past' })
     })
   })
 
   describe('relativeTimeShort', () => {
     it('returns the short version of the same relative time', () => {
       const time = Date.now() + 2 * DateUtils.YEAR
-      expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.unit.years_short' })
+      expect(DateUtils.relativeTimeShort(time)).to.eql({ num: 2, key: 'time.unit.years_short', direction: 'time.in_future' })
     })
   })
 })