chore: add sorting to peers table

src/bundles/peer-locations.js

@@ -157,7 +157,8 @@ export default function (opts) {
           locationObj.latitude
         ]
         const connection = parseConnection(peer.addr)
-        const latency = parseLatency(peer.latency)
+        const rawLatency = parseLatency(peer.latency)
+        const latency = rawLatency ? `${rawLatency}ms` : null
         const notes = parseNotes(peer, bootstrapPeers)
 
         return {
@@ -167,6 +168,7 @@ export default function (opts) {
           coordinates,
           connection,
           latency,
+          rawLatency,
           notes
         }
       })
@@ -296,7 +298,7 @@ const parseLatency = (latency) => {
 
   value = unit === 's' ? value * 1000 : value
 
-  return `${value}ms`
+  return value
 }
 
 const parseNotes = (peer, bootstrapPeers) => {

src/lib/sort.js

@@ -16,3 +16,13 @@ export function sortByName (dir = 1, opts = { numeric: true, sensitivity: 'base'
 export function sortBySize (dir = 1) {
   return (a, b) => (a - b) * dir
 }
+
+/**
+ * Object sorting by property
+ *
+ * @param {*} property - object property to sort by
+ * @param {*} dir - sorting direction, 1 for ascending or -1 for descending
+ */
+export function sortByProperty (property, dir = 1) {
+  return ({ [property]: a }, { [property]: b }) => (a == null) - (b == null) || dir * +(a > b) || dir * -(a < b)
+}

src/peers/PeersTable/PeersTable.js

@@ -2,16 +2,28 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'redux-bundler-react'
 import { translate, Trans } from 'react-i18next'
-import { Table, Column, AutoSizer } from 'react-virtualized'
+import { Table, Column, AutoSizer, SortDirection } from 'react-virtualized'
 import CountryFlag from 'react-country-flag'
 import Cid from '../../components/cid/Cid'
+import { sortByProperty } from '../../lib/sort'
 
 export class PeersTable extends React.Component {
   static propTypes = {
     peerLocationsForSwarm: PropTypes.array,
     t: PropTypes.func.isRequired
   }
 
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      sortBy: 'latency',
+      sortDirection: SortDirection.ASC
+    }
+
+    this.sort = this.sort.bind(this)
+  }
+
   flagRenderer = (flagCode) => {
     // Check if the OS is Windows to render the flags as SVGs
     // Windows doesn't render the flags as emojis  ¯\_(ツ)_/¯
@@ -62,8 +74,15 @@ export class PeersTable extends React.Component {
     return index === -1 ? 'bb b--near-white bg-near-white' : 'bb b--near-white'
   }
 
+  sort ({ sortBy, sortDirection }) {
+    this.setState({ sortBy, sortDirection })
+  }
+
   render () {
     const { peerLocationsForSwarm, t } = this.props
+    const { sortBy, sortDirection } = this.state
+
+    const sortedList = (peerLocationsForSwarm || []).sort(sortByProperty(sortBy === 'latency' ? 'rawLatency' : sortBy, sortDirection === SortDirection.ASC ? 1 : -1))
     const tableHeight = 400
 
     return (
@@ -79,7 +98,10 @@ export class PeersTable extends React.Component {
               headerHeight={32}
               rowHeight={36}
               rowCount={peerLocationsForSwarm.length}
-              rowGetter={({ index }) => peerLocationsForSwarm[index]}>
+              rowGetter={({ index }) => sortedList[index]}
+              sort={this.sort}
+              sortBy={sortBy}
+              sortDirection={sortDirection}>
               <Column label={t('location')} cellRenderer={this.locationCellRenderer} dataKey='locationCode' width={450} className='f6 navy-muted truncate pl2' />
               <Column label={t('latency')} cellRenderer={this.latencyCellRenderer} dataKey='latency' width={250} className='f6 navy-muted monospace pl2' />
               <Column label={t('peerId')} cellRenderer={this.peerIdCellRenderer} dataKey='peerId' width={250} className='charcoal monospace truncate f7 pl2' />