}
+ avatar={}
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 (
-
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 (
@@ -73,11 +79,7 @@ export default function PeerPage() {
{peer.getPeerName()}
- Address:
- {' '}
- {peer.getPeerAddress().getHost()}
- :
- {peer.getPeerAddress().getPort()}
+ {PeerAddressContent()}
{PeerSettingsForm()}
{DeletePeerButton()}
@@ -130,6 +132,27 @@ export default function PeerPage() {
);
}
+ function PeerAddressContent() {
+ const peerAddressStr = peerAddressToStr(peer.getPeerAddress());
+ return (
+
+ Peer Address:
+
+
+ );
+ }
+
return (
<>
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 (
- <>
-
- Status:
- {' '}
- {(connectedPeer)
- ? 'Connected'
- : 'Disconnected'}
-
-
- );
- }
-
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 (
}
+ avatar={}
title={`Peer Address: ${`${host}:${port}`}`}
- subheader={PeerConnectionDetails()}
+ subheader={ConnectedPeerDetails()}
+ />
+
+ );
+ }
+
+ function DisconnectedPeerContent() {
+ console.log(connectedPeer);
+ return (
+
+ }
+ title={`Peer Address: ${`${host}:${port}`}`}
+ subheader="Disconnected"
/>
);
@@ -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() {
>
console.log('clicked peer')}
peer={peer}
/>