From 1f4eb88e57b5a10d5116ee8e85606c6141290e5a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Jadach?= <michal.jadach@hoprnet.org>
Date: Mon, 2 Dec 2024 14:57:38 +0100
Subject: [PATCH] sort channels subpages

---
 src/pages/node/channelsIncoming.tsx | 28 ++++++++++++++++++++++++++--
 src/pages/node/channelsOutgoing.tsx | 28 ++++++++++++++++++++++++++--
 2 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/pages/node/channelsIncoming.tsx b/src/pages/node/channelsIncoming.tsx
index 09edaa7f..766bb6cf 100644
--- a/src/pages/node/channelsIncoming.tsx
+++ b/src/pages/node/channelsIncoming.tsx
@@ -32,6 +32,7 @@ import { truncateEthereumAddress } from '../../utils/blockchain';
 function ChannelsPage() {
   const dispatch = useAppDispatch();
   const channels = useAppSelector((store) => store.node.channels.data);
+  const channelsIncoming = useAppSelector((store) => store.node.channels.data?.incoming);
   const channelsIncomingObject = useAppSelector((store) => store.node.channels.parsed.incoming);
   const channelsFetching = useAppSelector((store) => store.node.channels.isFetching);
   const aliases = useAppSelector((store) => store.node.aliases.data);
@@ -195,8 +196,31 @@ function ChannelsPage() {
       });
   };
 
-  const parsedTableData = Object.keys(channelsIncomingObject)
-    .map((id, index) => {
+  const peersWithAliases = (channelsIncoming || []).filter(peer => aliases && peer.peerAddress && getAliasByPeerAddress(peer.peerAddress) !== peer.peerAddress) ;
+  const peersWithAliasesSorted = peersWithAliases.sort((a, b) => {
+    if (getAliasByPeerAddress(b.peerAddress).toLowerCase() > getAliasByPeerAddress(a.peerAddress).toLowerCase()) {
+      return -1;
+    }
+    if (getAliasByPeerAddress(b.peerAddress).toLowerCase() < getAliasByPeerAddress(a.peerAddress).toLowerCase()) {
+      return 1;
+    }
+    return 0
+  });
+  const peersWithoutAliases = (channelsIncoming || []).filter(peer => aliases && peer.peerAddress && getAliasByPeerAddress(peer.peerAddress) === peer.peerAddress) ;
+  const peersWithoutAliasesSorted = peersWithoutAliases.sort((a, b) => {
+    if (b.peerAddress > a.peerAddress) {
+      return -1;
+    }
+    if (b.peerAddress < a.peerAddress) {
+      return 1;
+    }
+    return 0
+  });
+
+  const peersSorted = [...peersWithAliasesSorted, ...peersWithoutAliasesSorted]
+
+  const parsedTableData = peersSorted.map((channel, index) => {
+      const id = channel.id;
       if (
         !channelsIncomingObject[id].peerAddress ||
         !channelsIncomingObject[id].balance ||
diff --git a/src/pages/node/channelsOutgoing.tsx b/src/pages/node/channelsOutgoing.tsx
index b5f99960..e34dd163 100644
--- a/src/pages/node/channelsOutgoing.tsx
+++ b/src/pages/node/channelsOutgoing.tsx
@@ -33,6 +33,7 @@ function ChannelsPage() {
   const dispatch = useAppDispatch();
   const channels = useAppSelector((store) => store.node.channels.data);
   const channelsOutgoingObject = useAppSelector((store) => store.node.channels.parsed.outgoing);
+  const channelsOutgoing = useAppSelector((store) => store.node.channels.data?.outgoing);
   const channelsFetching = useAppSelector((store) => store.node.channels.isFetching);
   const aliases = useAppSelector((store) => store.node.aliases.data);
   const loginData = useAppSelector((store) => store.auth.loginData);
@@ -188,8 +189,31 @@ function ChannelsPage() {
     },
   ];
 
-  const parsedTableData = Object.keys(channelsOutgoingObject)
-    .map((id, index) => {
+  const peersWithAliases = (channelsOutgoing || []).filter(peer => aliases && peer.peerAddress && getAliasByPeerAddress(peer.peerAddress) !== peer.peerAddress) ;
+  const peersWithAliasesSorted = peersWithAliases.sort((a, b) => {
+    if (getAliasByPeerAddress(b.peerAddress).toLowerCase() > getAliasByPeerAddress(a.peerAddress).toLowerCase()) {
+      return -1;
+    }
+    if (getAliasByPeerAddress(b.peerAddress).toLowerCase() < getAliasByPeerAddress(a.peerAddress).toLowerCase()) {
+      return 1;
+    }
+    return 0
+  });
+  const peersWithoutAliases = (channelsOutgoing || []).filter(peer => aliases && peer.peerAddress && getAliasByPeerAddress(peer.peerAddress) === peer.peerAddress) ;
+  const peersWithoutAliasesSorted = peersWithoutAliases.sort((a, b) => {
+    if (b.peerAddress > a.peerAddress) {
+      return -1;
+    }
+    if (b.peerAddress < a.peerAddress) {
+      return 1;
+    }
+    return 0
+  });
+
+  const peersSorted = [...peersWithAliasesSorted, ...peersWithoutAliasesSorted]
+
+  const parsedTableData = peersSorted.map((channel, index) => {
+      const id = channel.id;
       if (
         !channelsOutgoingObject[id].peerAddress ||
         !channelsOutgoingObject[id].balance ||