From c9470230ffb0cf68f7fd6e353a1b3d8a3c970ece Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Wed, 22 Jul 2015 13:13:26 -0700
Subject: Channel descriptions entered that are larger than the max number of
 bytes now cause an error to be printed to the client without closing the
 modal and losing the user's draft of the description

---
 web/react/components/edit_channel_modal.jsx | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx
index c0818959a..d055feacd 100644
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -6,17 +6,24 @@ var AsyncClient = require('../utils/async_client.jsx');
 
 module.exports = React.createClass({
     handleEdit: function(e) {
-        var data = {}
+        var data = {};
         data["channel_id"] = this.state.channel_id;
         if (data["channel_id"].length !== 26) return;
         data["channel_description"] = this.state.description.trim();
 
         Client.updateChannelDesc(data,
             function(data) {
+                this.setState({ server_error: "" });
                 AsyncClient.getChannels(true);
+                $(this.refs.modal.getDOMNode()).modal('hide');
             }.bind(this),
             function(err) {
-                AsyncClient.dispatchError(err, "updateChannelDesc");
+                if (err.message === "Invalid channel_description parameter") {
+                    this.setState({ server_error: "This description is too long, please enter a shorter one" });
+                }
+                else {
+                    this.setState({ server_error: err.message });
+                }
             }.bind(this)
         );
     },
@@ -27,13 +34,15 @@ module.exports = React.createClass({
         var self = this;
         $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
             var button = e.relatedTarget;
-            self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid') });
+            self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), server_error: "" });
         });
     },
     getInitialState: function() {
         return { description: "", title: "", channel_id: "" };
     },
     render: function() {
+        var server_error = this.state.server_error ? <div className='form-group has-error'><br/><label className='control-label'>{ this.state.server_error }</label></div> : null;
+
         return (
             <div className="modal fade" ref="modal" id="edit_channel" role="dialog" aria-hidden="true">
               <div className="modal-dialog">
@@ -44,10 +53,11 @@ module.exports = React.createClass({
                   </div>
                   <div className="modal-body">
                     <textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea>
+                    { server_error }
                   </div>
                   <div className="modal-footer">
                     <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                    <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.handleEdit}>Save</button>
+                    <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
                   </div>
                 </div>
               </div>
-- 
cgit v1.2.3-1-g7c22