From 2bd10b2641f1db464ea4d247bc43c4ab00b76270 Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Thu, 23 Feb 2023 20:19:06 +0100
Subject: [PATCH] use usePeers from the lib

---
 examples/web-chat/package-lock.json | 12 ++++++------
 examples/web-chat/src/Room.tsx      | 20 +++++++++++---------
 examples/web-chat/src/hooks.ts      | 16 ----------------
 3 files changed, 17 insertions(+), 31 deletions(-)

diff --git a/examples/web-chat/package-lock.json b/examples/web-chat/package-lock.json
index b5d22c6..65b55ad 100644
--- a/examples/web-chat/package-lock.json
+++ b/examples/web-chat/package-lock.json
@@ -6132,9 +6132,9 @@
       }
     },
     "node_modules/@types/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
+      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
       "dev": true,
       "dependencies": {
         "@types/mime": "*",
@@ -10021,9 +10021,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.308",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.308.tgz",
-      "integrity": "sha512-qyTx2aDFjEni4UnRWEME9ubd2Xc9c0zerTUl/ZinvD4QPsF0S7kJTV/Es/lPCTkNX6smyYar+z/n8Cl6pFr8yQ==",
+      "version": "1.4.309",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.309.tgz",
+      "integrity": "sha512-U7DTiKe4h+irqBG6h4EZ0XXaZuJj4md3xIXXaGSYhwiumPZ4BSc6rgf9UD0hVUMaeP/jB0q5pKWCPxvhO8fvZA==",
       "dev": true
     },
     "node_modules/email-addresses": {
diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index b8bf58c..4143255 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -1,7 +1,7 @@
 import type { LightNode } from "@waku/interfaces";
 import ChatList from "./ChatList";
 import MessageInput from "./MessageInput";
-import { useWaku, useContentPair, useLightPush } from "@waku/react";
+import { useWaku, useContentPair, useLightPush, usePeers } from "@waku/react";
 import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
@@ -17,13 +17,9 @@ export default function Room(props: Props) {
   const { node } = useWaku<LightNode>();
   const { encoder } = useContentPair();
   const { push: onPush } = useLightPush({ node, encoder });
-  const {
-    lightPushPeers,
-    filterPeers,
-    storePeers,
-    bootstrapPeers,
-    peerExchangePeers,
-  } = useNodePeers(node);
+
+  const { bootstrapPeers, peerExchangePeers } = useNodePeers(node);
+  const { storePeers, filterPeers, lightPushPeers } = usePeers({ node });
 
   const onSend = async (text: string) => {
     if (!onPush) {
@@ -52,7 +48,9 @@ export default function Room(props: Props) {
     >
       <TitleBar
         leftIcons={[
-          `Peers: ${lightPushPeers} light push, ${filterPeers} filter, ${storePeers} store.`,
+          `Peers: ${orZero(lightPushPeers?.length)} light push, ${orZero(
+            filterPeers?.length
+          )} filter, ${orZero(storePeers?.length)} store.`,
         ]}
         rightIcons={[
           `Bootstrap (DNS Discovery): ${bootstrapPeers.size}, Peer exchange: ${peerExchangePeers.size}. `,
@@ -65,3 +63,7 @@ export default function Room(props: Props) {
     </div>
   );
 }
+
+function orZero(value: undefined | number): number {
+  return value || 0;
+}
diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts
index eb08102..de55fac 100644
--- a/examples/web-chat/src/hooks.ts
+++ b/examples/web-chat/src/hooks.ts
@@ -39,10 +39,6 @@ export const useMessages = (params: UseMessagesParams): Message[] => {
 };
 
 export const useNodePeers = (node: undefined | LightNode) => {
-  const [storePeers, setStorePeers] = useState(0);
-  const [filterPeers, setFilterPeers] = useState(0);
-  const [lightPushPeers, setLightPushPeers] = useState(0);
-
   const [bootstrapPeers, setBootstrapPeers] = useState(new Set<string>());
   const [peerExchangePeers, setPeerExchangePeers] = useState(new Set<string>());
 
@@ -60,15 +56,6 @@ export const useNodePeers = (node: undefined | LightNode) => {
       } else {
         setBootstrapPeers((peers) => new Set(peers).add(peerId.toString()));
       }
-
-      const storePeers = await node.store.peers();
-      setStorePeers(storePeers.length);
-
-      const filterPeers = await node.filter.peers();
-      setFilterPeers(filterPeers.length);
-
-      const lightPushPeers = await node.lightPush.peers();
-      setLightPushPeers(lightPushPeers.length);
     });
   }, [node]);
 
@@ -81,9 +68,6 @@ export const useNodePeers = (node: undefined | LightNode) => {
   }, [bootstrapPeers, peerExchangePeers]);
 
   return {
-    storePeers,
-    filterPeers,
-    lightPushPeers,
     bootstrapPeers,
     peerExchangePeers,
   };