Merge pull request #545 from mattermost/mm-2066

MM-2066 Refactoring for style guide

1 files changed, 69 insertions, 52 deletions

diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx
index 1a79eef1d..53855fe1c 100644
--- a/web/react/components/team_settings.jsx
+++ b/web/react/components/team_settings.jsx
@@ -5,66 +5,83 @@ var TeamStore = require('../stores/team_store.jsx');
 var ImportTab = require('./team_import_tab.jsx');
 var FeatureTab = require('./team_feature_tab.jsx');
 var GeneralTab = require('./team_general_tab.jsx');
-var utils = require('../utils/utils.jsx');
+var Utils = require('../utils/utils.jsx');
 
-module.exports = React.createClass({
-    displayName: 'Team Settings',
-    propTypes: {
-        activeTab: React.PropTypes.string.isRequired,
-        activeSection: React.PropTypes.string.isRequired,
-        updateSection: React.PropTypes.func.isRequired,
-        teamDisplayName: React.PropTypes.string.isRequired
-    },
-    componentDidMount: function() {
+export default class TeamSettings extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.onChange = this.onChange.bind(this);
+
+        this.state = {team: TeamStore.getCurrent()};
+    }
+    componentDidMount() {
         TeamStore.addChangeListener(this.onChange);
-    },
-    componentWillUnmount: function() {
+    }
+    componentWillUnmount() {
         TeamStore.removeChangeListener(this.onChange);
-    },
-    onChange: function() {
+    }
+    onChange() {
         var team = TeamStore.getCurrent();
-        if (!utils.areStatesEqual(this.state.team, team)) {
+        if (!Utils.areStatesEqual(this.state.team, team)) {
             this.setState({team: team});
         }
-    },
-    getInitialState: function() {
-        return {team: TeamStore.getCurrent()};
-    },
-    render: function() {
+    }
+    render() {
         var result;
         switch (this.props.activeTab) {
-            case 'general':
-                result = (
-                    <div>
-                        <GeneralTab
-                            team={this.state.team}
-                            activeSection={this.props.activeSection}
-                            updateSection={this.props.updateSection}
-                            teamDisplayName={this.props.teamDisplayName}
-                        />
-                    </div>
-                );
-                break;
-            case 'feature':
-                result = (
-                    <div>
-                        <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
-                    </div>
-                );
-                break;
-            case 'import':
-                result = (
-                    <div>
-                        <ImportTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
-                    </div>
-                );
-                break;
-            default:
-                result = (
-                    <div/>
-                );
-                break;
+        case 'general':
+            result = (
+                <div>
+                    <GeneralTab
+                        team={this.state.team}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                        teamDisplayName={this.props.teamDisplayName}
+                    />
+                </div>
+            );
+            break;
+        case 'feature':
+            result = (
+                <div>
+                    <FeatureTab
+                        team={this.state.team}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                    />
+                </div>
+            );
+            break;
+        case 'import':
+            result = (
+                <div>
+                    <ImportTab
+                        team={this.state.team}
+                        activeSection={this.props.activeSection}
+                        updateSection={this.props.updateSection}
+                    />
+                </div>
+            );
+            break;
+        default:
+            result = (
+                <div/>
+            );
+            break;
         }
         return result;
     }
-});
+}
+
+TeamSettings.defaultProps = {
+    activeTab: '',
+    activeSection: '',
+    teamDisplayName: ''
+};
+TeamSettings.propTypes = {
+    activeTab: React.PropTypes.string.isRequired,
+    activeSection: React.PropTypes.string.isRequired,
+    updateSection: React.PropTypes.func.isRequired,
+    teamDisplayName: React.PropTypes.string.isRequired
+};