Merge pull request #392 from embark-framework/bug_fix/whisper-demo

Fix Whisper demo

js/embark.js

@@ -263,11 +263,11 @@ EmbarkJS.Messages.sendMessage = function(options) {
   return this.currentMessages.sendMessage(options);
 };
 
-EmbarkJS.Messages.listenTo = function(options) {
+EmbarkJS.Messages.listenTo = function(options, callback) {
   if (!this.currentMessages) {
     throw new Error('Messages provider not set; e.g EmbarkJS.Messages.setProvider("whisper")');
   }
-  return this.currentMessages.listenTo(options);
+  return this.currentMessages.listenTo(options, callback);
 };
 
 EmbarkJS.Utils = {

lib/modules/whisper/js/embarkjs.js

@@ -64,7 +64,7 @@ __embarkWhisperNewWeb3.sendMessage = function (options) {
   });
 };
 
-__embarkWhisperNewWeb3.listenTo = function (options) {
+__embarkWhisperNewWeb3.listenTo = function (options, callback) {
   var topics = options.topic || options.topics;
 
   let promise = new __MessageEvents();
@@ -82,12 +82,15 @@ __embarkWhisperNewWeb3.listenTo = function (options) {
     var payload = JSON.parse(EmbarkJS.Utils.toAscii(result.payload));
     var data;
     data = {
-      topic: result.topic,
+      topic: EmbarkJS.Utils.toAscii(result.topic),
       data: payload,
       //from: result.from,
       time: result.timestamp
     };
 
+    if (callback) {
+      return callback(null, data);
+    }
     promise.cb(payload, data, result);
   });
 

templates/demo/app/components/whisper.js

@@ -1,6 +1,6 @@
 import EmbarkJS from 'Embark/EmbarkJS';
 import React from 'react';
-import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
+import {Alert, Form, FormGroup, FormControl, Button} from 'react-bootstrap';
 
 class Whisper extends React.Component {
 
@@ -14,7 +14,7 @@ class Whisper extends React.Component {
       subscribedChannels: [],
       messageList: [],
       logs: []
-      }
+    };
   }
 
   handleChange (e, name) {
@@ -31,10 +31,23 @@ class Whisper extends React.Component {
   listenToChannel (e) {
     e.preventDefault();
 
-        this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
+    const subscribedChannels = this.state.subscribedChannels;
+    subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
+    this.setState({
+      subscribedChannels
+    });
 
-        EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
-            .then(message => this.state.messageList.push(`channel: ${this.state.listenTo}  message: ${message}`))
+    EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}, (error, message) => {
+      const messageList = this.state.messageList;
+      if (error) {
+        messageList.push(<span className="alert-danger">Error: {error}</span>);
+      } else {
+        messageList.push(<span>Channel: <b>{message.topic}</b> |  Message: <b>{message.data}</b></span>);
+      }
+      this.setState({
+        messageList
+      });
+    });
 
     this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
   }