Replace protons with protobufs in relay example (#50)

content/docs/guides/07_reactjs_relay.md

@@ -235,23 +235,20 @@ React.useEffect(() => {
 # Define Message Format
 
 To define the Protobuf message format,
-use [protons](https://www.npmjs.com/package/protons)
+you can use [protobufjs](https://www.npmjs.com/package/protobufjs):
 
 ```shell
-npm install protons
+npm install protobufjs
 ```
 
 Define `SimpleChatMessage` with two fields: `timestamp` and `text`.
 
 ```js
-import protons from "protons";
+import protobuf from "protobufjs";
 
-const proto = protons(`
-message SimpleChatMessage {
-  uint64 timestamp = 1;
-  string text = 2;
-}
-`);
+const SimpleChatMessage = new protobuf.Type("SimpleChatMessage")
+    .add(new protobuf.Field("timestamp", 1, "uint64"))
+    .add(new protobuf.Field("text", 2, "string"));
 ```
 
 # Send Messages
@@ -259,24 +256,25 @@ message SimpleChatMessage {
 Create a function that takes the Waku instance and a message to send:
 
 ```js
-import { WakuMessage } from "js-waku";
+import {WakuMessage} from "js-waku";
 
 const ContentTopic = `/relay-reactjs-chat/1/chat/proto`;
 
 function sendMessage(message, waku, timestamp) {
-  const time = timestamp.getTime();
+    const time = timestamp.getTime();
 
-  // Encode to protobuf
-  const payload = proto.SimpleChatMessage.encode({
-    timestamp: time,
-    text: message,
-  });
+    // Encode to protobuf
+    const protoMsg = SimpleChatMessage.create({
+        timestamp: time,
+        text: message,
+    });
+    const payload = SimpleChatMessage.encode(protoMsg).finish();
 
-  // Wrap in a Waku Message
-  return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
-    // Send over Waku Relay
-    waku.relay.send(wakuMessage)
-  );
+    // Wrap in a Waku Message
+    return WakuMessage.fromBytes(payload, ContentTopic).then((wakuMessage) =>
+        // Send over Waku Relay
+        waku.relay.send(wakuMessage)
+    );
 }
 ```
 
@@ -329,18 +327,17 @@ For that, use `React.useCallback`:
 
 ```js
 const processIncomingMessage = React.useCallback((wakuMessage) => {
-  // Empty message?
-  if (!wakuMessage.payload) return;
+    // Empty message?
+    if (!wakuMessage.payload) return;
 
-  // Decode the protobuf payload
-  const { timestamp, text } = proto.SimpleChatMessage.decode(
-    wakuMessage.payload
-  );
-  const time = new Date();
-  time.setTime(timestamp);
+    // Decode the protobuf payload
+    const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
 
-  // For now, just log new messages on the console
-  console.log(`message received at ${time.toString()}: ${text}`);
+    const time = new Date();
+    time.setTime(timestamp);
+
+    // For now, just log new messages on the console
+    console.log(`message received at ${time.toString()}: ${text}`);
 }, []);
 ```
 
@@ -371,27 +368,25 @@ First, add incoming messages to the state of the `App` component:
 
 ```js
 function App() {
-  //...
+    //...
 
-  const [messages, setMessages] = React.useState([]);
+    const [messages, setMessages] = React.useState([]);
 
-  const processIncomingMessage = React.useCallback((wakuMessage) => {
-    if (!wakuMessage.payload) return;
+    const processIncomingMessage = React.useCallback((wakuMessage) => {
+        if (!wakuMessage.payload) return;
 
-    const { text, timestamp } = proto.SimpleChatMessage.decode(
-      wakuMessage.payload
-    );
+        const {text, timestamp} = SimpleChatMessage.decode(wakuMessage.payload);
 
-    const time = new Date();
-    time.setTime(timestamp);
-    const message = { text, timestamp: time };
+        const time = new Date();
+        time.setTime(timestamp);
+        const message = {text, timestamp: time};
 
-    setMessages((messages) => {
-      return [message].concat(messages);
-    });
-  }, []);
+        setMessages((messages) => {
+            return [message].concat(messages);
+        });
+    }, []);
 
-  // ...
+    // ...
 }
 ```