sort peers subpage

hoprnet · Dec 2, 2024 · 7fe7f2a · 7fe7f2a
1 parent aa6036e
commit 7fe7f2a
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 18 deletions.
diff --git a/src/future-hopr-lib-components/PeerInfo/index.tsx b/src/future-hopr-lib-components/PeerInfo/index.tsx
@@ -11,9 +11,11 @@ import { generateBase64Jazz } from '../../utils/functions';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import LaunchIcon from '@mui/icons-material/Launch';
 
+
 interface Props {
   peerId?: string;
   nodeAddress?: string;
+  shortenPeerId?: boolean;
 }
 
 const Container = styled.div`
@@ -32,8 +34,9 @@ const PeersInfo: React.FC<Props> = (props) => {
 
   const getAliasByPeerId = (peerId: string): string => {
     const shortPeerId = peerId && `${peerId.substring(0, 6)}...${peerId.substring(peerId.length - 8, peerId.length)}`;
-    if (aliases && peerId && peerIdToAliasLink[peerId]) return `${peerIdToAliasLink[peerId]} (${shortPeerId})`;
-    return shortPeerId;
+    const displayPeerId = props.shortenPeerId ? shortPeerId : peerId;
+    if (aliases && peerId && peerIdToAliasLink[peerId]) return `${peerIdToAliasLink[peerId]} (${displayPeerId})`;
+    return displayPeerId;
   };
 
   const noCopyPaste = !(

diff --git a/src/future-hopr-lib-components/Table/table-pro.tsx b/src/future-hopr-lib-components/Table/table-pro.tsx
@@ -129,7 +129,7 @@ const STextField = styled(TextField)`
 interface Props {
   data: {
     [key: string]: string | number | JSX.Element;
-    id: string;
+    id: string | number;
     actions: JSX.Element;
   }[];
   id?: string;
@@ -325,7 +325,8 @@ export default function CustomPaginationActionsTable(props: Props) {
             <CustomTableRow
               row={row}
               header={props.header}
-              key={row.id}
+              id={`${props.id}_row_${row.id}`}
+              key={`${props.id}_row_${row.id}`}
               onRowClick={props.onRowClick}
             />
           ))}
@@ -352,10 +353,12 @@ export default function CustomPaginationActionsTable(props: Props) {
 }
 
 const CustomTableRow = ({
+  id,
   row,
   header,
   onRowClick,
 }: {
+  id: string;
   row: Props['data'][0];
   header: Props['header'];
   onRowClick?: Function;
@@ -376,6 +379,7 @@ const CustomTableRow = ({
   return (
     <TableRow
       key={row.id}
+      id={id}
       onClick={() => {
         onRowClick && onRowClick(row);
       }}

diff --git a/src/pages/node/channelsIncoming.tsx b/src/pages/node/channelsIncoming.tsx
@@ -219,12 +219,12 @@ function ChannelsPage() {
 
       return {
         id: (index + 1).toString(),
-        number: parseInt(id),
         key: id,
         node: (
           <PeersInfo
             peerId={peerId}
             nodeAddress={peerAddress}
+            shortenPeerId
           />
         ),
         peerAddress: getAliasByPeerAddress(peerAddress as string),

diff --git a/src/pages/node/channelsOutgoing.tsx b/src/pages/node/channelsOutgoing.tsx
@@ -201,13 +201,13 @@ function ChannelsPage() {
       const peerId = getPeerIdFromPeerAddress(peerAddress as string);
 
       return {
-        id: index.toString(),
+        id: (index+1).toString(),
         key: id,
-        number: parseInt(id),
         node: (
           <PeersInfo
             peerId={peerId}
             nodeAddress={peerAddress}
+            shortenPeerId
           />
         ),
         peerAddress: getAliasByPeerAddress(peerAddress as string),

diff --git a/src/pages/node/peers.tsx b/src/pages/node/peers.tsx
@@ -77,7 +77,7 @@ function PeersPage() {
 
   const header = [
     {
-      key: 'number',
+      key: 'id',
       name: '#',
     },
     {
@@ -117,20 +117,37 @@ function PeersPage() {
     },
   ];
 
-  const noCopyPaste = !(
-    window.location.protocol === 'https:' ||
-    window.location.hostname === 'localhost' ||
-    window.location.hostname === '127.0.0.1'
-  );
+  const peersWithAliases = (peers?.connected || []).filter(peer => aliases && peer.peerId && peerIdToAliasLink[peer.peerId]) ;
+  const peersWithAliasesSorted = peersWithAliases.sort((a, b) => {
+    if (getAliasByPeerId(b.peerId).toLowerCase() > getAliasByPeerId(a.peerId).toLowerCase()) {
+      return -1;
+    }
+    if (getAliasByPeerId(b.peerId).toLowerCase() < getAliasByPeerId(a.peerId).toLowerCase()) {
+      return 1;
+    }
+    return 0
+  });
+  const peersWithoutAliases = (peers?.connected || []).filter(peer => aliases && peer.peerId && !peerIdToAliasLink[peer.peerId]) ;
+  const peersWithoutAliasesSorted = peersWithoutAliases.sort((a, b) => {
+    if (b.peerId > a.peerId) {
+      return -1;
+    }
+    if (b.peerId < a.peerId) {
+      return 1;
+    }
+    return 0
+  });
+
+  const peersSorted = [...peersWithAliasesSorted, ...peersWithoutAliasesSorted]
 
-  const parsedTableData = Object.entries(peers?.connected ?? {}).map(([id, peer]) => {
+  const parsedTableData = peersSorted.map((peer, index)=>{
     return {
-      id: id,
-      number: parseInt(id),
+      id: index+1,
       node: (
         <PeersInfo
           peerId={peer.peerId}
           nodeAddress={peer.peerAddress}
+          shortenPeerId
         />
       ),
       peerId: getAliasByPeerId(peer.peerId),
@@ -163,8 +180,8 @@ function PeersPage() {
           <SendMessageModal peerId={peer.peerId} />
         </>
       ),
-    };
-  });
+    }
+  })
 
   return (
     <Section