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

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

@@ -12,6 +12,7 @@ class Whisper extends React.Component {
       channel: '',
       message: '',
       subscribedChannels: [],
+      channelIsValid: false,
       messageList: [],
       logs: []
     };
@@ -19,6 +20,7 @@ class Whisper extends React.Component {
 
   handleChange (e, name) {
     this.state[name] = e.target.value;
+    this.state.channelIsValid = e.target.value.length >= 4;
     this.setState(this.state);
   }
 
@@ -40,7 +42,7 @@ class Whisper extends React.Component {
     e.preventDefault();
 
     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({
       subscribedChannels
     });
@@ -83,9 +85,12 @@ class Whisper extends React.Component {
               defaultValue={this.state.listenTo}
               placeholder="channel"
               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">
-              {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>
             <p>messages received:</p>
             <div id="messagesList">