From 322397f81c37c59ac37c8fa7c85707899c5ee263 Mon Sep 17 00:00:00 2001
From: Pascal Precht <pascal.precht@gmail.com>
Date: Thu, 20 Jun 2019 14:24:53 +0200
Subject: [PATCH] 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 | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/dapps/templates/demo/app/components/whisper.js b/dapps/templates/demo/app/components/whisper.js
index e32665cbc..59f42137a 100644
--- a/dapps/templates/demo/app/components/whisper.js
+++ b/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">