Reformatted team_feature_tab.jsx to meet style guide requirements.

web/react/components/team_feature_tab.jsx

@@ -7,34 +7,24 @@ var SettingItemMax = require('./setting_item_max.jsx');
 var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 
-module.exports = React.createClass({
-    displayName: 'Feature Tab',
-    propTypes: {
-        updateSection: React.PropTypes.func.isRequired,
-        team: React.PropTypes.object.isRequired,
-        activeSection: React.PropTypes.string.isRequired
-    },
-    submitValetFeature: function() {
-        var data = {};
-        data.allow_valet = this.state.allowValet;
+export default class FeatureTab extends React.Component {
+    constructor(props) {
+        super(props);
 
-        client.updateValetFeature(data,
-            function() {
-                this.props.updateSection('');
-                AsyncClient.getMyTeam();
-            }.bind(this),
-            function(err) {
-                var state = this.getInitialState();
-                state.serverError = err;
-                this.setState(state);
-            }.bind(this)
-        );
-    },
-    handleValetRadio: function(val) {
-        this.setState({allowValet: val});
-        this.refs.wrapper.getDOMNode().focus();
-    },
-    componentWillReceiveProps: function(newProps) {
+        this.submitValetFeature = this.submitValetFeature.bind(this);
+        this.handleValetRadio = this.handleValetRadio.bind(this);
+        this.onUpdateSection = this.onUpdateSection.bind(this);
+
+        this.state = {};
+        var team = this.props.team;
+
+        if (team && team.allow_valet) {
+            this.state.allowValet = 'true';
+        } else {
+            this.state.allowValet = 'false';
+        }
+    }
+    componentWillReceiveProps(newProps) {
         var team = newProps.team;
 
         var allowValet = 'false';
@@ -43,26 +33,36 @@ module.exports = React.createClass({
         }
 
         this.setState({allowValet: allowValet});
-    },
-    getInitialState: function() {
-        var team = this.props.team;
+    }
+    submitValetFeature() {
+        var data = {};
+        data.allow_valet = this.state.allowValet;
 
-        var allowValet = 'false';
-        if (team && team.allow_valet) {
-            allowValet = 'true';
-        }
-
-        return {allowValet: allowValet};
-    },
-    onUpdateSection: function(e) {
+        client.updateValetFeature(data,
+            function success() {
+                this.props.updateSection('');
+                AsyncClient.getMyTeam();
+            }.bind(this),
+            function fail(err) {
+                var state = this.getInitialState();
+                state.serverError = err;
+                this.setState(state);
+            }.bind(this)
+        );
+    }
+    handleValetRadio(val) {
+        this.setState({allowValet: val});
+        this.refs.wrapper.getDOMNode().focus();
+    }
+    onUpdateSection(e) {
         e.preventDefault();
         if (this.props.activeSection === 'valet') {
             this.props.updateSection('');
         } else {
             this.props.updateSection('valet');
         }
-    },
-    render: function() {
+    }
+    render() {
         var clientError = null;
         var serverError = null;
         if (this.state.clientError) {
@@ -145,10 +145,25 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className='modal-header'>
-                    <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
-                    <h4 className='modal-title' ref='title'><i className='modal-back'></i>Advanced Features</h4>
+                    <button
+                        type='button'
+                        className='close'
+                        data-dismiss='modal'
+                        aria-label='Close'
+                    >
+                        <span aria-hidden='true'>&times;</span>
+                    </button>
+                    <h4
+                        className='modal-title'
+                        ref='title'
+                    >
+                        <i className='modal-back'></i>Advanced Features
+                    </h4>
                 </div>
-                <div ref='wrapper' className='user-settings'>
+                <div
+                    ref='wrapper'
+                    className='user-settings'
+                >
                     <h3 className='tab-header'>Advanced Features</h3>
                     <div className='divider-dark first'/>
                     {valetSection}
@@ -157,4 +172,14 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}
+
+FeatureTab.defaultProps = {
+    team: {},
+    activeSection: ''
+};
+FeatureTab.propTypes = {
+    updateSection: React.PropTypes.func.isRequired,
+    team: React.PropTypes.object.isRequired,
+    activeSection: React.PropTypes.string.isRequired
+};