refactor(pix-table): simplify HeaderContext class

1024pix · Dec 6, 2024 · 72ba020 · 72ba020
1 parent 8e78f54
commit 72ba020
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 26 deletions.
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -8,7 +8,7 @@
     </thead>
     <tbody>
       {{this.headerContext.date}}
-      {{#each this.computedData as |row|}}
+      {{#each this.sortedData as |row|}}
         <tr>
           {{yield row this.cellContext to="columns"}}
         </tr>

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -1,16 +1,18 @@
 import Component from '@glimmer/component';
 import { warn } from '@ember/debug';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class PixTable extends Component {
-  headerContext = new HeaderContext({
-    type: 'header',
-    toggleSort: this.toggleSort,
-  });
+  headerContext = new HeaderContext();
 
-  @tracked
-  computedData = [...this.args.data];
+  get sortedData() {
+    if (!this.headerContext.currentSortedColumnId) return this.args.data;
+    const sortedCopy = [...this.args.data].sort(this.headerContext.sortFun);
+    if (this.headerContext.sortOrder === 'asc') {
+      return sortedCopy;
+    }
+    return sortedCopy.reverse();
+  }
 
   get variant() {
     const value = this.args.variant ?? 'primary';
@@ -41,33 +43,22 @@ export default class PixTable extends Component {
       type: 'cell',
     };
   }
-
-  @action
-  toggleSort(id, sortFun) {
-    this.headerContext.refresh(id);
-    if (this.headerContext.sortOrder === 'asc') {
-      this.computedData = this.computedData.sort(sortFun);
-      return;
-    }
-    this.computedData = this.computedData.reverse();
-  }
 }
 
 class HeaderContext {
   @tracked sortOrder;
+  @tracked sortFun;
   @tracked currentSortedColumnId;
 
-  constructor({ type, toggleSort, sortOrder, currentSortedColumnId }) {
-    this.type = type;
-    this.toggleSort = toggleSort;
-    this.sortOrder = sortOrder;
-    this.currentSortedColumnId = currentSortedColumnId;
+  constructor() {
+    this.type = 'header';
   }
 
-  refresh(id) {
-    if (id !== this.currentSortedColumnId) {
+  toggleSort(columnId, newSortFun) {
+    if (columnId !== this.currentSortedColumnId) {
       this.sortOrder = 'asc';
-      this.currentSortedColumnId = id;
+      this.sortFun = newSortFun;
+      this.currentSortedColumnId = columnId;
     } else {
       this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
     }