Show status of saved peers (#1399)

* Show connection status of saved peers with icon

* Make frontend lint

* Make frontend lint

frontend/src/components/PeerListItem/PeerListItem.js

@@ -65,7 +65,7 @@ export default function PeerListItem({
       onClick={onPeerClick}
     >
       <CardHeader
-        avatar={<ComputerIcon />}
+        avatar={<ComputerIcon fontSize="large" style={{ fill: 'green' }} />}
         title={getConnectedPeerDisplayName(peer)}
         subheader={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
       />

frontend/src/components/SavedPeerListItem/SavedPeerListItem.js

@@ -6,6 +6,7 @@ import CardHeader from '@material-ui/core/CardHeader';
 
 // icons
 import ComputerIcon from '@material-ui/icons/Computer';
+import CloudOff from '@material-ui/icons/CloudOff';
 
 import useStyles from '../../pages/wallet/styles';
 
@@ -15,6 +16,7 @@ import {
 
 export default function SavedPeerListItem({
   peer,
+  isConnected,
   ...props
 }) {
   const classes = useStyles({
@@ -53,13 +55,24 @@ export default function SavedPeerListItem({
   //   return pieces[1];
   // }
 
+  function SavedPeerIcon() {
+    if (isConnected) {
+      return (
+        <ComputerIcon fontSize="large" style={{ fill: 'green' }} />
+      );
+    }
+    return (
+      <CloudOff fontSize="large" style={{ fill: 'red' }} />
+    );
+  }
+
   return (
     <Card
       className={classes.root}
       onClick={onPeerClick}
     >
       <CardHeader
-        avatar={<ComputerIcon />}
+        avatar={<SavedPeerIcon />}
         title={`Name: ${peer.getPeerName()}`}
         subheader={`Address: ${peer.getPeerAddress().getHost()}:${peer.getPeerAddress().getPort()}`}
       />

frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js

@@ -7,7 +7,7 @@ import {
   Tooltip,
 } from '@material-ui/core';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import {CopyToClipboard} from 'react-copy-to-clipboard';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import {
   getExternalAddressRequest,
@@ -18,7 +18,6 @@ export default function ShowExternalAddressDialog({
   handleClose,
   ...props
 }) {
-
   const [externalAddress, setExternalAddress] = useState(null);
 
   const getExternalAddress = () => {
@@ -43,9 +42,9 @@ export default function ShowExternalAddressDialog({
     return (
       <CopyToClipboard text={address}>
         <Tooltip title="Copy" placement="right">
-          <Button variant="outlined" style={{width: "100%"}}>
-            <div style={{float: "left"}}>{address}</div>
-            <ContentCopyIcon/>
+          <Button variant="outlined" style={{ width: '100%' }}>
+            <div style={{ float: 'left' }}>{address}</div>
+            <ContentCopyIcon />
           </Button>
         </Tooltip>
       </CopyToClipboard>

frontend/src/pages/peer/Peer.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import {
   Grid,
   FormLabel,
@@ -21,9 +21,13 @@ import {
   getPeerRequest,
   setPeerAutoconnectRequest,
 } from '../../squeakclient/requests';
+import {
+  goToPeerAddressPage,
+} from '../../navigation/navigation';
 
 export default function PeerPage() {
   const classes = useStyles();
+  const history = useHistory();
   const { id } = useParams();
   const [peer, setPeer] = useState(null);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -56,6 +60,8 @@ export default function PeerPage() {
     setAutoconnect(id, event.target.checked);
   };
 
+  const peerAddressToStr = (peerAddress) => `${peerAddress.getHost()}:${peerAddress.getPort()}`;
+
   function NoPeerContent() {
     return (
       <p>
@@ -73,11 +79,7 @@ export default function PeerPage() {
           {peer.getPeerName()}
         </p>
         <p>
-          Address:
-          {' '}
-          {peer.getPeerAddress().getHost()}
-          :
-          {peer.getPeerAddress().getPort()}
+          {PeerAddressContent()}
         </p>
         {PeerSettingsForm()}
         {DeletePeerButton()}
@@ -130,6 +132,27 @@ export default function PeerPage() {
     );
   }
 
+  function PeerAddressContent() {
+    const peerAddressStr = peerAddressToStr(peer.getPeerAddress());
+    return (
+      <div className={classes.root}>
+        Peer Address:
+        <Button
+          variant="contained"
+          onClick={() => {
+            goToPeerAddressPage(
+              history,
+              peer.getPeerAddress().getHost(),
+              peer.getPeerAddress().getPort(),
+            );
+          }}
+        >
+          {peerAddressStr}
+        </Button>
+      </div>
+    );
+  }
+
   return (
     <>
       <PageTitle title={`Peer: ${peer ? peer.getPeerName() : null}`} />

frontend/src/pages/peeraddress/PeerAddress.js

@@ -15,6 +15,7 @@ import CardHeader from '@material-ui/core/CardHeader';
 
 import Typography from '@material-ui/core/Typography';
 import ComputerIcon from '@material-ui/icons/Computer';
+import CloudOff from '@material-ui/icons/CloudOff';
 
 import moment from 'moment';
 import CreatePeerDialog from '../../components/CreatePeerDialog';
@@ -140,20 +141,6 @@ export default function PeerAddressPage() {
     );
   }
 
-  function ConnectionStatusContent() {
-    return (
-      <>
-        <Grid item xs={12}>
-          Status:
-          {' '}
-          {(connectedPeer)
-            ? 'Connected'
-            : 'Disconnected'}
-        </Grid>
-      </>
-    );
-  }
-
   function ConnectionActionContent() {
     return (
       <>
@@ -176,7 +163,7 @@ export default function PeerAddressPage() {
     );
   }
 
-  function PeerConnectionDetails() {
+  function ConnectedPeerDetails() {
     const connectTimeS = connectedPeer.getConnectTimeS();
     const momentTimeString = moment(connectTimeS * 1000).fromNow();
     const lastMsgReceivedTimeS = connectedPeer.getLastMessageReceivedTimeS();
@@ -209,16 +196,31 @@ export default function PeerAddressPage() {
     );
   }
 
-  function PeerConnectionInfoContent() {
+  function ConnectedPeerContent() {
     console.log(connectedPeer);
     return (
       <Card
         className={classes.root}
       >
         <CardHeader
-          avatar={<ComputerIcon />}
+          avatar={<ComputerIcon fontSize="large" style={{ fill: 'green' }} />}
           title={`Peer Address: ${`${host}:${port}`}`}
-          subheader={PeerConnectionDetails()}
+          subheader={ConnectedPeerDetails()}
+        />
+      </Card>
+    );
+  }
+
+  function DisconnectedPeerContent() {
+    console.log(connectedPeer);
+    return (
+      <Card
+        className={classes.root}
+      >
+        <CardHeader
+          avatar={<CloudOff fontSize="large" style={{ fill: 'red' }} />}
+          title={`Peer Address: ${`${host}:${port}`}`}
+          subheader="Disconnected"
         />
       </Card>
     );
@@ -227,9 +229,10 @@ export default function PeerAddressPage() {
   function ConnectionContent() {
     return (
       <>
-        {ConnectionStatusContent()}
         {ConnectionActionContent()}
-        {(connectedPeer) && PeerConnectionInfoContent()}
+        {(connectedPeer)
+          ? ConnectedPeerContent()
+          : DisconnectedPeerContent()}
       </>
     );
   }

frontend/src/pages/peers/Peers.js

@@ -100,6 +100,14 @@ export default function Peers() {
     setShowExternalAddressDialogOpen(false);
   };
 
+  const isPeerConnected = (peerAddress) => {
+    const peerAddressStr = peerAddressToStr(peerAddress);
+    const connectedPeerAddresses = connectedPeers.map((p) => peerAddressToStr(p.getPeerAddress()));
+    return connectedPeerAddresses.includes(peerAddressStr);
+  };
+
+  const peerAddressToStr = (peerAddress) => `${peerAddress.getHost()}:${peerAddress.getPort()}`;
+
   useEffect(() => {
     getConnectedPeers();
   }, []);
@@ -230,6 +238,7 @@ export default function Peers() {
           >
             <SavedPeerListItem
               key={peer.getPeerName()}
+              isConnected={isPeerConnected(peer.getPeerAddress())}
               handlePeerClick={() => console.log('clicked peer')}
               peer={peer}
             />