diff --git a/src/bundles/peer-locations.js b/src/bundles/peer-locations.js
index 030c3432c..c7bc48ad7 100644
--- a/src/bundles/peer-locations.js
+++ b/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) => {
diff --git a/src/lib/sort.js b/src/lib/sort.js
index 5c1f185c6..0098e3fe4 100644
--- a/src/lib/sort.js
+++ b/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)
+}
diff --git a/src/peers/PeersTable/PeersTable.js b/src/peers/PeersTable/PeersTable.js
index 8c749d6ea..1a37dd5c7 100644
--- a/src/peers/PeersTable/PeersTable.js
+++ b/src/peers/PeersTable/PeersTable.js
@@ -2,9 +2,10 @@ 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 = {
@@ -12,6 +13,17 @@ export class PeersTable extends React.Component {
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}>