From 31b007c3983ce7bc9baa2b19b26ac04099a48be2 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Thu, 12 Aug 2021 15:07:27 +1000
Subject: [PATCH] Refresh peer stats every second

---
 examples/eth-dm/src/App.tsx                   | 27 ++++++++++++++-----
 examples/eth-pm-wallet-encryption/src/App.tsx | 27 ++++++++++++++-----
 2 files changed, 40 insertions(+), 14 deletions(-)

diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx
index db5df849ff..fec061156f 100644
--- a/examples/eth-dm/src/App.tsx
+++ b/examples/eth-dm/src/App.tsx
@@ -76,6 +76,13 @@ function App() {
   );
   const [messages, setMessages] = useState<Message[]>([]);
   const [address, setAddress] = useState<string>();
+  const [peerStats, setPeerStats] = useState<{
+    relayPeers: number;
+    lightPushPeers: number;
+  }>({
+    relayPeers: 0,
+    lightPushPeers: 0,
+  });
 
   const classes = useStyles();
 
@@ -147,12 +154,17 @@ function App() {
     };
   }, [waku, address, EncryptionKeyPair]);
 
-  let relayPeers = 0;
-  let lightPushPeers = 0;
-  if (waku) {
-    relayPeers = waku.relay.getPeers().size;
-    lightPushPeers = waku.lightPush.peers.length;
-  }
+  useEffect(() => {
+    if (!waku) return;
+
+    const interval = setInterval(() => {
+      setPeerStats({
+        relayPeers: waku.relay.getPeers().size,
+        lightPushPeers: waku.lightPush.peers.length,
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [waku]);
 
   let addressDisplay = '';
   if (address) {
@@ -176,7 +188,8 @@ function App() {
               />
             </IconButton>
             <Typography className={classes.peers} aria-label="connected-peers">
-              Peers: {relayPeers} relay, {lightPushPeers} light push
+              Peers: {peerStats.relayPeers} relay, {peerStats.lightPushPeers}{' '}
+              light push
             </Typography>
             <Typography variant="h6" className={classes.title}>
               Ethereum Direct Message
diff --git a/examples/eth-pm-wallet-encryption/src/App.tsx b/examples/eth-pm-wallet-encryption/src/App.tsx
index fc431e4f2d..f78e096a02 100644
--- a/examples/eth-pm-wallet-encryption/src/App.tsx
+++ b/examples/eth-pm-wallet-encryption/src/App.tsx
@@ -75,6 +75,13 @@ function App() {
   );
   const [messages, setMessages] = useState<Message[]>([]);
   const [address, setAddress] = useState<string>();
+  const [peerStats, setPeerStats] = useState<{
+    relayPeers: number;
+    lightPushPeers: number;
+  }>({
+    relayPeers: 0,
+    lightPushPeers: 0,
+  });
 
   const classes = useStyles();
 
@@ -133,12 +140,17 @@ function App() {
     };
   }, [waku, address, provider?.provider?.request]);
 
-  let relayPeers = 0;
-  let lightPushPeers = 0;
-  if (waku) {
-    relayPeers = waku.relay.getPeers().size;
-    lightPushPeers = waku.lightPush.peers.length;
-  }
+  useEffect(() => {
+    if (!waku) return;
+
+    const interval = setInterval(() => {
+      setPeerStats({
+        relayPeers: waku.relay.getPeers().size,
+        lightPushPeers: waku.lightPush.peers.length,
+      });
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [waku]);
 
   let addressDisplay = '';
   if (address) {
@@ -162,7 +174,8 @@ function App() {
               />
             </IconButton>
             <Typography className={classes.peers} aria-label="connected-peers">
-              Peers: {relayPeers} relay, {lightPushPeers} light push
+              Peers: {peerStats.relayPeers} relay, {peerStats.lightPushPeers}{' '}
+              light push
             </Typography>
             <Typography variant="h6" className={classes.title}>
               Ethereum Direct Message