From a3517e53a847c8a01482a6420a632121c3ab8509 Mon Sep 17 00:00:00 2001 From: Devon Anderson Date: Fri, 26 Aug 2022 12:22:24 -0400 Subject: [PATCH] =?UTF-8?q?chore:=20=F0=9F=A4=96=20create=20relative=20dat?= =?UTF-8?q?e=20helper=20(#1276)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: 🤖 create relative date helper Create a relative date helper that outputs "time" ago format. ✅ Closes: ICU-5847 * Update addons/core/addon/helpers/relative-datetime-live.js Co-authored-by: Zhihe Li * refactor: 💡 refactor test for relative-date-helper refactor test for relative-datetime-live helper ✅ Closes: ICU-5847 Co-authored-by: Zhihe Li --- .../relative-datetime-live/index.hbs | 1 - .../relative-datetime-live/index.js | 103 ------------------ .../components/toolbar-refresher/index.hbs | 4 +- .../addon/helpers/relative-datetime-live.js | 68 ++++++++++++ .../app/components/relative-datetime-live.js | 1 - .../app/helpers/relative-datetime-live.js | 1 + .../tests/dummy/app/templates/application.hbs | 3 +- .../components/relative-datetime-live-test.js | 38 ------- .../helpers/relative-datetime-live-test.js | 46 ++++++++ 9 files changed, 118 insertions(+), 147 deletions(-) delete mode 100644 addons/core/addon/components/relative-datetime-live/index.hbs delete mode 100644 addons/core/addon/components/relative-datetime-live/index.js create mode 100644 addons/core/addon/helpers/relative-datetime-live.js delete mode 100644 addons/core/app/components/relative-datetime-live.js create mode 100644 addons/core/app/helpers/relative-datetime-live.js delete mode 100644 addons/core/tests/integration/components/relative-datetime-live-test.js create mode 100644 addons/core/tests/integration/helpers/relative-datetime-live-test.js diff --git a/addons/core/addon/components/relative-datetime-live/index.hbs b/addons/core/addon/components/relative-datetime-live/index.hbs deleted file mode 100644 index ffa6fc83c..000000000 --- a/addons/core/addon/components/relative-datetime-live/index.hbs +++ /dev/null @@ -1 +0,0 @@ -{{this.formatted}} diff --git a/addons/core/addon/components/relative-datetime-live/index.js b/addons/core/addon/components/relative-datetime-live/index.js deleted file mode 100644 index ba4bc9e26..000000000 --- a/addons/core/addon/components/relative-datetime-live/index.js +++ /dev/null @@ -1,103 +0,0 @@ -import Component from '@glimmer/component'; -import { inject as service } from '@ember/service'; - -const MILLISECOND = 1; -const SECOND = MILLISECOND * 1000; -const MINUTE = SECOND * 60; -const HOUR = MINUTE * 60; -const DAY = HOUR * 24; -const MONTH = DAY * 31; -const YEAR = MONTH * 12; - -// common time intervals in milliseconds -const unitMappings = [ - { - unit: 'second', - value: SECOND, - }, - { - unit: 'minute', - value: MINUTE, - }, - { - unit: 'hour', - value: HOUR, - }, - { - unit: 'day', - value: DAY, - }, - { - unit: 'month', - value: MONTH, - }, - { - unit: 'year', - value: YEAR, - }, -]; - -export default class RelativeDatetimeLiveComponent extends Component { - // =services - - @service clockTick; - @service intl; - - // =properties - - /** - * The difference in milliseconds between the date argument and the - * current time. - * @type {number} - */ - get delta() { - return this.args.date.valueOf() - this.clockTick.now; - } - - /** - * The greatest meaningful unit is the unit which delta is equal to or - * greater than. For example, the unit of a delta equivalent of 59 seconds is - * 'second' while 60 seconds is 'minute', 36 hours is 'day', etc. - * @type {object} - */ - get greatestMeaningfulUnit() { - return unitMappings.reduce((currentValue, previousValue) => { - return Math.abs(this.delta) >= previousValue.value - ? previousValue - : currentValue; - }, unitMappings[0]); - } - - /** - * The delta value scaled to the greatest meaningful unit. For example, if - * the delta is 1000 ms, the scaled value is 1, which corresponds to - * a GMU of 'second'. A delta of 60000 ms is also 1, corresponding to a GMU - * of 'minute'. - * @type {number} - */ - get scaledDelta() { - if (this.delta < 0) { - return Math.ceil(this.delta / this.greatestMeaningfulUnit.value); - } - return Math.floor(this.delta / this.greatestMeaningfulUnit.value); - } - - /** - * A string representation of the greatest meaningful unit. - * @type {string} - */ - get unit() { - return this.greatestMeaningfulUnit.unit; - } - - /** - * A localizd relative datetime. E.g. "30 seconds ago". - * @type {string} - */ - get formatted() { - return this.intl.formatRelative(this.scaledDelta, { - unit: this.unit, - numeric: 'auto', - }); - } -} diff --git a/addons/core/addon/components/toolbar-refresher/index.hbs b/addons/core/addon/components/toolbar-refresher/index.hbs index dc1f7784f..787bf4ec8 100644 --- a/addons/core/addon/components/toolbar-refresher/index.hbs +++ b/addons/core/addon/components/toolbar-refresher/index.hbs @@ -1,9 +1,9 @@ {{#if this.lastRefreshed}} - + {{relative-datetime-live this.lastRefreshed}} {{/if}} {{t 'actions.refresh'}} - \ No newline at end of file + diff --git a/addons/core/addon/helpers/relative-datetime-live.js b/addons/core/addon/helpers/relative-datetime-live.js new file mode 100644 index 000000000..de7ab46aa --- /dev/null +++ b/addons/core/addon/helpers/relative-datetime-live.js @@ -0,0 +1,68 @@ +import Helper from '@ember/component/helper'; +import { inject as service } from '@ember/service'; + +const MILLISECOND = 1; +const SECOND = MILLISECOND * 1000; +const MINUTE = SECOND * 60; +const HOUR = MINUTE * 60; +const DAY = HOUR * 24; +const MONTH = DAY * 31; +const YEAR = MONTH * 12; + +const unitMappings = [ + { + unit: 'second', + value: SECOND, + }, + { + unit: 'minute', + value: MINUTE, + }, + { + unit: 'hour', + value: HOUR, + }, + { + unit: 'day', + value: DAY, + }, + { + unit: 'month', + value: MONTH, + }, + { + unit: 'year', + value: YEAR, + }, +]; + +export default class extends Helper { + // =services + + @service clockTick; + @service intl; + + // =methods + + compute([date]) { + const delta = date.valueOf() - this.clockTick.now; + console.log(delta); + const greatestMeaningfulUnit = unitMappings.reduce( + (currentValue, previousValue) => { + return Math.abs(delta) >= previousValue.value + ? previousValue + : currentValue; + }, + unitMappings[0] + ); + const scaledDelta = + delta < 0 + ? Math.ceil(delta / greatestMeaningfulUnit.value) + : Math.floor(delta / greatestMeaningfulUnit.value); + const unit = greatestMeaningfulUnit.unit; + return this.intl.formatRelative(scaledDelta, { + unit, + numeric: 'auto', + }); + } +} diff --git a/addons/core/app/components/relative-datetime-live.js b/addons/core/app/components/relative-datetime-live.js deleted file mode 100644 index c338a513a..000000000 --- a/addons/core/app/components/relative-datetime-live.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'core/components/relative-datetime-live'; diff --git a/addons/core/app/helpers/relative-datetime-live.js b/addons/core/app/helpers/relative-datetime-live.js new file mode 100644 index 000000000..981caec58 --- /dev/null +++ b/addons/core/app/helpers/relative-datetime-live.js @@ -0,0 +1 @@ +export { default } from 'core/helpers/relative-datetime-live'; diff --git a/addons/core/tests/dummy/app/templates/application.hbs b/addons/core/tests/dummy/app/templates/application.hbs index 0b957c048..4785fe202 100644 --- a/addons/core/tests/dummy/app/templates/application.hbs +++ b/addons/core/tests/dummy/app/templates/application.hbs @@ -1,3 +1,2 @@

Welcome to Ember

- - +

{{relative-datetime-live this.now}}

diff --git a/addons/core/tests/integration/components/relative-datetime-live-test.js b/addons/core/tests/integration/components/relative-datetime-live-test.js deleted file mode 100644 index 3a80df456..000000000 --- a/addons/core/tests/integration/components/relative-datetime-live-test.js +++ /dev/null @@ -1,38 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | relative-datetime-live', function (hooks) { - setupRenderingTest(hooks); - - test('it renders a relative datetime', async function (assert) { - assert.expect(6); - - const now = Date.now(); - - this.date = now - 10 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 seconds ago'); - - this.date = now - 10 * 60 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 minutes ago'); - - this.date = now - 10 * 60 * 60 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 hours ago'); - - this.date = now - 10 * 24 * 60 * 60 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 days ago'); - - this.date = now - 10 * 31 * 24 * 60 * 60 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 months ago'); - - this.date = now - 10 * 12 * 31 * 24 * 60 * 60 * 1000; - await render(hbs``); - assert.dom(this.element).hasText('10 years ago'); - }); -}); diff --git a/addons/core/tests/integration/helpers/relative-datetime-live-test.js b/addons/core/tests/integration/helpers/relative-datetime-live-test.js new file mode 100644 index 000000000..8887e0359 --- /dev/null +++ b/addons/core/tests/integration/helpers/relative-datetime-live-test.js @@ -0,0 +1,46 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Helper | relative-datetime-live', function (hooks) { + setupRenderingTest(hooks); + + test('it renders relative date in "time" ago format', async function (assert) { + assert.expect(8); + + const now = Date.now(); + + this.date = now - 30 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('30 seconds ago'); + + this.date = now - 30 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('30 minutes ago'); + + this.date = now - 23 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('23 hours ago'); + + this.date = now - 23 * 24 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('23 days ago'); + + this.date = now - 8 * 31 * 24 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('8 months ago'); + + this.date = now - 23 * 12 * 31 * 24 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('23 years ago'); + + this.date = now + 8 * 31 * 24 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('in 7 months'); + + this.date = now + 23 * 12 * 31 * 24 * 60 * 60 * 1000; + await render(hbs`{{relative-datetime-live this.date}}`); + assert.dom(this.element).hasText('in 22 years'); + }); +});