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}>