add sorting of the channel and history lists

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/__tests__/components/loop/LoopPage.spec.tsx

@@ -173,5 +173,40 @@ describe('LoopPage component', () => {
       expect(getByText('Review Loop amount and fee')).toBeInTheDocument();
       expect(store.buildSwapStore.processingTimeout).toBeUndefined();
     });
+
+    it('should sort the channel list', () => {
+      const { getByText, store } = render();
+      expect(getByText('Capacity')).toBeInTheDocument();
+      expect(store.settingsStore.channelSort.field).toBeUndefined();
+      expect(store.settingsStore.channelSort.descending).toBe(true);
+
+      fireEvent.click(getByText('Can Receive'));
+      expect(store.settingsStore.channelSort.field).toBe('remoteBalance');
+
+      fireEvent.click(getByText('Can Send'));
+      expect(store.settingsStore.channelSort.field).toBe('localBalance');
+
+      fireEvent.click(getByText('In Fee %'));
+      expect(store.settingsStore.channelSort.field).toBe('remoteFeeRate');
+
+      fireEvent.click(getByText('Uptime %'));
+      expect(store.settingsStore.channelSort.field).toBe('uptimePercent');
+
+      fireEvent.click(getByText('Peer/Alias'));
+      expect(store.settingsStore.channelSort.field).toBe('aliasLabel');
+
+      fireEvent.click(getByText('Capacity'));
+      expect(store.settingsStore.channelSort.field).toBe('capacity');
+      expect(store.settingsStore.channelSort.descending).toBe(false);
+
+      fireEvent.click(getByText('Capacity'));
+      expect(store.settingsStore.channelSort.field).toBe('capacity');
+      expect(store.settingsStore.channelSort.descending).toBe(true);
+
+      expect(getByText('slash.svg')).toBeInTheDocument();
+      fireEvent.click(getByText('slash.svg'));
+      expect(store.settingsStore.channelSort.field).toBeUndefined();
+      expect(store.settingsStore.channelSort.descending).toBe(true);
+    });
   });
 });

app/src/components/base/icons.tsx

@@ -1,5 +1,7 @@
+import { ReactComponent as ArrowDownIcon } from 'assets/icons/arrow-down.svg';
 import { ReactComponent as ArrowLeftIcon } from 'assets/icons/arrow-left.svg';
 import { ReactComponent as ArrowRightIcon } from 'assets/icons/arrow-right.svg';
+import { ReactComponent as ArrowUpIcon } from 'assets/icons/arrow-up.svg';
 import { ReactComponent as BitcoinIcon } from 'assets/icons/bitcoin.svg';
 import { ReactComponent as BoltIcon } from 'assets/icons/bolt.svg';
 import { ReactComponent as CheckIcon } from 'assets/icons/check.svg';
@@ -16,10 +18,11 @@ import { ReactComponent as MaximizeIcon } from 'assets/icons/maximize.svg';
 import { ReactComponent as MenuIcon } from 'assets/icons/menu.svg';
 import { ReactComponent as MinimizeIcon } from 'assets/icons/minimize.svg';
 import { ReactComponent as RefreshIcon } from 'assets/icons/refresh-cw.svg';
+import { ReactComponent as CancelIcon } from 'assets/icons/slash.svg';
 import { styled } from 'components/theme';
 
 interface IconProps {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'x-small' | 'small' | 'medium' | 'large';
   onClick?: () => void;
 }
 
@@ -39,6 +42,13 @@ const Icon = styled.span<IconProps>`
     }
   `}
 
+  ${props =>
+    props.size === 'x-small' &&
+    `
+      width: 16px;
+      height: 16px;
+    `}
+
   ${props =>
     props.size === 'small' &&
     `
@@ -61,10 +71,13 @@ const Icon = styled.span<IconProps>`
     `}
 `;
 
+export const ArrowLeft = Icon.withComponent(ArrowLeftIcon);
 export const ArrowRight = Icon.withComponent(ArrowRightIcon);
+export const ArrowUp = Icon.withComponent(ArrowUpIcon);
+export const ArrowDown = Icon.withComponent(ArrowDownIcon);
+export const Cancel = Icon.withComponent(CancelIcon);
 export const Clock = Icon.withComponent(ClockIcon);
 export const Download = Icon.withComponent(DownloadIcon);
-export const ArrowLeft = Icon.withComponent(ArrowLeftIcon);
 export const Bolt = Icon.withComponent(BoltIcon);
 export const Bitcoin = Icon.withComponent(BitcoinIcon);
 export const Check = Icon.withComponent(CheckIcon);

app/src/components/common/SortableHeader.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback } from 'react';
+import { SortParams } from 'types/state';
+import { ArrowDown, ArrowUp, HeaderFour } from 'components/base';
+import { styled } from 'components/theme';
+
+const Styled = {
+  HeaderFour: styled(HeaderFour)<{ selected: boolean }>`
+    ${props =>
+      props.selected &&
+      `
+      color: ${props.theme.colors.white};
+    `}
+
+    &:hover {
+      cursor: pointer;
+      color: ${props => props.theme.colors.white};
+    }
+  `,
+  Icon: styled.span`
+    display: inline-block;
+    margin-left: 6px;
+
+    svg {
+      padding: 0;
+    }
+  `,
+};
+
+interface Props<T> {
+  field: keyof T;
+  sort: SortParams<T>;
+  onSort: (field: SortParams<T>['field'], descending: boolean) => void;
+}
+
+const SortableHeader = <T,>({
+  field,
+  sort,
+  onSort,
+  children,
+}: React.PropsWithChildren<Props<T>>) => {
+  const selected = field === sort.field;
+  const SortIcon = sort.descending ? ArrowDown : ArrowUp;
+
+  const handleSortClick = useCallback(() => {
+    const descending = selected ? !sort.descending : false;
+    onSort(field, descending);
+  }, [selected, sort.descending, field, onSort]);
+
+  const { HeaderFour, Icon } = Styled;
+  return (
+    <HeaderFour selected={selected} onClick={handleSortClick}>
+      {children}
+      {selected && (
+        <Icon>
+          <SortIcon size="x-small" />
+        </Icon>
+      )}
+    </HeaderFour>
+  );
+};
+
+export default SortableHeader;

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;