From 54f32bacadc5e9a5a8588ed73b9342ace67d713d Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Mon, 10 May 2021 12:38:27 +1000
Subject: [PATCH] Use new observer interface in examples

---
 examples/cli-chat/src/chat.ts | 10 +++-------
 examples/web-chat/src/App.tsx | 29 +++++++++--------------------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/examples/cli-chat/src/chat.ts b/examples/cli-chat/src/chat.ts
index 07150b2fa6..4b8d7f6026 100644
--- a/examples/cli-chat/src/chat.ts
+++ b/examples/cli-chat/src/chat.ts
@@ -6,7 +6,6 @@ import { multiaddr, Multiaddr } from 'multiaddr';
 import { ChatMessage } from 'waku/chat_message';
 import Waku from 'waku/waku';
 import { WakuMessage } from 'waku/waku_message';
-import { RelayDefaultTopic } from 'waku/waku_relay';
 import { StoreCodec } from 'waku/waku_store';
 
 const ChatContentTopic = 'dingpu';
@@ -43,12 +42,9 @@ export default async function startChat(): Promise<void> {
 
   console.log(`Hi, ${nick}!`);
 
-  // TODO: Bubble event to waku, infer topic, decode msg
-  // Tracked with https://github.com/status-im/js-waku/issues/19
-  waku.libp2p.pubsub.on(RelayDefaultTopic, (event) => {
-    const wakuMsg = WakuMessage.decode(event.data);
-    if (wakuMsg.payload) {
-      const chatMsg = ChatMessage.decode(wakuMsg.payload);
+  waku.relay.addObserver((message) => {
+    if (message.payload) {
+      const chatMsg = ChatMessage.decode(message.payload);
       console.log(formatMessage(chatMsg));
     }
   });
diff --git a/examples/web-chat/src/App.tsx b/examples/web-chat/src/App.tsx
index e2ec3b68ee..58b7ef3f8a 100644
--- a/examples/web-chat/src/App.tsx
+++ b/examples/web-chat/src/App.tsx
@@ -5,7 +5,6 @@ import './App.css';
 import { ChatMessage } from './ChatMessage';
 import { ChatMessage as WakuChatMessage } from 'waku/chat_message';
 import { WakuMessage } from 'waku/waku_message';
-import { RelayDefaultTopic } from 'waku/waku_relay';
 import { StoreCodec } from 'waku/waku_store';
 import handleCommand from './command';
 import Room from './Room';
@@ -52,10 +51,14 @@ export default function App() {
   let [nick, setNick] = useState<string>(generate());
 
   useEffect(() => {
-    const handleRelayMessage = (event: { data: Uint8Array }) => {
-      const chatMsg = decodeWakuMessage(event.data);
-      if (chatMsg) {
-        setNewMessages([chatMsg]);
+    const handleRelayMessage = (wakuMsg: WakuMessage) => {
+      if (wakuMsg.payload) {
+        const chatMsg = ChatMessage.fromWakuChatMessage(
+          WakuChatMessage.decode(wakuMsg.payload)
+        );
+        if (chatMsg) {
+          setNewMessages([chatMsg]);
+        }
       }
     };
 
@@ -94,7 +97,7 @@ export default function App() {
         .then(() => console.log('Waku init done'))
         .catch((e) => console.log('Waku init failed ', e));
     } else {
-      stateWaku.libp2p.pubsub.on(RelayDefaultTopic, handleRelayMessage);
+      stateWaku.relay.addObserver(handleRelayMessage);
 
       stateWaku.libp2p.peerStore.on(
         'change:protocols',
@@ -103,10 +106,6 @@ export default function App() {
 
       // To clean up listener when component unmounts
       return () => {
-        stateWaku?.libp2p.pubsub.removeListener(
-          RelayDefaultTopic,
-          handleRelayMessage
-        );
         stateWaku?.libp2p.peerStore.removeListener(
           'change:protocols',
           handleProtocolChange.bind({}, stateWaku)
@@ -173,13 +172,3 @@ async function initWaku(setter: (waku: Waku) => void) {
     console.log('Issue starting waku ', e);
   }
 }
-
-function decodeWakuMessage(data: Uint8Array): null | ChatMessage {
-  const wakuMsg = WakuMessage.decode(data);
-  if (!wakuMsg.payload) {
-    return null;
-  }
-  return ChatMessage.fromWakuChatMessage(
-    WakuChatMessage.decode(wakuMsg.payload)
-  );
-}