Refactored various React components to use ES6 syntax and to match the style guide without any errors or warnings

1 files changed, 163 insertions, 117 deletions

diff --git a/web/react/components/channel_members.jsx b/web/react/components/channel_members.jsx
index db4bec400..04fa2c7a2 100644
--- a/web/react/components/channel_members.jsx
+++ b/web/react/components/channel_members.jsx
@@ -1,154 +1,200 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var UserStore = require('../stores/user_store.jsx');
-var ChannelStore = require('../stores/channel_store.jsx');
-var AsyncClient = require('../utils/async_client.jsx');
-var MemberList = require('./member_list.jsx');
-var client = require('../utils/client.jsx');
-var utils = require('../utils/utils.jsx');
-
-function getStateFromStores() {
-    var users = UserStore.getActiveOnlyProfiles();
-    var member_list = ChannelStore.getCurrentExtraInfo().members;
-
-    var nonmember_list = [];
-    for (var id in users) {
-        var found = false;
-        for (var i = 0; i < member_list.length; i++) {
-            if (member_list[i].id === id) {
-                found = true;
-                break;
+const UserStore = require('../stores/user_store.jsx');
+const ChannelStore = require('../stores/channel_store.jsx');
+const AsyncClient = require('../utils/async_client.jsx');
+const MemberList = require('./member_list.jsx');
+const Client = require('../utils/client.jsx');
+const Utils = require('../utils/utils.jsx');
+
+export default class ChannelMembers extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.getStateFromStores = this.getStateFromStores.bind(this);
+        this.onChange = this.onChange.bind(this);
+        this.handleRemove = this.handleRemove.bind(this);
+
+        this.state = this.getStateFromStores();
+    }
+    getStateFromStores() {
+        const users = UserStore.getActiveOnlyProfiles();
+        let memberList = ChannelStore.getCurrentExtraInfo().members;
+
+        let nonmemberList = [];
+        for (let id in users) {
+            if (users.hasOwnProperty(id)) {
+                let found = false;
+                for (let i = 0; i < memberList.length; i++) {
+                    if (memberList[i].id === id) {
+                        found = true;
+                        break;
+                    }
+                }
+                if (!found) {
+                    nonmemberList.push(users[id]);
+                }
             }
         }
-        if (!found) {
-            nonmember_list.push(users[id]);
+
+        function compareByUsername(a, b) {
+            if (a.username < b.username) {
+                return -1;
+            } else if (a.username > b.username) {
+                return 1;
+            }
+
+            return 0;
         }
-    }
 
-    member_list.sort(function(a,b) {
-        if (a.username < b.username) return -1;
-        if (a.username > b.username) return 1;
-        return 0;
-    });
-
-    nonmember_list.sort(function(a,b) {
-        if (a.username < b.username) return -1;
-        if (a.username > b.username) return 1;
-        return 0;
-    });
-
-    var channel_name = ChannelStore.getCurrent() ? ChannelStore.getCurrent().display_name : "";
-
-    return {
-        nonmember_list: nonmember_list,
-        member_list: member_list,
-        channel_name: channel_name
-    };
-}
+        memberList.sort(compareByUsername);
+        nonmemberList.sort(compareByUsername);
+
+        const channel = ChannelStore.getCurrent();
+        let channelName = '';
+        if (channel) {
+            channelName = channel.display_name;
+        }
 
-module.exports = React.createClass({
-    componentDidMount: function() {
-        ChannelStore.addExtraInfoChangeListener(this._onChange);
-        ChannelStore.addChangeListener(this._onChange);
-        var self = this;
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
-            self.setState({ render_members: false });
-        });
-
-        $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
-            self.setState({ render_members: true });
-        });
-    },
-    componentWillUnmount: function() {
-        ChannelStore.removeExtraInfoChangeListener(this._onChange);
-        ChannelStore.removeChangeListener(this._onChange);
-    },
-    _onChange: function() {
-        var new_state = getStateFromStores();
-        if (!utils.areStatesEqual(this.state, new_state)) {
-            this.setState(new_state);
+        return {
+            nonmemberList: nonmemberList,
+            memberList: memberList,
+            channelName: channelName
+        };
+    }
+    componentDidMount() {
+        ChannelStore.addExtraInfoChangeListener(this.onChange);
+        ChannelStore.addChangeListener(this.onChange);
+        $(React.findDOMNode(this.refs.modal)).on('hidden.bs.modal', function handleHide() {
+            this.setState({renderMembers: false});
+        }.bind(this));
+
+        $(React.findDOMNode(this.refs.modal)).on('show.bs.modal', function handleShow() {
+            this.setState({renderMembers: true});
+        }.bind(this));
+    }
+    componentWillUnmount() {
+        ChannelStore.removeExtraInfoChangeListener(this.onChange);
+        ChannelStore.removeChangeListener(this.onChange);
+    }
+    onChange() {
+        const newState = this.getStateFromStores();
+        if (!Utils.areStatesEqual(this.state, newState)) {
+            this.setState(newState);
         }
-    },
-    handleRemove: function(user_id) {
+    }
+    handleRemove(userId) {
         // Make sure the user is a member of the channel
-        var member_list = this.state.member_list;
-        var found = false;
-        for (var i = 0; i < member_list.length; i++) {
-            if (member_list[i].id === user_id) {
+        let memberList = this.state.memberList;
+        let found = false;
+        for (let i = 0; i < memberList.length; i++) {
+            if (memberList[i].id === userId) {
                 found = true;
                 break;
             }
         }
 
-        if (!found) { return };
+        if (!found) {
+            return;
+        }
 
-        var data = {};
-        data['user_id'] = user_id;
+        let data = {};
+        data.user_id = userId;
 
-        client.removeChannelMember(ChannelStore.getCurrentId(), data,
-            function(data) {
-                var old_member;
-                for (var i = 0; i < member_list.length; i++) {
-                    if (user_id === member_list[i].id) {
-                        old_member = member_list[i];
-                        member_list.splice(i, 1);
+        Client.removeChannelMember(ChannelStore.getCurrentId(), data,
+            function handleRemoveSuccess() {
+                let oldMember;
+                for (let i = 0; i < memberList.length; i++) {
+                    if (userId === memberList[i].id) {
+                        oldMember = memberList[i];
+                        memberList.splice(i, 1);
                         break;
                     }
                 }
 
-                var nonmember_list = this.state.nonmember_list;
-                if (old_member) {
-                    nonmember_list.push(old_member);
+                let nonmemberList = this.state.nonmemberList;
+                if (oldMember) {
+                    nonmemberList.push(oldMember);
                 }
 
-                this.setState({ member_list: member_list, nonmember_list: nonmember_list });
+                this.setState({memberList: memberList, nonmemberList: nonmemberList});
                 AsyncClient.getChannelExtraInfo(true);
             }.bind(this),
-            function(err) {
-                this.setState({ invite_error: err.message });
+            function handleRemoveError(err) {
+                this.setState({inviteError: err.message});
             }.bind(this)
          );
-    },
-    getInitialState: function() {
-        return getStateFromStores();
-    },
-    render: function() {
-        var currentMember = ChannelStore.getCurrentMember();
-        var isAdmin = false;
+    }
+    render() {
+        const currentMember = ChannelStore.getCurrentMember();
+        let isAdmin = false;
         if (currentMember) {
-            isAdmin = currentMember.roles.indexOf("admin") > -1 || UserStore.getCurrentUser().roles.indexOf("admin") > -1;
+            isAdmin = currentMember.roles.indexOf('admin') > -1 || UserStore.getCurrentUser().roles.indexOf('admin') > -1;
+        }
+
+        var memberList = null;
+        if (this.state.renderMembers) {
+            memberList = (
+                <MemberList
+                    memberList={this.state.memberList}
+                    isAdmin={isAdmin}
+                    handleRemove={this.handleRemove}
+                />
+            );
         }
 
         return (
-            <div className="modal fade" ref="modal" id="channel_members" 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" aria-label="Close"><span aria-hidden="true">×</span></button>
-                        <h4 className="modal-title"><span className="name">{this.state.channel_name}</span> Members</h4>
-                        <a className="btn btn-md btn-primary" data-toggle="modal" data-target="#channel_invite"><i className="glyphicon glyphicon-envelope"/>  Add New Members</a>
-                    </div>
-                    <div ref="modalBody" className="modal-body">
-                        <div className="col-sm-12">
-                            <div className="team-member-list">
-                                { this.state.render_members ?
-                                <MemberList
-                                    memberList={this.state.member_list}
-                                    isAdmin={isAdmin}
-                                    handleRemove={this.handleRemove}
-                                />
-                                : "" }
+            <div
+                className='modal fade'
+                ref='modal'
+                id='channel_members'
+                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'
+                                aria-label='Close'
+                            >
+                                <span aria-hidden='true'>×</span>
+                            </button>
+                            <h4 className='modal-title'><span className='name'>{this.state.channelName}</span> Members</h4>
+                            <a
+                                className='btn btn-md btn-primary'
+                                data-toggle='modal'
+                                data-target='#channel_invite'
+                            >
+                                <i className='glyphicon glyphicon-envelope'/> Add New Members
+                            </a>
+                        </div>
+                        <div
+                            ref='modalBody'
+                            className='modal-body'
+                        >
+                            <div className='col-sm-12'>
+                                <div className='team-member-list'>
+                                    {memberList}
+                                </div>
                             </div>
                         </div>
+                        <div className='modal-footer'>
+                            <button
+                                type='button'
+                                className='btn btn-default'
+                                data-dismiss='modal'
+                            >
+                                Close
+                            </button>
+                        </div>
                     </div>
-                    <div className="modal-footer">
-                      <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
-                    </div>
-                  </div>
-               </div>
+                </div>
             </div>
-
         );
     }
-});
+}