From a1218c12237c9f9981f378c3557926feb9b5b7d3 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 ++++++++++++++++++++-------
 1 file changed, 20 insertions(+), 7 deletions(-)

diff --git a/examples/eth-dm/src/App.tsx b/examples/eth-dm/src/App.tsx
index b684bea712..3be1f410a3 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();
 
@@ -148,12 +155,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) {
@@ -177,7 +189,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