From afbd2b8238bc1ea36df49fd00d8d4b485188604d Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Thu, 23 Sep 2021 22:01:29 -0700
Subject: [PATCH] Show status of saved peers (#1399)

* Show connection status of saved peers with icon

* Make frontend lint

* Make frontend lint
---
 .../components/PeerListItem/PeerListItem.js   |  2 +-
 .../SavedPeerListItem/SavedPeerListItem.js    | 15 ++++++-
 .../ShowExternalAddressDialog.js              |  9 ++--
 frontend/src/pages/peer/Peer.js               | 35 ++++++++++++---
 frontend/src/pages/peeraddress/PeerAddress.js | 43 ++++++++++---------
 frontend/src/pages/peers/Peers.js             |  9 ++++
 6 files changed, 80 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/PeerListItem/PeerListItem.js b/frontend/src/components/PeerListItem/PeerListItem.js
index dccc94c8..f16ed3cb 100644
--- a/frontend/src/components/PeerListItem/PeerListItem.js
+++ b/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()}`}
       />
diff --git a/frontend/src/components/SavedPeerListItem/SavedPeerListItem.js b/frontend/src/components/SavedPeerListItem/SavedPeerListItem.js
index f7bb0be0..4a98e4cc 100644
--- a/frontend/src/components/SavedPeerListItem/SavedPeerListItem.js
+++ b/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()}`}
       />
diff --git a/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js b/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
index a04da73a..3d600ed1 100644
--- a/frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
+++ b/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>
diff --git a/frontend/src/pages/peer/Peer.js b/frontend/src/pages/peer/Peer.js
index aa802f3f..c8bb2be9 100644
--- a/frontend/src/pages/peer/Peer.js
+++ b/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}`} />
diff --git a/frontend/src/pages/peeraddress/PeerAddress.js b/frontend/src/pages/peeraddress/PeerAddress.js
index 21c7aeb2..c1aa964a 100644
--- a/frontend/src/pages/peeraddress/PeerAddress.js
+++ b/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()}
       </>
     );
   }
diff --git a/frontend/src/pages/peers/Peers.js b/frontend/src/pages/peers/Peers.js
index 2e4e2739..e14bc524 100644
--- a/frontend/src/pages/peers/Peers.js
+++ b/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}
             />