remove usage of did insert / update

1024pix · Apr 17, 2024 · 8dfb8aa · 8dfb8aa
1 parent 7182932
commit 8dfb8aa
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 29 deletions.
diff --git a/addon/components/pix-filterable-and-searchable-select.hbs b/addon/components/pix-filterable-and-searchable-select.hbs
@@ -28,7 +28,6 @@
       <:default as |option|>{{option.label}}</:default>
     </PixMultiSelect>
     <PixSelect
-      {{did-insert this.setSelectWidth}}
       @id={{this.pixSelectId}}
       @placeholder={{@placeholder}}
       @value={{@value}}

diff --git a/addon/components/pix-filterable-and-searchable-select.js b/addon/components/pix-filterable-and-searchable-select.js
@@ -1,14 +1,24 @@
 import Component from '@glimmer/component';
+import { inject as service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixFilterableAndSearchableSelect extends Component {
+  @service elementHelper;
   @tracked selectedCategories = [];
-  mainId = 'pix-pfass-' + guidFor(this);
-  pixSelectId = 'pix-pfass-select-' + guidFor(this);
-  pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+  constructor(...args) {
+    super(...args);
+    this.mainId = 'pix-pfass-' + guidFor(this);
+    this.pixSelectId = 'pix-pfass-select-' + guidFor(this);
+    this.pixMultiSelectId = 'pix-pfass-multi-select-' + guidFor(this);
+
+    this.elementHelper.waitForElement(this.pixSelectId).then((element) => {
+      this.selectWidth(element);
+    });
+  }
 
   @action
   selectCategories(categories) {

diff --git a/addon/components/pix-pagination.hbs b/addon/components/pix-pagination.hbs
@@ -1,4 +1,4 @@
-<footer class={{this.isCondensed}} {{did-update this.checkCurrentPageAgainstPageCount @pagination}}>
+<footer class={{this.isCondensed}}>
   <section class="pix-pagination__size">
     <span class="pagination-size__label">{{this.beforeResultsPerPage}}</span>
     <PixSelect

diff --git a/addon/components/pix-pagination.js b/addon/components/pix-pagination.js
@@ -13,6 +13,16 @@ const DEFAULT_PAGE_OPTIONS = [
 export default class PixPagination extends Component {
   @service router;
 
+  constructor() {
+    super();
+
+    const pageCount = this.args.pagination.pageCount;
+    if (pageCount === 0) return;
+    if (this.currentPage > pageCount) {
+      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
+    }
+  }
+
   get isCondensed() {
     return this.args.isCondensed ? 'pix-pagination-condensed' : 'pix-pagination';
   }
@@ -118,13 +128,4 @@ export default class PixPagination extends Component {
   goToPreviousPage() {
     this.router.replaceWith({ queryParams: { pageNumber: this.previousPage } });
   }
-
-  @action
-  checkCurrentPageAgainstPageCount() {
-    const pageCount = this.args.pagination.pageCount;
-    if (pageCount === 0) return;
-    if (this.currentPage > pageCount) {
-      this.router.replaceWith({ queryParams: { pageNumber: pageCount } });
-    }
-  }
 }
diff --git a/addon/components/pix-select.hbs b/addon/components/pix-select.hbs
@@ -4,7 +4,6 @@
   {{on-click-outside this.hideDropdown}}
   {{on-arrow-down-up-action this.listId this.showDropdown this.isExpanded}}
   {{on-escape-action this.hideDropdown this.selectId}}
-  {{did-insert this.setSelectWidth}}
   {{on "keydown" this.lockTab}}
   ...attributes
 >

diff --git a/addon/components/pix-select.js b/addon/components/pix-select.js
@@ -1,30 +1,33 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import { createClass } from '../common/add-dynamic-style-tag';
 
 export default class PixSelect extends Component {
+  @service elementHelper;
   @tracked isExpanded = false;
   @tracked searchValue = null;
-  searchId = 'search-input-' + guidFor(this);
 
   constructor(...args) {
     super(...args);
 
     const categories = [];
+
+    this.searchId = 'search-input-' + guidFor(this);
+    this.selectId = this.args.id ? this.args.id : 'select-' + guidFor(this);
     this.args.options.forEach((element) => {
       if (!categories.includes(element.category) && element.category !== undefined) {
         categories.push(element.category);
       }
     });
 
-    this.displayCategory = categories.length > 0;
-  }
+    this.elementHelper.waitForElement(this.selectId).then((element) => {
+      this.selectWidth(element);
+    });
 
-  get selectId() {
-    if (this.args.id) return this.args.id;
-    return 'select-' + guidFor(this);
+    this.displayCategory = categories.length > 0;
   }
 
   get displayDefaultOption() {

diff --git a/app/services/element-helper.js b/app/services/element-helper.js
@@ -0,0 +1,23 @@
+import Service from '@ember/service';
+
+export default class ElementService extends Service {
+  waitForElement(id) {
+    return new Promise((resolve) => {
+      if (document.getElementById(id)) {
+        return resolve(document.getElementById(id));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.getElementById(id)) {
+          resolve(document.getElementById(id));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+}
diff --git a/tests/integration/components/pix-filterable-and-searchable-select-test.js b/tests/integration/components/pix-filterable-and-searchable-select-test.js
@@ -256,7 +256,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
     const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -286,7 +286,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
       const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -314,7 +314,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
   @subLabel={{this.subLabel}}
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -339,7 +339,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
       const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}
@@ -369,7 +369,7 @@ module('Integration | Component | PixFilterableAndSearchableSelect', function (h
     const screen = await render(hbs`<PixFilterableAndSearchableSelect
   @placeholder={{this.placeholder}}
   @options={{this.options}}
-  @value={{'2'}}
+  @value='2'
   @onChange={{this.onChange}}
   @categoriesId={{this.categoriesId}}
   @categoriesPlaceholder={{this.categoriesPlaceholder}}

diff --git a/tests/integration/components/pix-select-test.js b/tests/integration/components/pix-select-test.js
@@ -144,7 +144,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on arrow up press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'3'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='3' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when
@@ -164,7 +164,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on arrow down press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'2'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='2' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when
@@ -184,7 +184,7 @@ module('Integration | Component | PixSelect', function (hooks) {
       test('it should display list, focus selected element on space press', async function (assert) {
         // given
         const screen =
-          await render(hbs`<PixSelect @options={{this.options}} @value={{'1'}} @placeholder={{this.placeholder}}><:label
+          await render(hbs`<PixSelect @options={{this.options}} @value='1' @placeholder={{this.placeholder}}><:label
   >{{this.label}}</:label></PixSelect>`);
 
         // when