Skip to content

Commit f303d3d

Browse files
jrainvillejrainville
committed
fix whisper demo
1 parent 41b2741 commit f303d3d

File tree

1 file changed

+100
-87
lines changed

1 file changed

+100
-87
lines changed

‎templates/demo/app/components/whisper.js‎

Lines changed: 100 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,118 @@
11
import EmbarkJS from 'Embark/EmbarkJS';
22
import React from 'react';
3-
import { Alert, Form, FormGroup, FormControl, HelpBlock, Button } from 'react-bootstrap';
4-
3+
import {Alert, Form, FormGroup, FormControl, Button} from 'react-bootstrap';
4+
55
class Whisper extends React.Component {
66

7-
constructor(props) {
8-
super(props);
7+
constructor (props) {
8+
super(props);
99

10-
this.state = {
11-
listenTo: '',
12-
channel: '',
13-
message: '',
14-
subscribedChannels: [],
15-
messageList: [],
16-
logs: []
17-
}
18-
}
10+
this.state = {
11+
listenTo: '',
12+
channel: '',
13+
message: '',
14+
subscribedChannels: [],
15+
messageList: [],
16+
logs: []
17+
};
18+
}
1919

20-
handleChange(e, name){
21-
this.state[name] = e.target.value;
22-
this.setState(this.state);
23-
}
20+
handleChange (e, name) {
21+
this.state[name] = e.target.value;
22+
this.setState(this.state);
23+
}
2424

25-
sendMessage(e){
26-
e.preventDefault();
27-
EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
28-
this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
29-
}
25+
sendMessage (e) {
26+
e.preventDefault();
27+
EmbarkJS.Messages.sendMessage({topic: this.state.channel, data: this.state.message});
28+
this.addToLog("EmbarkJS.Messages.sendMessage({topic: '" + this.state.channel + "', data: '" + this.state.message + "'})");
29+
}
3030

31-
listenToChannel(e){
32-
e.preventDefault();
31+
listenToChannel (e) {
32+
e.preventDefault();
3333

34-
this.state.subscribedChannels.push(`subscribed to ${this.state.listenTo} now try sending a message`);
34+
const subscribedChannels = this.state.subscribedChannels;
35+
subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>);
36+
this.setState({
37+
subscribedChannels
38+
});
3539

36-
EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]})
37-
.then(message => this.state.messageList.push(`channel: ${this.state.listenTo} message: ${message}`))
40+
EmbarkJS.Messages.listenTo({topic: [this.state.listenTo]}, (error, message) => {
41+
const messageList = this.state.messageList;
42+
if (error) {
43+
messageList.push(<span className="alert-danger">Error: {error}</span>);
44+
} else {
45+
messageList.push(<span>Channel: <b>{message.topic}</b> | Message: <b>{message.data}</b></span>);
46+
}
47+
this.setState({
48+
messageList
49+
});
50+
});
3851

39-
this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
40-
}
52+
this.addToLog("EmbarkJS.Messages.listenTo({topic: ['" + this.state.listenTo + "']}).then(function(message) {})");
53+
}
4154

42-
addToLog(txt){
43-
this.state.logs.push(txt);
44-
this.setState({logs: this.state.logs});
45-
}
55+
addToLog (txt) {
56+
this.state.logs.push(txt);
57+
this.setState({logs: this.state.logs});
58+
}
4659

47-
render(){
48-
return (
49-
<React.Fragment>
50-
{
51-
!this.props.enabled ?
52-
<React.Fragment>
53-
<Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
54-
<Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
55-
</React.Fragment> : ''
56-
}
57-
<h3>Listen To channel</h3>
58-
<Form inline>
59-
<FormGroup>
60-
<FormControl
61-
type="text"
62-
defaultValue={this.state.listenTo}
63-
placeholder="channel"
64-
onChange={e => this.handleChange(e, 'listenTo')} />
65-
<Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
66-
<div id="subscribeList">
67-
{ this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>) }
68-
</div>
69-
<p>messages received:</p>
70-
<div id="messagesList">
71-
{ this.state.messageList.map((item, i) => <p key={i}>{item}</p>) }
72-
</div>
73-
</FormGroup>
74-
</Form>
60+
render () {
61+
return (
62+
<React.Fragment>
63+
{
64+
!this.props.enabled ?
65+
<React.Fragment>
66+
<Alert bsStyle="warning">The node you are using does not support Whisper</Alert>
67+
<Alert bsStyle="warning">The node uses an unsupported version of Whisper</Alert>
68+
</React.Fragment> : ''
69+
}
70+
<h3>Listen To channel</h3>
71+
<Form inline>
72+
<FormGroup>
73+
<FormControl
74+
type="text"
75+
defaultValue={this.state.listenTo}
76+
placeholder="channel"
77+
onChange={e => this.handleChange(e, 'listenTo')}/>
78+
<Button bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
79+
<div id="subscribeList">
80+
{this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)}
81+
</div>
82+
<p>messages received:</p>
83+
<div id="messagesList">
84+
{this.state.messageList.map((item, i) => <p key={i}>{item}</p>)}
85+
</div>
86+
</FormGroup>
87+
</Form>
7588

76-
<h3>Send Message</h3>
77-
<Form inline>
78-
<FormGroup>
79-
<FormControl
80-
type="text"
81-
defaultValue={this.state.channel}
82-
placeholder="channel"
83-
onChange={e => this.handleChange(e, 'channel')} />
84-
<FormControl
85-
type="text"
86-
defaultValue={this.state.message}
87-
placeholder="message"
88-
onChange={e => this.handleChange(e, 'message')} />
89-
<Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
90-
</FormGroup>
91-
</Form>
89+
<h3>Send Message</h3>
90+
<Form inline>
91+
<FormGroup>
92+
<FormControl
93+
type="text"
94+
defaultValue={this.state.channel}
95+
placeholder="channel"
96+
onChange={e => this.handleChange(e, 'channel')}/>
97+
<FormControl
98+
type="text"
99+
defaultValue={this.state.message}
100+
placeholder="message"
101+
onChange={e => this.handleChange(e, 'message')}/>
102+
<Button bsStyle="primary" onClick={(e) => this.sendMessage(e)}>Send Message</Button>
103+
</FormGroup>
104+
</Form>
92105

93-
<p>Javascript calls being made: </p>
94-
<div className="logs">
95-
<p>EmbarkJS.Messages.setProvider('whisper')</p>
96-
{
97-
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
98-
}
99-
</div>
100-
</React.Fragment>
101-
);
102-
}
106+
<p>Javascript calls being made: </p>
107+
<div className="logs">
108+
<p>EmbarkJS.Messages.setProvider('whisper')</p>
109+
{
110+
this.state.logs.map((item, i) => <p key={i}>{item}</p>)
111+
}
112+
</div>
113+
</React.Fragment>
114+
);
115+
}
103116
}
104117

105118
export default Whisper;

0 commit comments

Comments
 (0)