From 147456190b430e165bb794287aa7424faaa40f83 Mon Sep 17 00:00:00 2001
From: Jonathan Zernik <yzernik@gmail.com>
Date: Tue, 24 May 2022 17:18:51 -0700
Subject: [PATCH] Show external address in peers page as host:port string

---
 frontend/src/components/Peers/index.js | 30 +++++++++-----------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/frontend/src/components/Peers/index.js b/frontend/src/components/Peers/index.js
index 8cae2c95..d8dae7bc 100644
--- a/frontend/src/components/Peers/index.js
+++ b/frontend/src/components/Peers/index.js
@@ -61,6 +61,14 @@ const Peers = (props) => {
     return 'IPV4';
   };
 
+  const getExternalAddressStr = () => {
+    if (externalAddress) {
+      return `${externalAddress.getHost()}:${externalAddress.getPort()}`;
+    } else {
+      return '';
+    }
+  };
+
   function removeHttp(url) {
     return url.replace(/^https?:\/\//, '');
   }
@@ -119,12 +127,12 @@ const Peers = (props) => {
       <div class="float-container">
         <div class="float-child">
           <div className="edit-input-wrap">
-            <Input class="informed-input" name="host" label="Host" initialValue={externalAddress && externalAddress.getHost()} readOnly />
+            <Input class="informed-input" name="external-address" label="External Address" initialValue={externalAddress && `${getExternalAddressStr()}`} readOnly />
           </div>
         </div>
         <div class="float-child">
           <CopyToClipboard
-            text={externalAddress && externalAddress.getHost()}
+            text={externalAddress && `${getExternalAddressStr()}`}
             >
             <a data-tip="Copy host">
               <button fullWidth={false}>
@@ -134,24 +142,6 @@ const Peers = (props) => {
           </CopyToClipboard>
         </div>
       </div>
-      <div class="float-container">
-        <div class="float-child">
-          <div className="edit-input-wrap">
-            <Input class="informed-input" name="port" label="Port" initialValue={externalAddress && externalAddress.getPort()} readOnly/>
-          </div>
-        </div>
-        <div class="float-child">
-          <CopyToClipboard
-            text={externalAddress && externalAddress.getPort()}
-            >
-            <a data-tip="Copy port">
-              <button fullWidth={false}>
-                <ICON_CLIPBOARD />
-              </button>
-            </a>
-          </CopyToClipboard>
-        </div>
-      </div>
       <ReactTooltip effect="solid" />
     </Form>
   );