Added a way to sort torrent peers columns

client/src/javascript/components/modals/torrent-details-modal/TorrentPeers.tsx

@@ -6,28 +6,62 @@ import {CheckmarkThick, CountryFlag, Lock, Spinner} from '@client/ui/icons';
 import ConfigStore from '@client/stores/ConfigStore';
 import TorrentActions from '@client/actions/TorrentActions';
 import UIStore from '@client/stores/UIStore';
+import SettingStore from "@client/stores/SettingStore";
+import SettingActions from "@client/actions/SettingActions";
 
 import type {TorrentPeer} from '@shared/types/TorrentPeer';
+import type {TorrentPeerListColumn} from "@shared/types/TorrentPeer";
 
 import Badge from '../../general/Badge';
 import Size from '../../general/Size';
+import sortPeers from "@client/util/sortPeers";
 
 const TorrentPeers: FC = () => {
   const [peers, setPeers] = useState<Array<TorrentPeer>>([]);
   const [pollingDelay, setPollingDelay] = useState<number | null>(null);
 
   const fetchPeers = () => {
+
+    const {sortPeers: sortBy} = SettingStore.floodSettings;
+
     setPollingDelay(null);
     if (UIStore.activeModal?.id === 'torrent-details') {
       TorrentActions.fetchTorrentPeers(UIStore.activeModal?.hash).then((data) => {
         if (data != null) {
-          setPeers(data);
+          const sortedData = sortPeers(data, sortBy);
+          setPeers(sortedData);
         }
       });
     }
     setPollingDelay(ConfigStore.pollInterval);
   };
 
+  const sortPeerByProperty = (event, property: TorrentPeerListColumn) => {
+
+    // don't do sorting when clicking on children elements
+    if (event.target !== event.currentTarget) return;
+
+    const {sortPeers: sortBy} = SettingStore.floodSettings;
+    const nextDirection: 'desc' | 'asc' = sortBy.direction === 'asc' ? 'desc': 'asc';
+    const newSortBy = {
+      direction: nextDirection,
+      property
+    };
+    SettingActions.saveSetting('sortPeers', newSortBy);
+
+    const clickedColumn = event.target
+
+    // clean classes linked to the sorting on every 'th'
+    clickedColumn.parentElement.querySelectorAll('th').forEach(th => {
+        th.classList.remove('table__heading', 'table__heading--is-sorted', 'table__heading--direction--asc', 'table__heading--direction--desc');
+    });
+
+    // then show the sorting arrow on the selected column
+    clickedColumn.classList.add('table__heading', 'table__heading--is-sorted', `table__heading--direction--${nextDirection}`);
+
+    fetchPeers();
+  }
+
   useEffect(() => fetchPeers(), []);
   useInterval(() => fetchPeers(), pollingDelay);
 
@@ -44,18 +78,35 @@ const TorrentPeers: FC = () => {
           },
         }}
       >
-        <thead className="torrent-details__table__heading">
-          <tr>
-            <th className="torrent-details__table__heading--primary">
+        <thead className="table__row torrent-details__table__heading">
+          <tr css={{
+              cursor: 'pointer',
+          }}
+          >
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'address')}
+            >
               <Trans id="torrents.details.peers" />
               <Badge>{peers.length}</Badge>
             </th>
-            <th className="torrent-details__table__heading--secondary">DL</th>
-            <th className="torrent-details__table__heading--secondary">UL</th>
-            <th className="torrent-details__table__heading--secondary">%</th>
-            <th className="torrent-details__table__heading--secondary">Client</th>
-            <th className="torrent-details__table__heading--secondary">Enc</th>
-            <th className="torrent-details__table__heading--secondary">In</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'downloadRate')}
+            >DL</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'uploadRate')}
+            >UL</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'completedPercent')}
+            >%</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'clientVersion')}
+            >Client</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'isEncrypted')}
+            >Enc</th>
+            <th className="torrent-details__table__heading--primary table__heading--no-border"
+                onClick={(event) => sortPeerByProperty(event, 'isIncoming')}
+            >In</th>
           </tr>
         </thead>
         <tbody>

client/src/javascript/util/sortPeers.ts

@@ -0,0 +1,58 @@
+import {sort} from 'fast-sort';
+
+import type {FloodSettings} from '@shared/types/FloodSettings';
+import type {TorrentPeer} from '@shared/types/TorrentPeer';
+
+type SortRule = {
+    [direction in FloodSettings['sortPeers']['direction']]:
+    | keyof TorrentPeer
+    | ((p: TorrentPeer) => unknown);
+};
+
+function sortPeers(
+    peers: TorrentPeer[],
+    sortBy: Readonly<FloodSettings['sortPeers']>,
+): TorrentPeer[] {
+    const {property} = sortBy;
+    const sortRules: Array<SortRule> = [];
+
+    switch (property) {
+
+        // we sort numerically for IPv4 and alphabetically for IPv6 using the first IP block
+        case 'address':
+
+            // prepare arrays
+            const ipv4 = peers.filter((value) => value.address.includes('.'));
+            const ipv6 = peers.filter((value) => value.address.includes(':'));
+
+            // sort v4
+            const sortedIpv4 = ipv4.sort((p1: TorrentPeer, p2: TorrentPeer) => {
+                return p1.address.split('.')[0] - p2.address.split('.')[0];
+            })
+
+            // sort v6
+            const sortedIpv6 = ipv6.sort((p1: TorrentPeer, p2: TorrentPeer) => {
+                return (p1.address.split(':')[0] < p2.address.split(':')[0]) ? -1 : 1;
+            })
+
+            // then return sorted data
+            const sortedData = sortedIpv4.concat(sortedIpv6);
+            return sortBy.direction === 'asc' ? sortedData : sortedData.reverse();
+
+        // we sort clients as case-insensitive
+        case 'clientVersion':
+            sortRules.push({
+                [sortBy.direction]: (p: TorrentPeer) => p.clientVersion.toLowerCase(),
+            } as SortRule);
+            break;
+
+        // default alphabetically
+        default:
+            sortRules.push({[sortBy.direction]: property} as SortRule);
+            break;
+    }
+
+    return sort(peers).by(sortRules);
+}
+
+export default sortPeers;

client/src/sass/components/_table.scss

@@ -31,7 +31,7 @@ $table--heading--resize--indicator--width: 1px;
     transition: color 0.15s;
     touch-action: none;
 
-    &:last-child {
+    &:last-child, &--no-border {
       border-right: none;
     }
 

shared/constants/defaultFloodSettings.ts

@@ -6,6 +6,10 @@ const defaultFloodSettings: Readonly<FloodSettings> = {
     direction: 'desc',
     property: 'dateAdded',
   },
+  sortPeers: {
+    direction: 'asc',
+    property: 'address',
+  },
   torrentListColumns: [
     {id: 'name', visible: true},
     {id: 'percentComplete', visible: true},

shared/types/FloodSettings.ts

@@ -1,13 +1,18 @@
 import type {Language} from '../../client/src/javascript/constants/Languages';
 import type {TorrentContextMenuAction} from '../../client/src/javascript/constants/TorrentContextMenuActions';
 import type {TorrentListColumn} from '../../client/src/javascript/constants/TorrentListColumns';
+import type {TorrentPeerListColumn} from "@shared/types/TorrentPeer";
 
 export interface FloodSettings {
   language: Language;
   sortTorrents: {
     direction: 'desc' | 'asc';
     property: TorrentListColumn;
   };
+  sortPeers: {
+    direction: 'desc' | 'asc';
+    property: TorrentPeerListColumn;
+  };
   torrentListColumns: Array<{
     id: TorrentListColumn;
     visible: boolean;

shared/types/TorrentPeer.ts

@@ -8,3 +8,4 @@ export interface TorrentPeer {
   isEncrypted: boolean;
   isIncoming: boolean;
 }
+export type TorrentPeerListColumn = keyof TorrentPeer;