Merge pull request #310 from nickago/MM-1671

MM-1671 Added support for enter key triggering submission and changed Close to Cancel

1 files changed, 70 insertions, 62 deletions

diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx
index 49e088458..6cf195795 100644
--- a/web/react/components/new_channel.jsx
+++ b/web/react/components/new_channel.jsx
@@ -1,58 +1,53 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var asyncClient = require('../utils/async_client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var TeamStore = require('../stores/team_store.jsx');
-var Constants = require('../utils/constants.jsx');
 
 module.exports = React.createClass({
+    displayName: 'NewChannelModal',
     handleSubmit: function(e) {
         e.preventDefault();
 
         var channel = {};
-        var state = { server_error: "" };
+        var state = {serverError: ''};
 
         channel.display_name = this.refs.display_name.getDOMNode().value.trim();
         if (!channel.display_name) {
-            state.display_name_error = "This field is required";
+            state.displayNameError = 'This field is required';
             state.inValid = true;
-        }
-        else if (channel.display_name.length > 22) {
-            state.display_name_error = "This field must be less than 22 characters";
+        } else if (channel.display_name.length > 22) {
+            state.displayNameError = 'This field must be less than 22 characters';
             state.inValid = true;
-        }
-        else {
-            state.display_name_error = "";
+        } else {
+            state.displayNameError = '';
         }
 
         channel.name = this.refs.channel_name.getDOMNode().value.trim();
         if (!channel.name) {
-            state.name_error = "This field is required";
+            state.nameError = 'This field is required';
             state.inValid = true;
-        }
-        else if(channel.name.length > 22){
-            state.name_error = "This field must be less than 22 characters";
+        } else if (channel.name.length > 22) {
+            state.nameError = 'This field must be less than 22 characters';
             state.inValid = true;
-        }
-        else {
-            var cleaned_name = utils.cleanUpUrlable(channel.name);
-            if (cleaned_name != channel.name) {
-                state.name_error = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'";
+        } else {
+            var cleanedName = utils.cleanUpUrlable(channel.name);
+            if (cleanedName !== channel.name) {
+                state.nameError = "Must be lowercase alphanumeric characters, allowing '-' but not starting or ending with '-'";
                 state.inValid = true;
-            }
-            else {
-                state.name_error = "";
+            } else {
+                state.nameError = '';
             }
         }
 
         this.setState(state);
 
-        if (state.inValid)
+        if (state.inValid) {
             return;
+        }
 
         var cu = UserStore.getCurrentUser();
         channel.team_id = cu.team_id;
@@ -63,76 +58,89 @@ module.exports = React.createClass({
         var self = this;
         client.createChannel(channel,
             function() {
-                this.refs.display_name.getDOMNode().value = "";
-                this.refs.channel_name.getDOMNode().value = "";
-                this.refs.channel_desc.getDOMNode().value = "";
+                this.refs.display_name.getDOMNode().value = '';
+                this.refs.channel_name.getDOMNode().value = '';
+                this.refs.channel_desc.getDOMNode().value = '';
 
                 $(self.refs.modal.getDOMNode()).modal('hide');
-                window.location = TeamStore.getCurrentTeamUrl() + "/channels/" + channel.name;
+                window.location = TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name;
                 asyncClient.getChannels(true);
             }.bind(this),
             function(err) {
-                state.server_error = err.message;
+                state.serverError = err.message;
                 state.inValid = true;
                 this.setState(state);
             }.bind(this)
         );
     },
-    displayNameKeyUp: function(e) {
-        var display_name = this.refs.display_name.getDOMNode().value.trim();
-        var channel_name = utils.cleanUpUrlable(display_name);
-        this.refs.channel_name.getDOMNode().value = channel_name;
+    displayNameKeyUp: function() {
+        var displayName = this.refs.display_name.getDOMNode().value.trim();
+        var channelName = utils.cleanUpUrlable(displayName);
+        this.refs.channel_name.getDOMNode().value = channelName;
     },
     componentDidMount: function() {
         var self = this;
         $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
             var button = e.relatedTarget;
-            self.setState({ channel_type: $(button).attr('data-channeltype') });
+            self.setState({channelType: $(button).attr('data-channeltype')});
         });
     },
     getInitialState: function() {
-        return { channel_type: "" };
+        return {channelType: ''};
     },
     render: function() {
+        var displayNameError = null;
+        var nameError = null;
+        var serverError = null;
+        var displayNameClass = 'form-group';
+        var nameClass = 'form-group';
 
-        var display_name_error = this.state.display_name_error ? <label className='control-label'>{ this.state.display_name_error }</label> : null;
-        var name_error = this.state.name_error ? <label className='control-label'>{ this.state.name_error }</label> : null;
-        var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+        if (this.state.displayNameError) {
+            displayNameError = <label className='control-label'>{this.state.displayNameError}</label>;
+            displayNameClass += ' has-error';
+        }
+        if (this.state.nameError) {
+            nameError = <label className='control-label'>{this.state.nameError}</label>;
+            nameClass += ' has-error';
+        }
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+        }
 
         return (
-            <div className="modal fade" id="new_channel" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true">
-                <div className="modal-dialog">
-                    <div className="modal-content">
-                        <div className="modal-header">
-                            <button type="button" className="close" data-dismiss="modal">
-                                <span aria-hidden="true">&times;</span>
-                                <span className="sr-only">Close</span>
+            <div className='modal fade' id='new_channel' ref='modal' tabIndex='-1' role='dialog' aria-hidden='true'>
+                <div className='modal-dialog'>
+                    <div className='modal-content'>
+                        <div className='modal-header'>
+                            <button type='button' className='close' data-dismiss='modal'>
+                                <span aria-hidden='true'>&times;</span>
+                                <span className='sr-only'>Cancel</span>
                             </button>
-                        <h4 className="modal-title">New Channel</h4>
+                            <h4 className='modal-title'>New Channel</h4>
                         </div>
-                        <div className="modal-body">
-                            <form role="form">
-                                <div className={ this.state.display_name_error ? "form-group has-error" : "form-group" }>
+                        <form role='form'>
+                            <div className='modal-body'>
+                                <div className={displayNameClass}>
                                     <label className='control-label'>Display Name</label>
-                                    <input onKeyUp={this.displayNameKeyUp} type="text" ref="display_name" className="form-control" placeholder="Enter display name" maxLength="64" />
-                                    { display_name_error }
+                                    <input onKeyUp={this.displayNameKeyUp} type='text' ref='display_name' className='form-control' placeholder='Enter display name' maxLength='64' />
+                                    {displayNameError}
                                 </div>
-                                <div className={ this.state.name_error ? "form-group has-error" : "form-group" }>
+                                <div className={nameClass}>
                                     <label className='control-label'>Handle</label>
-                                    <input type="text" className="form-control" ref="channel_name" placeholder="lowercase alphanumeric's only" maxLength="64" />
-                                    { name_error }
+                                    <input type='text' className='form-control' ref='channel_name' placeholder="lowercase alphanumeric's only" maxLength='64' />
+                                    {nameError}
                                 </div>
-                                <div className="form-group">
+                                <div className='form-group'>
                                     <label className='control-label'>Description</label>
-                                    <textarea className="form-control no-resize" ref="channel_desc" rows="3" placeholder="Description" maxLength="1024"></textarea>
+                                    <textarea className='form-control no-resize' ref='channel_desc' rows='3' placeholder='Description' maxLength='1024'></textarea>
                                 </div>
-                                { server_error }
-                            </form>
-                        </div>
-                        <div className="modal-footer">
-                            <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                            <button onClick={this.handleSubmit} type="button" className="btn btn-primary">Create New Channel</button>
-                        </div>
+                                {serverError}
+                            </div>
+                            <div className='modal-footer'>
+                                <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
+                                <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New Channel</button>
+                            </div>
+                        </form>
                     </div>
                 </div>
             </div>