1 files changed, 55 insertions, 31 deletions

diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx
index f5a555951..7ec75e000 100644
--- a/web/react/components/user_settings_modal.jsx
+++ b/web/react/components/user_settings_modal.jsx
@@ -4,51 +4,75 @@
 var SettingsSidebar = require('./settings_sidebar.jsx');
 var UserSettings = require('./user_settings.jsx');
 
-module.exports = React.createClass({
-    componentDidMount: function() {
-        $('body').on('click', '.modal-back', function(){
+export default class UserSettingsModal extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.updateTab = this.updateTab.bind(this);
+        this.updateSection = this.updateSection.bind(this);
+
+        this.state = {active_tab: 'general', active_section: ''};
+    }
+    componentDidMount() {
+        $('body').on('click', '.modal-back', function changeDisplay() {
             $(this).closest('.modal-dialog').removeClass('display--content');
         });
-        $('body').on('click', '.modal-header .close', function(){
-            setTimeout(function() {
+        $('body').on('click', '.modal-header .close', function closeModal() {
+            setTimeout(function finishClose() {
                 $('.modal-dialog.display--content').removeClass('display--content');
             }, 500);
         });
-    },
-    updateTab: function(tab) {
-        this.setState({ active_tab: tab });
-    },
-    updateSection: function(section) {
-        this.setState({ active_section: section });
-    },
-    getInitialState: function() {
-        return { active_tab: "general", active_section: "" };
-    },
-    render: function() {
+    }
+    updateTab(tab) {
+        this.setState({active_tab: tab});
+    }
+    updateSection(section) {
+        this.setState({active_section: section});
+    }
+    render() {
         var tabs = [];
-        tabs.push({name: "general", uiName: "General", icon: "glyphicon glyphicon-cog"});
-        tabs.push({name: "security", uiName: "Security", icon: "glyphicon glyphicon-lock"});
-        tabs.push({name: "notifications", uiName: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"});
-        tabs.push({name: "appearance", uiName: "Appearance", icon: "glyphicon glyphicon-wrench"});
+        tabs.push({name: 'general', uiName: 'General', icon: 'glyphicon glyphicon-cog'});
+        tabs.push({name: 'security', uiName: 'Security', icon: 'glyphicon glyphicon-lock'});
+        tabs.push({name: 'notifications', uiName: 'Notifications', icon: 'glyphicon glyphicon-exclamation-sign'});
+        tabs.push({name: 'appearance', uiName: 'Appearance', icon: 'glyphicon glyphicon-wrench'});
 
         return (
-            <div className="modal fade" ref="modal" id="user_settings" role="dialog" tabIndex="-1" aria-hidden="true">
-              <div className="modal-dialog settings-modal">
-                <div className="modal-content">
-                  <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">Account Settings</h4>
+            <div
+                className='modal fade'
+                ref='modal'
+                id='user_settings'
+                role='dialog'
+                tabIndex='-1'
+                aria-hidden='true'
+            >
+              <div className='modal-dialog settings-modal'>
+                <div className='modal-content'>
+                  <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'
+                    >
+                        Account Settings
+                    </h4>
                   </div>
-                  <div className="modal-body">
-                    <div className="settings-table">
-                        <div className="settings-links">
+                  <div className='modal-body'>
+                    <div className='settings-table'>
+                        <div className='settings-links'>
                             <SettingsSidebar
                                 tabs={tabs}
                                 activeTab={this.state.active_tab}
                                 updateTab={this.updateTab}
                             />
                         </div>
-                        <div className="settings-content minimize-settings">
+                        <div className='settings-content minimize-settings'>
                             <UserSettings
                                 activeTab={this.state.active_tab}
                                 activeSection={this.state.active_section}
@@ -63,4 +87,4 @@ module.exports = React.createClass({
             </div>
         );
     }
-});
+}