embarklabs
/
embark
mirror of https://github.com/embarklabs/embark.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(@dapps/demo): don't allow subscription to whisper channels with less than 4 chars 

This has been a problem in Cockpit as well and was fixed accordingly.
Whisper doesn't allow subscribing to channels with names that have less
than 4 characters.

This could be fixed in different ways, one being on the library level
(e.g. have embark check for the given length and not subscribing when it
doesn't pass the check), the other one being on the application/ui level.

The reason it makes sense to solve this in the application layers is because
we keep the it open for users of EmbarkJS.Messages APIs to handle errors
the way they want.

Fixes #1666
This commit is contained in:
Pascal Precht 2019-06-20 14:24:53 +02:00 committed by Michael Bradley
parent 0a388d741e
commit 322397f81c
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
dapps/templates/demo/app/components/whisper.js
View File

@ -12,6 +12,7 @@ class Whisper extends React.Component {
channel: '', channel: '',
message: '', message: '',
subscribedChannels: [], subscribedChannels: [],
channelIsValid: false,
messageList: [], messageList: [],
logs: [] logs: []
}; };
@ -19,6 +20,7 @@ class Whisper extends React.Component {
handleChange (e, name) { handleChange (e, name) {
this.state[name] = e.target.value; this.state[name] = e.target.value;
this.state.channelIsValid = e.target.value.length >= 4;
this.setState(this.state); this.setState(this.state);
} }
@ -40,7 +42,7 @@ class Whisper extends React.Component {
e.preventDefault(); e.preventDefault();
const subscribedChannels = this.state.subscribedChannels; const subscribedChannels = this.state.subscribedChannels;
subscribedChannels.push(<span>Subscribed to <b>{this.state.listenTo}</b>. Now try sending a message</span>); subscribedChannels.push(this.state.listenTo);
this.setState({ this.setState({
subscribedChannels subscribedChannels
}); });
@ -83,9 +85,12 @@ class Whisper extends React.Component {
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 disabled={!this.state.channelIsValid} bsStyle="primary" onClick={(e) => this.listenToChannel(e)}>Start Listening</Button>
{!this.state.channelIsValid && <p><span className="alert-danger">Channel has to be at least 4 characters long</span></p>}
<div id="subscribeList"> <div id="subscribeList">
{this.state.subscribedChannels.map((item, i) => <p key={i}>{item}</p>)} {this.state.subscribedChannels.map((item, i) => {
return <p key={i}><span>Subscribed to <b>{item}</b>. Now try sending a message</span></p>
})}
</div> </div>
<p>messages received:</p> <p>messages received:</p>
<div id="messagesList"> <div id="messagesList">