From ab067629352c3717077cf14529d1e8a7b0ff59a2 Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Tue, 28 Feb 2023 00:26:54 +0100
Subject: [PATCH] imrpve rendering a bit

---
 examples/web-chat/src/Room.tsx | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index fcb4602..d661fa2 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -41,21 +41,21 @@ export default function Room(props: Props) {
     }
   };
 
+  const lightPushPeersLength = orZero(lightPushPeers?.length);
+  const filterPeersLength = orZero(filterPeers?.length);
+  const storePeersLength = orZero(storePeers?.length);
+
+  const peersMessage = `Peers: ${lightPushPeersLength} light push, ${filterPeersLength} filter, ${storePeersLength} store.`;
+  const bootstrapPeersMessage = `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `;
+
   return (
     <div
       className="chat-container"
       style={{ height: "98vh", display: "flex", flexDirection: "column" }}
     >
       <TitleBar
-        leftIcons={[
-          `Peers: ${orZero(lightPushPeers?.length)} light push, ${orZero(
-            filterPeers?.length
-          )} filter, ${orZero(storePeers?.length)} store.`,
-        ]}
-        rightIcons={[
-          `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `,
-          "View console for more details.",
-        ]}
+        leftIcons={[peersMessage]}
+        rightIcons={[bootstrapPeersMessage, "View console for more details."]}
         title="Waku v2 chat app"
       />
       <ChatList messages={props.messages} />