Replace Modifier Loader

I also replaced the RSVP.map calls with Promise.all as I don't know how long rsvp has to live and I was in here anyway.
ilios · Aug 5, 2024 · a29f8c1 · a29f8c1
1 parent db03901
commit a29f8c1
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 53 deletions.
diff --git a/packages/ilios-common/.lint-todo b/packages/ilios-common/.lint-todo
@@ -75,7 +75,5 @@ add|ember-template-lint|no-at-ember-render-modifiers|3|2|3|2|9b56ba661238d88b20a
 add|ember-template-lint|no-at-ember-render-modifiers|4|2|4|2|23cd787c79c34a628dadb6e96dd4004d42eebb79|1720137600000|1722729600000|1725321600000|addon/components/dashboard/courses-calendar-filter.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|5|2|5|2|a90be151f45cd8ab32827e9247a9a9eb7f1baef2|1720137600000|1722729600000|1725321600000|addon/components/dashboard/courses-calendar-filter.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|25|10|25|10|4913c92cf4c945ea3970261ab1c1da9fa97d4bbc|1720137600000|1722729600000|1725321600000|addon/components/dashboard/courses-calendar-filter.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|4|4|4|4|03a0b2a6468e5c6768194c11af7aae4a82913ad9|1720137600000|1722729600000|1725321600000|addon/components/dashboard/filter-tags.hbs
-add|ember-template-lint|no-at-ember-render-modifiers|5|4|5|4|c66686be652666be4c47d41c570b9807967cf118|1720137600000|1722729600000|1725321600000|addon/components/dashboard/filter-tags.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|28|6|28|6|242be4337ef58ba487a9168fe2944bd6919a1397|1720137600000|1722729600000|1725321600000|addon/components/session/publication-menu.hbs
 add|ember-template-lint|no-at-ember-render-modifiers|29|6|29|6|df94e6558ff62dea69f6f656f668f29b56bcc378|1720137600000|1722729600000|1725321600000|addon/components/session/publication-menu.hbs
diff --git a/packages/ilios-common/addon/components/dashboard/filter-tags.hbs b/packages/ilios-common/addon/components/dashboard/filter-tags.hbs
@@ -1,8 +1,6 @@
 {{#if this.activeFilters.length}}
   <section
     class="filters-list"
-    {{did-insert (perform this.load) this.activeFilters}}
-    {{did-update (perform this.load) this.activeFilters}}
     data-test-dashboard-filter-tags
   >
     {{#if this.filterTags}}

diff --git a/packages/ilios-common/addon/components/dashboard/filter-tags.js b/packages/ilios-common/addon/components/dashboard/filter-tags.js
@@ -1,14 +1,12 @@
 import Component from '@glimmer/component';
-import { restartableTask } from 'ember-concurrency';
-import { all, map } from 'rsvp';
-import { tracked } from '@glimmer/tracking';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
 import { findById } from 'ilios-common/utils/array-helpers';
+import { TrackedAsyncData } from 'ember-async-data';
 
 export default class DashboardFilterTagsComponent extends Component {
   @service store;
   @service intl;
-  @tracked filterTags = [];
 
   get activeFilters() {
     return [].concat(
@@ -20,23 +18,22 @@ export default class DashboardFilterTagsComponent extends Component {
     );
   }
 
-  load = restartableTask(async () => {
-    const tags = await all([
-      this.getCourseLevelTags(),
-      this.getSessionTypeTags(),
-      this.getCohortTags(),
-      this.getTermTags(),
-      this.getCourseTags(),
-    ]);
-    this.filterTags = tags.flat();
-  });
+  get filterTags() {
+    return [
+      ...this.courseLevelTags,
+      ...this.sessionTypeTags,
+      ...this.cohortTags,
+      ...this.termTags,
+      ...this.courseTags,
+    ];
+  }
 
   async fetchModel(modelName, id) {
     const model = this.store.peekRecord(modelName, id);
     return model ? model : this.store.findRecord(modelName, id);
   }
 
-  getCourseLevelTags() {
+  get courseLevelTags() {
     return this.args.selectedCourseLevels.map((level) => {
       return {
         id: level,
@@ -46,18 +43,29 @@ export default class DashboardFilterTagsComponent extends Component {
       };
     });
   }
-  async getSessionTypeTags() {
-    return map(this.args.selectedSessionTypeIds, async (id) => {
-      const sessionType = await this.fetchModel('session-type', id);
-      return {
-        id,
-        class: 'tag-session-type',
-        remove: this.args.removeSessionTypeId,
-        name: sessionType.title,
-      };
-    });
+
+  @cached
+  get sessionTypeTagsData() {
+    return new TrackedAsyncData(
+      Promise.all(
+        this.args.selectedSessionTypeIds.map(async (id) => {
+          const sessionType = await this.fetchModel('session-type', id);
+          return {
+            id,
+            class: 'tag-session-type',
+            remove: this.args.removeSessionTypeId,
+            name: sessionType.title,
+          };
+        }),
+      ),
+    );
   }
-  getCohortTags() {
+
+  get sessionTypeTags() {
+    return this.sessionTypeTagsData.isResolved ? this.sessionTypeTagsData.value : [];
+  }
+
+  get cohortTags() {
     return this.args.selectedCohortIds.map((id) => {
       const proxy = findById(this.args.cohortProxies, id);
       return {
@@ -68,29 +76,49 @@ export default class DashboardFilterTagsComponent extends Component {
       };
     });
   }
-  async getTermTags() {
-    return map(this.args.selectedTermIds, async (id) => {
-      const term = await this.fetchModel('term', id);
-      const allTitles = await term.getTitleWithParentTitles();
-      const vocabulary = await term.get('vocabulary');
-      const title = vocabulary.get('title');
-      return {
-        id,
-        class: 'tag-term',
-        remove: this.args.removeTermId,
-        name: `${title} > ${allTitles}`,
-      };
-    });
+
+  @cached
+  get termTagsData() {
+    return new TrackedAsyncData(
+      Promise.all(
+        this.args.selectedTermIds.map(async (id) => {
+          const term = await this.fetchModel('term', id);
+          const allTitles = await term.getTitleWithParentTitles();
+          const vocabulary = await term.vocabulary;
+          const title = vocabulary.get('title');
+          return {
+            id,
+            class: 'tag-term',
+            remove: this.args.removeTermId,
+            name: `${title} > ${allTitles}`,
+          };
+        }),
+      ),
+    );
   }
-  async getCourseTags() {
-    return map(this.args.selectedCourseIds, async (id) => {
-      const course = await this.fetchModel('course', id);
-      return {
-        id,
-        class: 'tag-course',
-        remove: this.args.removeCourseId,
-        name: `${course.year} ${course.title}`,
-      };
-    });
+
+  get termTags() {
+    return this.termTagsData.isResolved ? this.termTagsData.value : [];
+  }
+
+  @cached
+  get courseTagsData() {
+    return new TrackedAsyncData(
+      Promise.all(
+        this.args.selectedCourseIds.map(async (id) => {
+          const course = await this.fetchModel('course', id);
+          return {
+            id,
+            class: 'tag-course',
+            remove: this.args.removeCourseId,
+            name: `${course.year} ${course.title}`,
+          };
+        }),
+      ),
+    );
+  }
+
+  get courseTags() {
+    return this.courseTagsData.isResolved ? this.courseTagsData.value : [];
   }
 }