From 522ebb93c059de340e464dda95a8c4e5fd351667 Mon Sep 17 00:00:00 2001
From: Sasha <oleksandr@status.im>
Date: Thu, 23 Feb 2023 19:23:52 +0100
Subject: [PATCH] decouple useNodePeers hook

---
 examples/web-chat/src/Room.tsx | 50 ++++++---------------------------
 examples/web-chat/src/hooks.ts | 51 ++++++++++++++++++++++++++++++++++
 2 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/examples/web-chat/src/Room.tsx b/examples/web-chat/src/Room.tsx
index 85f1dbc..b8bf58c 100644
--- a/examples/web-chat/src/Room.tsx
+++ b/examples/web-chat/src/Room.tsx
@@ -5,7 +5,7 @@ import { useWaku, useContentPair, useLightPush } from "@waku/react";
 import { TitleBar } from "@livechat/ui-kit";
 import { Message } from "./Message";
 import { ChatMessage } from "./chat_message";
-import { useEffect, useState } from "react";
+import { useNodePeers } from "./hooks";
 
 interface Props {
   messages: Message[];
@@ -17,6 +17,13 @@ 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 onSend = async (text: string) => {
     if (!onPush) {
@@ -38,47 +45,6 @@ export default function Room(props: Props) {
     }
   };
 
-  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>());
-
-  useEffect(() => {
-    if (!node) return;
-
-    // Update store peer when new peer connected & identified
-    node.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
-      const { peerId } = evt.detail;
-      const tags = (await node.libp2p.peerStore.getTags(peerId)).map(
-        (t) => t.name
-      );
-      if (tags.includes("peer-exchange")) {
-        setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
-      } 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]);
-
-  useEffect(() => {
-    console.log("Bootstrap Peers:");
-    console.table(bootstrapPeers);
-
-    console.log("Peer Exchange Peers:");
-    console.table(peerExchangePeers);
-  }, [bootstrapPeers, peerExchangePeers]);
-
   return (
     <div
       className="chat-container"
diff --git a/examples/web-chat/src/hooks.ts b/examples/web-chat/src/hooks.ts
index 7412d2c..eb08102 100644
--- a/examples/web-chat/src/hooks.ts
+++ b/examples/web-chat/src/hooks.ts
@@ -37,3 +37,54 @@ export const useMessages = (params: UseMessagesParams): Message[] => {
       .filter((v): v is Message => !!v);
   }, [storedMessages, newMessages]);
 };
+
+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>());
+
+  useEffect(() => {
+    if (!node) return;
+
+    // Update store peer when new peer connected & identified
+    node.libp2p.peerStore.addEventListener("change:protocols", async (evt) => {
+      const { peerId } = evt.detail;
+      const tags = (await node.libp2p.peerStore.getTags(peerId)).map(
+        (t) => t.name
+      );
+      if (tags.includes("peer-exchange")) {
+        setPeerExchangePeers((peers) => new Set(peers).add(peerId.toString()));
+      } 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]);
+
+  useEffect(() => {
+    console.log("Bootstrap Peers:");
+    console.table(bootstrapPeers);
+
+    console.log("Peer Exchange Peers:");
+    console.table(peerExchangePeers);
+  }, [bootstrapPeers, peerExchangePeers]);
+
+  return {
+    storePeers,
+    filterPeers,
+    lightPushPeers,
+    bootstrapPeers,
+    peerExchangePeers,
+  };
+};