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,10 +1,10 @@
 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 {
 
-    constructor(props) {
+  constructor (props) {
     super(props);
 
     this.state = {
@@ -14,37 +14,50 @@ class Whisper extends React.Component {
       subscribedChannels: [],
       messageList: [],
       logs: []
-      }
+    };
   }
 
-    handleChange(e, name){
+  handleChange (e, name) {
     this.state[name] = e.target.value;
     this.setState(this.state);
   }
 
-    sendMessage(e){
+  sendMessage (e) {
     e.preventDefault();
     EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
     this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
   }
 
-    listenToChannel(e){
+  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) {})");
   }
 
-    addToLog(txt){
+  addToLog (txt) {
     this.state.logs.push(txt);
     this.setState({logs: this.state.logs});
   }
 
-    render(){
+  render () {
     return (
       <React.Fragment>
         {
@@ -61,14 +74,14 @@ class Whisper extends React.Component {
               type="text"
               defaultValue={this.state.listenTo}
               placeholder="channel"
-                        onChange={e => this.handleChange(e, 'listenTo')} />
+              onChange={e => this.handleChange(e, 'listenTo')}/>
             <Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
             <div id="subscribeList">
-                    { this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
+              {this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
             </div>
             <p>messages received:</p>
             <div id="messagesList">
-                    { this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
+              {this.state.messageList.map((item, i) => <p key={i}>{item}</p>)}
             </div>
           </FormGroup>
         </Form>
@@ -80,12 +93,12 @@ class Whisper extends React.Component {
               type="text"
               defaultValue={this.state.channel}
               placeholder="channel"
-                        onChange={e => this.handleChange(e, 'channel')} />
+              onChange={e => this.handleChange(e, 'channel')}/>
             <FormControl
               type="text"
               defaultValue={this.state.message}
               placeholder="message"
-                        onChange={e => this.handleChange(e, 'message')} />
+              onChange={e => this.handleChange(e, 'message')}/>
             <Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
           </FormGroup>
         </Form>