MM-2065 style refactoring

web/react/components/command_list.jsx

@@ -3,25 +3,40 @@
 
 var client = require('../utils/client.jsx');
 
-module.exports = React.createClass({
-    getInitialState: function() {
-        return { suggestions: [ ], cmd: "" };
-    },
-    handleClick: function(i) {
-        this.props.addCommand(this.state.suggestions[i].suggestion)
-        this.setState({ suggestions: [ ], cmd: "" });
-    },
-    addFirstCommand: function() {
-        if (this.state.suggestions.length == 0) return;
-        this.handleClick(0);
-    },
-    isEmpty: function() {
-        return this.state.suggestions.length == 0;
-    },
-    getSuggestedCommands: function(cmd) {
+export default class CommandList extends React.Component {
+    constructor(props) {
+        super(props);
 
-        if (!cmd || cmd.charAt(0) != '/') {
-            this.setState({ suggestions: [ ], cmd: "" });
+        this.handleClick = this.handleClick.bind(this);
+        this.addFirstCommand = this.addFirstCommand.bind(this);
+        this.isEmpty = this.isEmpty.bind(this);
+        this.getSuggestedCommands = this.getSuggestedCommands.bind(this);
+
+        this.state = {
+            suggestions: [ ],
+            cmd: ''
+        };
+    }
+
+    handleClick(i) {
+        this.props.addCommand(this.state.suggestions[i].suggestion);
+        this.setState({suggestions: [ ], cmd: ''});
+    }
+
+    addFirstCommand() {
+        if (this.state.suggestions.length === 0) {
+            return;
+        }
+        this.handleClick(0);
+    }
+
+    isEmpty() {
+        return this.state.suggestions.length === 0;
+    }
+
+    getSuggestedCommands(cmd) {
+        if (!cmd || cmd.charAt(0) !== '/') {
+            this.setState({suggestions: [ ], cmd: ''});
             return;
         }
 
@@ -29,36 +44,56 @@ module.exports = React.createClass({
             this.props.channelId,
             cmd,
             true,
-            function(data) {
+            function success(data) {
                 if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) {
                     data.suggestions = [];
                 }
-                this.setState({ suggestions: data.suggestions, cmd: cmd  });
+                this.setState({suggestions: data.suggestions, cmd: cmd});
             }.bind(this),
-            function(err){
-            }
+            function fail() {
+        }
         );
-    },
-    render: function() {
-        if (this.state.suggestions.length == 0) return (<div/>);
+    }
+
+    render() {
+        if (this.state.suggestions.length === 0) {
+            return (<div/>);
+        }
 
         var suggestions = [];
 
         for (var i = 0; i < this.state.suggestions.length; i++) {
-            if (this.state.suggestions[i].suggestion != this.state.cmd) {
+            if (this.state.suggestions[i].suggestion !== this.state.cmd) {
                 suggestions.push(
-                    <div key={i} className="command-name" onClick={this.handleClick.bind(this, i)}>
-                        <div className="command__title"><strong>{ this.state.suggestions[i].suggestion }</strong></div>
-                        <div className="command__desc">{ this.state.suggestions[i].description }</div>
+                    <div
+                        key={i}
+                        className='command-name'
+                        onClick={this.handleClick.bind(this, i)}
+                    >
+                        <div className='command__title'><strong>{this.state.suggestions[i].suggestion}</strong></div>
+                        <div className='command__desc'>{this.state.suggestions[i].description}</div>
                     </div>
                 );
             }
         }
 
         return (
-            <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*56)+2}}>
-                { suggestions }
+            <div
+                ref='mentionlist'
+                className='command-box'
+                style={{height: (this.state.suggestions.length * 56) + 2}}
+            >
+                {suggestions}
             </div>
         );
     }
-});
+}
+
+CommandList.defaultProps = {
+    channelId: null
+};
+
+CommandList.propTypes = {
+    addCommand: React.PropTypes.func,
+    channelId: React.PropTypes.string
+};