From 83495f656dc4d924609fb9a987651f2f6796255e Mon Sep 17 00:00:00 2001 From: Jan Cernik <66427541+jancernik@users.noreply.github.com> Date: Thu, 14 Mar 2024 10:01:38 -0300 Subject: [PATCH] DEV: Convert time-gap widget to a component (#26165) * DEV: Convert time-gap widget to a component * inline timegap component * Remove top level wrapper --------- Co-authored-by: Joffrey JAFFEUX --- .../discourse/app/components/time-gap.gjs | 25 ++++++++++++ .../discourse/app/widgets/post-stream.js | 11 ++++- .../discourse/app/widgets/time-gap.js | 28 ------------- .../integration/components/time-gap-test.js | 40 +++++++++++++++++++ 4 files changed, 75 insertions(+), 29 deletions(-) create mode 100644 app/assets/javascripts/discourse/app/components/time-gap.gjs delete mode 100644 app/assets/javascripts/discourse/app/widgets/time-gap.js create mode 100644 app/assets/javascripts/discourse/tests/integration/components/time-gap-test.js diff --git a/app/assets/javascripts/discourse/app/components/time-gap.gjs b/app/assets/javascripts/discourse/app/components/time-gap.gjs new file mode 100644 index 00000000000..65a9d8b1f68 --- /dev/null +++ b/app/assets/javascripts/discourse/app/components/time-gap.gjs @@ -0,0 +1,25 @@ +import Component from "@glimmer/component"; +import I18n from "discourse-i18n"; + +export default class TimeGap extends Component { + get description() { + const daysSince = this.args.daysSince; + + if (daysSince < 30) { + return I18n.t("dates.later.x_days", { count: daysSince }); + } else if (daysSince < 365) { + const gapMonths = Math.round(daysSince / 30); + return I18n.t("dates.later.x_months", { count: gapMonths }); + } else { + const gapYears = Math.round(daysSince / 365); + return I18n.t("dates.later.x_years", { count: gapYears }); + } + } + + +} diff --git a/app/assets/javascripts/discourse/app/widgets/post-stream.js b/app/assets/javascripts/discourse/app/widgets/post-stream.js index 9242184cc87..923d587ab94 100644 --- a/app/assets/javascripts/discourse/app/widgets/post-stream.js +++ b/app/assets/javascripts/discourse/app/widgets/post-stream.js @@ -1,3 +1,4 @@ +import { hbs } from "ember-cli-htmlbars"; import $ from "jquery"; import { h } from "virtual-dom"; import { addWidgetCleanCallback } from "discourse/components/mount-widget"; @@ -5,6 +6,7 @@ import { Placeholder } from "discourse/lib/posts-with-placeholders"; import transformPost from "discourse/lib/transform-post"; import DiscourseURL from "discourse/lib/url"; import { avatarFor } from "discourse/widgets/post"; +import RenderGlimmer from "discourse/widgets/render-glimmer"; import { createWidget } from "discourse/widgets/widget"; import discourseDebounce from "discourse-common/lib/debounce"; import { iconNode } from "discourse-common/lib/icon-library"; @@ -252,7 +254,14 @@ export default createWidget("post-stream", { if (prevDate) { const daysSince = Math.floor((curTime - prevDate) / DAY); if (daysSince > this.siteSettings.show_time_gap_days) { - result.push(this.attach("time-gap", { daysSince })); + result.push( + new RenderGlimmer( + this, + "div.time-gap.small-action", + hbs``, + { daysSince } + ) + ); } } prevDate = curTime; diff --git a/app/assets/javascripts/discourse/app/widgets/time-gap.js b/app/assets/javascripts/discourse/app/widgets/time-gap.js deleted file mode 100644 index d672fc5b593..00000000000 --- a/app/assets/javascripts/discourse/app/widgets/time-gap.js +++ /dev/null @@ -1,28 +0,0 @@ -import { h } from "virtual-dom"; -import { createWidget } from "discourse/widgets/widget"; -import I18n from "discourse-i18n"; - -function description(attrs) { - const daysSince = attrs.daysSince; - - if (daysSince < 30) { - return I18n.t("dates.later.x_days", { count: daysSince }); - } else if (daysSince < 365) { - const gapMonths = Math.round(daysSince / 30); - return I18n.t("dates.later.x_months", { count: gapMonths }); - } else { - const gapYears = Math.round(daysSince / 365); - return I18n.t("dates.later.x_years", { count: gapYears }); - } -} - -export default createWidget("time-gap", { - tagName: "div.time-gap.small-action", - - html(attrs) { - return [ - h("div.topic-avatar", ""), - h("div.small-action-desc.timegap", description(attrs)), - ]; - }, -}); diff --git a/app/assets/javascripts/discourse/tests/integration/components/time-gap-test.js b/app/assets/javascripts/discourse/tests/integration/components/time-gap-test.js new file mode 100644 index 00000000000..3aa8d09a0bb --- /dev/null +++ b/app/assets/javascripts/discourse/tests/integration/components/time-gap-test.js @@ -0,0 +1,40 @@ +import { render } from "@ember/test-helpers"; +import { hbs } from "ember-cli-htmlbars"; +import { module, test } from "qunit"; +import { setupRenderingTest } from "discourse/tests/helpers/component-test"; +import I18n from "discourse-i18n"; + +module("Integration | Component | time-gap", function (hooks) { + setupRenderingTest(hooks); + + test("it renders days correctly", async function (assert) { + this.set("daysSince", 5); + await render(hbs``); + assert + .dom(".small-action-desc.timegap") + .hasText(I18n.t("dates.later.x_days", { count: 5 })); + }); + + test("it renders months correctly", async function (assert) { + this.set("daysSince", 90); + await render(hbs``); + assert + .dom(".small-action-desc.timegap") + .hasText(I18n.t("dates.later.x_months", { count: 3 })); + }); + + test("it renders years correctly", async function (assert) { + this.set("daysSince", 730); + await render(hbs``); + assert + .dom(".small-action-desc.timegap") + .hasText(I18n.t("dates.later.x_years", { count: 2 })); + }); + + test("it renders the correct elements", async function (assert) { + this.set("daysSince", 10); + await render(hbs``); + assert.dom(".topic-avatar").exists(); + assert.dom(".small-action-desc.timegap").exists(); + }); +});