DEV: Use ember-async-data to fetch data in components

2025-02-25 18:55:32 -06:00 · 2025-02-04 22:35:54 -03:00
parent 9f41ce7fce
commit 76c7a54f53
3 changed files with 48 additions and 28 deletions
--- a/app/assets/javascripts/discourse/app/components/choose-message.gjs
+++ b/app/assets/javascripts/discourse/app/components/choose-message.gjs
@@ -1,23 +1,36 @@
 import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
+import { cached, tracked } from "@glimmer/tracking";
 import { fn } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
 import { isEmpty } from "@ember/utils";
+import { TrackedAsyncData } from "ember-async-data";
+import { and } from "truth-helpers";
 import { debounce } from "discourse/lib/decorators";
+import { INPUT_DELAY } from "discourse/lib/environment";
 import { searchForTerm } from "discourse/lib/search";
 import { i18n } from "discourse-i18n";

 export default class ChooseMessage extends Component {
+  @tracked searchedValue;
  @tracked hasSearched = false;
-  @tracked loading = false;
-  @tracked messages;

-  @debounce(300)
-  async debouncedSearch(title) {
+  @debounce(INPUT_DELAY)
+  setSearchTerm(event) {
+    this.searchedValue = event.target.value;
+
+    this.hasSearched = true;
+    this.args.setSelectedTopicId(null);
+  }
+
+  @cached
+  get messages() {
+    return new TrackedAsyncData(this.search(this.searchedValue));
+  }
+
+  @action
+  async search(title) {
    if (isEmpty(title)) {
-      this.messages = null;
-      this.loading = false;
      return;
    }

@@ -27,19 +40,9 @@ export default class ChooseMessage extends Component {
      restrictToArchetype: "private_message",
    });

-    this.messages = results?.posts
+    return results?.posts
      ?.mapBy("topic")
      .filter((topic) => topic.id !== this.args.currentTopicId);
-
-    this.loading = false;
-  }
-
-  @action
-  search(event) {
-    this.hasSearched = true;
-    this.loading = true;
-    this.args.setSelectedTopicId(null);
-    this.debouncedSearch(event.target.value);
  }

  <template>
@@ -49,16 +52,16 @@ export default class ChooseMessage extends Component {
      </label>

      <input
-        {{on "input" this.search}}
+        {{on "input" this.setSearchTerm}}
        type="text"
        placeholder={{i18n "choose_message.title.placeholder"}}
        id="choose-message-title"
      />

-      {{#if this.loading}}
+      {{#if this.messages.isPending}}
        <p>{{i18n "loading"}}</p>
-      {{else if this.hasSearched}}
-        {{#each this.messages as |message|}}
+      {{else if (and this.hasSearched this.messages.isResolved)}}
+        {{#each this.messages.value as |message|}}
          <div class="controls existing-message">
            <label class="radio">
              <input
--- a/app/assets/javascripts/discourse/package.json
+++ b/app/assets/javascripts/discourse/package.json
@@ -80,6 +80,7 @@
    "discourse-i18n": "workspace:1.0.0",
    "discourse-markdown-it": "workspace:1.0.0",
    "discourse-plugins": "workspace:1.0.0",
+    "ember-async-data": "^1.0.3",
    "ember-auto-import": "^2.10.0",
    "ember-buffered-proxy": "^2.1.1",
    "ember-cached-decorator-polyfill": "^1.0.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -462,6 +462,9 @@ importers:
      discourse-plugins:
        specifier: workspace:1.0.0
        version: link:../discourse-plugins
+      ember-async-data:
+        specifier: ^1.0.3
+        version: 1.0.3(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
      ember-auto-import:
        specifier: ^2.10.0
        version: 2.10.0(@glint/template@1.5.2)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))
@@ -509,7 +512,7 @@ importers:
        version: 3.0.1(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
      ember-modifier:
        specifier: ^4.2.0
-        version: 4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
+        version: 4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5))
      ember-qunit:
        specifier: ^9.0.1
        version: 9.0.1(@ember/test-helpers@5.1.0(@babel/core@7.26.7)(@glint/template@1.5.2)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))))(@glint/template@1.5.2)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))(qunit@2.24.1)
@@ -662,7 +665,7 @@ importers:
        version: 4.2.0
      ember-this-fallback:
        specifier: ^0.4.0
-        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
+        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5))
    devDependencies:
      ember-cli:
        specifier: ~6.1.0
@@ -1002,7 +1005,7 @@ importers:
        version: 5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))
      ember-this-fallback:
        specifier: ^0.4.0
-        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
+        version: 0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5))
      handlebars:
        specifier: ^4.7.8
        version: 4.7.8
@@ -4156,6 +4159,11 @@ packages:
  electron-to-chromium@1.5.88:
    resolution: {integrity: sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==}

+  ember-async-data@1.0.3:
+    resolution: {integrity: sha512-54OtoQwNi+/ZvPOVuT4t8fcHR9xL8N7kBydzcZSo6BIEsLYeXPi3+jUR8niWjfjXXhKlJ8EWXR0lTeHleTrxbw==}
+    peerDependencies:
+      ember-source: '>=4.8.4'
+
  ember-auto-import@2.10.0:
    resolution: {integrity: sha512-bcBFDYVTFHyqyq8BNvsj6UO3pE6Uqou/cNmee0WaqBgZ+1nQqFz0UE26usrtnFAT+YaFZSkqF2H36QW84k0/cg==}
    engines: {node: 12.* || 14.* || >= 16}
@@ -10063,7 +10071,7 @@ snapshots:
      '@glint/template': 1.5.2
    optionalDependencies:
      ember-cli-htmlbars: 6.3.0
-      ember-modifier: 4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)))
+      ember-modifier: 4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5))

  '@glint/environment-ember-template-imports@1.5.2(@glint/environment-ember-loose@1.5.2(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(ember-cli-htmlbars@6.3.0)(ember-modifier@4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5))))(@glint/template@1.5.2)':
    dependencies:
@@ -12240,6 +12248,14 @@ snapshots:

  electron-to-chromium@1.5.88: {}

+  ember-async-data@1.0.3(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))):
+    dependencies:
+      '@ember/test-waiters': 3.1.0
+      '@embroider/addon-shim': 1.9.0
+      ember-source: 5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))
+    transitivePeerDependencies:
+      - supports-color
+
  ember-auto-import@2.10.0(@glint/template@1.5.2)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2)):
    dependencies:
      '@babel/core': 7.26.7(supports-color@8.1.1)
@@ -12782,7 +12798,7 @@ snapshots:
      - '@babel/core'
      - supports-color

-  ember-modifier@4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))):
+  ember-modifier@4.2.0(@babel/core@7.26.7)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)):
    dependencies:
      '@embroider/addon-shim': 1.9.0
      decorator-transforms: 2.3.0(@babel/core@7.26.7)
@@ -12955,7 +12971,7 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  ember-this-fallback@0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)(webpack@5.97.1(@swc/core@1.10.12)(esbuild@0.24.2))):
+  ember-this-fallback@0.4.0(patch_hash=znalyv6akdxlqfpmxunrdi3osa)(ember-cli-htmlbars@6.3.0)(ember-source@5.12.0(patch_hash=xx7mvsb7nmshqkkqhmf45r3hse)(@glimmer/component@1.1.2(@babel/core@7.26.7))(@glint/template@1.5.2)(rsvp@4.8.5)):
    dependencies:
      '@glimmer/syntax': 0.84.3
      babel-plugin-ember-template-compilation: 2.3.0