status-im/embark-area-51
2
0
Fork 0
mirror of https://github.com/status-im/embark-area-51.git synced 2025-02-10 14:16:47 +00:00
Code Issues Projects Releases Wiki Activity

fix whisper demo

Browse Source
This commit is contained in:
Jonathan Rainville 2018-05-02 12:24:16 -04:00
parent 41b2741ba5
commit f303d3d839
1 changed files with 105 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
templates/demo/app/components/whisper.js
View File

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