From 8a7f2401eac38285a86a0392a27a85ca206d7a8f Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@status.im>
Date: Wed, 28 Jul 2021 13:07:41 +1000
Subject: [PATCH] Process incoming messages

---
 examples/min-js-web-chat/src/App.js   | 15 ++++++++
 guides/menu.md                        |  4 +++
 guides/relay-receive-send-messages.md | 50 ++++++++++++++++++++-------
 3 files changed, 56 insertions(+), 13 deletions(-)
 create mode 100644 guides/menu.md

diff --git a/examples/min-js-web-chat/src/App.js b/examples/min-js-web-chat/src/App.js
index b1f652552d..c3baca5e6c 100644
--- a/examples/min-js-web-chat/src/App.js
+++ b/examples/min-js-web-chat/src/App.js
@@ -23,6 +23,21 @@ function App() {
     });
   }, [waku, wakuStatus]);
 
+  // Need to keep the same reference around to add and delete from relay observer
+  const processIncomingMessage = React.useCallback((wakuMessage) => {
+    console.log('Message Received', wakuMessage);
+  }, []);
+
+  React.useEffect(() => {
+    if (!waku) return;
+
+    waku.relay.addObserver(processIncomingMessage, [ContentTopic]);
+
+    return function cleanUp() {
+      waku.relay.deleteObserver(processIncomingMessage, [ContentTopic]);
+    };
+  }, [waku, wakuStatus, processIncomingMessage]);
+
   const sendMessageOnClick = () => {
     if (wakuStatus !== 'Ready') return;
 
diff --git a/guides/menu.md b/guides/menu.md
new file mode 100644
index 0000000000..26c502d8cf
--- /dev/null
+++ b/guides/menu.md
@@ -0,0 +1,4 @@
+# Guides
+
+- [Receive and Send messages using Waku Relay](relay-receive-send-messages.md)
+- [Choose a content topic for your dApp](choose-content-topic.md)
diff --git a/guides/relay-receive-send-messages.md b/guides/relay-receive-send-messages.md
index 96cbfdc55f..983659b299 100644
--- a/guides/relay-receive-send-messages.md
+++ b/guides/relay-receive-send-messages.md
@@ -1,6 +1,10 @@
-# Received and Send messages using Waku Relay
+# Receive and Send messages using Waku Relay
 
-Waku Relay is a gossip protocol that enables you to send and receive messages.
+Waku
+Relay
+is
+a
+gossip protocol that enables you to send and receive messages.
 You can find Waku Relay's specifications on [Vac RFC](https://rfc.vac.dev/spec/11/).
 
 Before starting, you need to choose a _Content Topic_ for your dApp.
@@ -40,13 +44,25 @@ const nodes = await getStatusFleetNodes();
 await Promise.all(nodes.map((addr) => waku.dial(addr))); 
 ```
 
+# Receive messages
+
+To monitor messages for your app, you need to register an observer on relay for your app's content topic:
+
+```js
+const processIncomingMessage = (wakuMessage) => {
+  console.log("Message Received", wakuMessage);
+};
+
+waku.relay.addObserver(processIncomingMessage, ["/relay-guide/1/chat/proto"]);
+```
+
 # Send messages
 
-We are now ready to send message.
+You are now ready to send messages.
 Let's start by sending simple strings as messages.
 
-To send a message, we need to wrap the message in a `WakuMessage`.
-When using a basic string payload, we can just use the `WakuMessage.fromUtf8String` helper:
+To send a message, you need to wrap the message in a `WakuMessage`.
+When using a basic string payload, you can use the `WakuMessage.fromUtf8String` helper:
 
 ```js
 import { WakuMessage } from 'js-waku';
@@ -54,7 +70,7 @@ import { WakuMessage } from 'js-waku';
 const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
 ```
 
-Then, we use the `relay` module to send the message to our peers,
+Then, use the `relay` module to send the message to our peers,
 the message will then be relayed to the rest of the network thanks to Waku Relay:
 
 ```js
@@ -62,23 +78,31 @@ import { WakuMessage } from 'js-waku';
 
 const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
 
-await waku.relay.send(wakuMessage)
+await waku.relay.send(wakuMessage);
 ```
 
-So far, we have:
+# Conclusion
+
+That is it! Now, you know how to send and receive messages over Waku using the Waku Relay protocol.
+
+Feel free to check out other [guides](menu.md) or [examples](../examples).
+
+Here is the final code:
 
 ```js
 import { getStatusFleetNodes, Waku, WakuMessage } from 'js-waku';
 
 const wakuNode = await Waku.create();
 
-import { getStatusFleetNodes } from 'js-waku';
-
 const nodes = await getStatusFleetNodes();
 await Promise.all(nodes.map((addr) => waku.dial(addr)));
 
+const processIncomingMessage = (wakuMessage) => {
+  console.log('Message Received', wakuMessage);
+};
+
+waku.relay.addObserver(processIncomingMessage, ['/relay-guide/1/chat/proto']);
+
 const wakuMessage = await WakuMessage.fromUtf8String(message, `/relay-guide/1/chat/proto`);
-
-await waku.relay.send(wakuMessage)
+await waku.relay.send(wakuMessage);
 ```
-