fixed tx history timestamp sorting

react/src/actions/actionCreators.js

@@ -193,7 +193,7 @@ export function triggerToaster(message, title, _type, autoClose = true) {
     message,
     title,
     _type,
-    autoClose
+    autoClose,
   }
 }
 
@@ -201,7 +201,7 @@ export function triggerToaster(message, title, _type, autoClose = true) {
 export function dismissToaster(toastId) {
   return {
     type: REMOVE_TOASTER_MESSAGE,
-    toastId: toastId
+    toastId: toastId,
   }
 }
 
@@ -217,7 +217,7 @@ export function dashboardCoinsState(json) {
   return {
     type: GET_ACTIVE_COINS,
     coins: json,
-    activeCoins: Object.keys(json.native).length || Object.keys(json.basilisk).length || Object.keys(json.full).length ? true : false
+    activeCoins: Object.keys(json.native).length || Object.keys(json.basilisk).length || Object.keys(json.full).length ? true : false,
   }
 }
 
@@ -291,7 +291,13 @@ export function rpcErrorHandler(json, dispatch) {
   if (json &&
       json.error) {
     if (json.error === 'bitcoinrpc needs coin that is active') {
-      dispatch(triggerToaster(translate('API.NO_ACTIVE_COIN'), translate('TOASTR.SERVICE_NOTIFICATION'), 'error'));
+      dispatch(
+        triggerToaster(
+          translate('API.NO_ACTIVE_COIN'),
+          translate('TOASTR.SERVICE_NOTIFICATION'),
+          'error'
+        )
+      );
     }
   }
 }
@@ -302,8 +308,8 @@ export function setBasiliskMainAddress(json, coin, mode) {
 
     for (let i = 0; i < json.result.length; i++) {
       publicAddressArray.push({
-        'address': json.result[i],
-        'amount': 'N/A'
+        address: json.result[i],
+        amount: 'N/A',
       });
     }
 
@@ -320,7 +326,7 @@ export function setBasiliskMainAddress(json, coin, mode) {
 
   return {
     type: ACTIVE_COIN_GET_ADDRESSES,
-    addresses: { 'public': [] },
+    addresses: { public: [] },
   }
 }
 

react/src/components/dashboard/walletsData/walletsData.js

@@ -102,6 +102,31 @@ class WalletsData extends React.Component {
     socket.removeAllListeners('messages');
   }
 
+  // https://react-table.js.org/#/custom-sorting
+  tableSorting(a, b) { // ugly workaround, override default sort
+    if (Date.parse(a)) { // convert date to timestamp
+      a = Date.parse(a);
+    }
+    if (Date.parse(b)) {
+      b = Date.parse(b);
+    }
+    // force null and undefined to the bottom
+    a = (a === null || a === undefined) ? -Infinity : a;
+    b = (b === null || b === undefined) ? -Infinity : b;
+    // force any string values to lowercase
+    a = typeof a === 'string' ? a.toLowerCase() : a;
+    b = typeof b === 'string' ? b.toLowerCase() : b;
+    // Return either 1 or -1 to indicate a sort priority
+    if (a > b) {
+      return 1;
+    }
+    if (a < b) {
+      return -1;
+    }
+    // returning 0 or undefined will use any subsequent column sorting methods or the row index as a tiebreaker
+    return 0;
+  }
+
   generateItemsListColumns() {
     let columns = [];
 
@@ -356,11 +381,9 @@ class WalletsData extends React.Component {
         if (!this.state.itemsList ||
             (this.state.coin && this.state.coin !== this.props.ActiveCoin.coin) ||
             (JSON.stringify(this.props.ActiveCoin.txhistory) !== JSON.stringify(this.state.txhistory))) {
-          const sortedItemsList = this.indexTxHistory(sortByDate(this.props.ActiveCoin.txhistory, this.props.ActiveCoin.mode === 'basilisk' ? 'index' : 'confirmations'));
-
           this.setState(Object.assign({}, this.state, {
-            itemsList: sortedItemsList,
-            filteredItemsList: this.filterTransactions(sortedItemsList, this.state.searchTerm),
+            itemsList: this.props.ActiveCoin.txhistory,
+            filteredItemsList: this.filterTransactions(this.props.ActiveCoin.txhistory, this.state.searchTerm),
             txhistory: this.props.ActiveCoin.txhistory,
             showPagination: this.props.ActiveCoin.txhistory && this.props.ActiveCoin.txhistory.length >= this.state.defaultPageSize
           }));
@@ -428,7 +451,7 @@ class WalletsData extends React.Component {
   onPageSizeChange(pageSize, pageIndex) {
     this.setState(Object.assign({}, this.state, {
       pageSize: pageSize,
-      showPagination: this.state.itemsList && this.state.itemsList.length >= defaultPageSize,
+      showPagination: this.state.itemsList && this.state.itemsList.length >= this.state.defaultPageSize,
     }))
   }
 
@@ -551,13 +574,15 @@ class WalletsData extends React.Component {
   }
 
   renderSelectorCurrentLabel() {
-    if (this.state.currentAddress) {
+    const _currentAddress = this.state.currentAddress;
+
+    if (_currentAddress) {
       return (
         <span>
           <i className={ 'icon fa-eye' + (this.state.addressType === 'public' ? '' : '-slash') }></i>&nbsp;&nbsp;
           <span className="text">
             [ { this.renderAddressAmount() } { this.props.ActiveCoin.coin } ]&nbsp;&nbsp;
-            { this.state.currentAddress }
+            { _currentAddress }
           </span>
         </span>
       );

react/src/components/dashboard/walletsData/walletsData.render.js

@@ -177,6 +177,11 @@ export const TxHistoryListRender = function() {
       previousText={ translate('INDEX.PREVIOUS_PAGE') }
       showPaginationBottom={ this.state.showPagination }
       pageSize={ this.pageSize }
+      defaultSortMethod={ this.tableSorting }
+      defaultSorted={[{ // default sort
+        id: 'timestamp',
+        desc: true,
+      }]}
       onPageSizeChange={ (pageSize, pageIndex) => this.onPageSizeChange(pageSize, pageIndex) } />
   );
 };