history: add sorting to the history list

Author: jamaljsr

app/src/__tests__/components/history/HistoryPage.spec.tsx

@@ -8,8 +8,9 @@ import HistoryPage from 'components/history/HistoryPage';
 describe('HistoryPage', () => {
   let store: Store;
 
-  beforeEach(() => {
+  beforeEach(async () => {
     store = createStore();
+    await store.swapStore.fetchSwaps();
   });
 
   const render = () => {
@@ -35,9 +36,35 @@ describe('HistoryPage', () => {
     expect(getByText('Updated')).toBeInTheDocument();
   });
 
-  it('should export channels', () => {
+  it('should export loop history', () => {
     const { getByText } = render();
     fireEvent.click(getByText('download.svg'));
     expect(saveAs).toBeCalledWith(expect.any(Blob), 'swaps.csv');
   });
+
+  it('should sort the history list', () => {
+    const { getByText, store } = render();
+    expect(store.settingsStore.historySort.field).toBe('lastUpdateTime');
+    expect(store.settingsStore.historySort.descending).toBe(true);
+
+    fireEvent.click(getByText('Status'));
+    expect(store.settingsStore.historySort.field).toBe('stateLabel');
+
+    fireEvent.click(getByText('Type'));
+    expect(store.settingsStore.historySort.field).toBe('typeName');
+
+    fireEvent.click(getByText('Amount'));
+    expect(store.settingsStore.historySort.field).toBe('amount');
+
+    fireEvent.click(getByText('Created'));
+    expect(store.settingsStore.historySort.field).toBe('initiationTime');
+
+    fireEvent.click(getByText('Updated'));
+    expect(store.settingsStore.historySort.field).toBe('lastUpdateTime');
+    expect(store.settingsStore.historySort.descending).toBe(false);
+
+    fireEvent.click(getByText('Updated'));
+    expect(store.settingsStore.historySort.field).toBe('lastUpdateTime');
+    expect(store.settingsStore.historySort.descending).toBe(true);
+  });
 });

app/src/components/history/HistoryRow.tsx

@@ -1,8 +1,10 @@
 import React, { CSSProperties } from 'react';
 import { observer } from 'mobx-react-lite';
 import { usePrefixedTranslation } from 'hooks';
+import { useStore } from 'store';
 import { Swap } from 'store/models';
-import { Column, HeaderFour, Row } from 'components/base';
+import { Column, Row } from 'components/base';
+import SortableHeader from 'components/common/SortableHeader';
 import Unit from 'components/common/Unit';
 import SwapDot from 'components/loop/SwapDot';
 import { styled } from 'components/theme';
@@ -43,31 +45,65 @@ const Styled = {
   `,
 };
 
-export const HistoryRowHeader: React.FC = () => {
+const RowHeader: React.FC = () => {
   const { l } = usePrefixedTranslation('cmps.history.HistoryRowHeader');
+  const { settingsStore } = useStore();
+
   const { HeaderRow, ActionColumn, HeaderColumn } = Styled;
   return (
     <HeaderRow>
       <ActionColumn />
       <HeaderColumn cols={3}>
-        <HeaderFour>{l('status')}</HeaderFour>
+        <SortableHeader<Swap>
+          field="stateLabel"
+          sort={settingsStore.historySort}
+          onSort={settingsStore.setHistorySort}
+        >
+          {l('status')}
+        </SortableHeader>
       </HeaderColumn>
       <HeaderColumn>
-        <HeaderFour>{l('type')}</HeaderFour>
+        <SortableHeader<Swap>
+          field="typeName"
+          sort={settingsStore.historySort}
+          onSort={settingsStore.setHistorySort}
+        >
+          {l('type')}
+        </SortableHeader>
       </HeaderColumn>
       <HeaderColumn right>
-        <HeaderFour>{l('amount')}</HeaderFour>
+        <SortableHeader<Swap>
+          field="amount"
+          sort={settingsStore.historySort}
+          onSort={settingsStore.setHistorySort}
+        >
+          {l('amount')}
+        </SortableHeader>
       </HeaderColumn>
       <HeaderColumn right>
-        <HeaderFour>{l('created')}</HeaderFour>
+        <SortableHeader<Swap>
+          field="initiationTime"
+          sort={settingsStore.historySort}
+          onSort={settingsStore.setHistorySort}
+        >
+          {l('created')}
+        </SortableHeader>
       </HeaderColumn>
       <HeaderColumn right>
-        <HeaderFour>{l('updated')}</HeaderFour>
+        <SortableHeader<Swap>
+          field="lastUpdateTime"
+          sort={settingsStore.historySort}
+          onSort={settingsStore.setHistorySort}
+        >
+          {l('updated')}
+        </SortableHeader>
       </HeaderColumn>
     </HeaderRow>
   );
 };
 
+export const HistoryRowHeader = observer(RowHeader);
+
 interface Props {
   swap: Swap;
   style?: CSSProperties;

app/src/store/models/swap.ts

@@ -1,6 +1,7 @@
 import { action, computed, observable } from 'mobx';
 import { now } from 'mobx-utils';
 import * as LOOP from 'types/generated/loop_pb';
+import { SortParams } from 'types/state';
 import Big from 'big.js';
 import formatDate from 'date-fns/format';
 import { CsvColumns } from 'util/csv';
@@ -112,6 +113,30 @@ export default class Swap {
     this.state = loopSwap.state;
   }
 
+  /**
+   * Compares a specific field of two swaps for sorting
+   * @param a the first swap to compare
+   * @param b the second swap to compare
+   * @param sortBy the field and direction to sort the two swaps by
+   * @returns a positive number if `a`'s field is greater than `b`'s,
+   * a negative number if `a`'s field is less than `b`'s, or zero otherwise
+   */
+  static compare(a: Swap, b: Swap, field: SortParams<Swap>['field']): number {
+    switch (field) {
+      case 'stateLabel':
+        return a.stateLabel.toLowerCase() > b.stateLabel.toLowerCase() ? 1 : -1;
+      case 'typeName':
+        return a.typeName.toLowerCase() > b.typeName.toLowerCase() ? 1 : -1;
+      case 'amount':
+        return +a.amount.sub(b.amount);
+      case 'initiationTime':
+        return a.initiationTime - b.initiationTime;
+      case 'lastUpdateTime':
+      default:
+        return a.lastUpdateTime - b.lastUpdateTime;
+    }
+  }
+
   /**
    * Specifies which properties of this class should be exported to CSV
    * @param key must match the name of a property on this class

app/src/store/stores/settingsStore.ts

@@ -2,14 +2,15 @@ import { action, autorun, observable, toJS } from 'mobx';
 import { SortParams } from 'types/state';
 import { BalanceMode, Unit } from 'util/constants';
 import { Store } from 'store';
-import { Channel } from 'store/models';
+import { Channel, Swap } from 'store/models';
 
 export interface PersistentSettings {
   sidebarVisible: boolean;
   unit: Unit;
   balanceMode: BalanceMode;
   tourAutoShown: boolean;
   channelSort: SortParams<Channel>;
+  historySort: SortParams<Swap>;
 }
 
 export default class SettingsStore {
@@ -36,6 +37,12 @@ export default class SettingsStore {
     descending: true,
   };
 
+  /** specifies the sorting field and direction for the channel list */
+  @observable historySort: SortParams<Swap> = {
+    field: 'lastUpdateTime',
+    descending: true,
+  };
+
   /** the chosen language */
   @observable lang = 'en-US';
 
@@ -98,6 +105,17 @@ export default class SettingsStore {
     this._store.log.info('reset channel list sort order', toJS(this.channelSort));
   }
 
+  /**
+   * Sets the sort field and direction that the swap history list should use
+   * @param field the swap field to sort by
+   * @param descending true of the order should be descending, otherwise false
+   */
+  @action.bound
+  setHistorySort(field: SortParams<Swap>['field'], descending: boolean) {
+    this.historySort = { field, descending };
+    this._store.log.info('updated history list sort order', toJS(this.historySort));
+  }
+
   /**
    * initialized the settings and auto-save when a setting is changed
    */
@@ -112,6 +130,7 @@ export default class SettingsStore {
           balanceMode: this.balanceMode,
           tourAutoShown: this.tourAutoShown,
           channelSort: toJS(this.channelSort),
+          historySort: toJS(this.historySort),
         };
         this._store.storage.set('settings', settings);
         this._store.log.info('saved settings to localStorage', settings);
@@ -133,6 +152,7 @@ export default class SettingsStore {
       this.balanceMode = settings.balanceMode;
       this.tourAutoShown = settings.tourAutoShown;
       if (settings.channelSort) this.channelSort = settings.channelSort;
+      if (settings.historySort) this.historySort = settings.historySort;
       this._store.log.info('loaded settings', settings);
     }
 

app/src/store/stores/swapStore.ts

@@ -37,9 +37,12 @@ export default class SwapStore {
 
   /** swaps sorted by created date descending */
   @computed get sortedSwaps() {
-    return values(this.swaps)
+    const { field, descending } = this._store.settingsStore.historySort;
+    const swaps = values(this.swaps)
       .slice()
-      .sort((a, b) => b.initiationTime - a.initiationTime);
+      .sort((a, b) => Swap.compare(a, b, field));
+
+    return descending ? swaps.reverse() : swaps;
   }
 
   /** the last two swaps */