Merge pull request #404 from nickago/MM-1886

Mm 1886 Add loading screen to channel invite modal

web/react/components/channel_invite_modal.jsx

@@ -4,131 +4,153 @@
 var UserStore = require('../stores/user_store.jsx');
 var ChannelStore = require('../stores/channel_store.jsx');
 var MemberList = require('./member_list.jsx');
+var LoadingScreen = require('./loading_screen.jsx');
 var utils = require('../utils/utils.jsx');
 var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 
-function getStateFromStores() {
+
+export default class ChannelInviteModal extends React.Component {
+    constructor() {
+        super();
+
+        this.componentDidMount = this.componentDidMount.bind(this);
+        this.componentWillUnmount = this.componentWillUnmount.bind(this);
+        this.onShow = this.onShow.bind(this);
+        this.onHide = this.onHide.bind(this);
+        this.onListenerChange = this.onListenerChange.bind(this);
+        this.handleInvite = this.handleInvite.bind(this);
+
+        this.isShown = false;
+        this.state = this.getStateFromStores();
+    }
+    getStateFromStores() {
+        function getId(user) {
+            return user.id;
+        }
         var users = UserStore.getActiveOnlyProfiles();
-    var memberIds = ChannelStore.getCurrentExtraInfo().members.map(function(user) { return user.id; });
+        var memberIds = ChannelStore.getCurrentExtraInfo().members.map(getId);
+
+        var loading = $.isEmptyObject(users);
 
         var nonmembers = [];
         for (var id in users) {
-        if (memberIds.indexOf(id) == -1) {
+            if (memberIds.indexOf(id) === -1) {
                 nonmembers.push(users[id]);
             }
         }
 
-    nonmembers.sort(function(a,b) {
+        nonmembers.sort(function sortByUsername(a, b) {
             return a.username.localeCompare(b.username);
         });
 
-    var channel_name = ChannelStore.getCurrent() ? ChannelStore.getCurrent().display_name : "";
+        var channelName = '';
+        if (ChannelStore.getCurrent()) {
+            channelName = ChannelStore.getCurrent().display_name;
+        }
 
         return {
             nonmembers: nonmembers,
             memberIds: memberIds,
-        channel_name: channel_name
+            channelName: channelName,
+            loading: loading
         };
     }
+    componentDidMount() {
+        $(React.findDOMNode(this)).on('hidden.bs.modal', this.onHide);
+        $(React.findDOMNode(this)).on('show.bs.modal', this.onShow);
 
-module.exports = React.createClass({
+        ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
-    displayName: "ChannelInviteModal",
+        ChannelStore.addChangeListener(this.onListenerChange);
-
+        UserStore.addChangeListener(this.onListenerChange);
-    isShown: false,
+    }
-    getInitialState: function() {
+    componentWillUnmount() {
-        return {};
+        ChannelStore.removeExtraInfoChangeListener(this.onListenerChange);
-    },
+        ChannelStore.removeChangeListener(this.onListenerChange);
-
+        UserStore.removeChangeListener(this.onListenerChange);
-    componentDidMount: function() {
+    }
-        $(React.findDOMNode(this))
+    onShow() {
-            .on('hidden.bs.modal', this._onHide)
-            .on('show.bs.modal', this._onShow);
-    },
-
-    _onShow: function() {
-        ChannelStore.addExtraInfoChangeListener(this._onChange);
-        ChannelStore.addChangeListener(this._onChange);
         this.isShown = true;
-        this._onChange();
+        this.onListenerChange();
-    },
+    }
-
+    onHide() {
-    _onHide: function() {
-        ChannelStore.removeExtraInfoChangeListener(this._onChange);
-        ChannelStore.removeChangeListener(this._onChange);
         this.isShown = false;
-    },
+    }
-
+    onListenerChange() {
-    _onChange: function() {
+        var newState = this.getStateFromStores();
-        this.setState(getStateFromStores());
+        if (!utils.areStatesEqual(this.state, newState) && this.isShown) {
-    },
+            this.setState(newState);
-
+        }
-    handleInvite: function(user_id) {
+    }
+    handleInvite(userId) {
         // Make sure the user isn't already a member of the channel
-        if (this.state.memberIds.indexOf(user_id) > -1) {
+        if (this.state.memberIds.indexOf(userId) > -1) {
             return;
         }
 
         var data = {};
-        data.user_id = user_id;
+        data.user_id = userId;
 
         client.addChannelMember(ChannelStore.getCurrentId(), data,
-            function() {
+            function sucess() {
                 var nonmembers = this.state.nonmembers;
                 var memberIds = this.state.memberIds;
 
                 for (var i = 0; i < nonmembers.length; i++) {
-                    if (user_id === nonmembers[i].id) {
+                    if (userId === nonmembers[i].id) {
                         nonmembers[i].invited = true;
-                        memberIds.push(user_id);
+                        memberIds.push(userId);
                         break;
                     }
                 }
 
-                this.setState({ invite_error: null, memberIds: memberIds, nonmembers: nonmembers });
+                this.setState({inviteError: null, memberIds: memberIds, nonmembers: nonmembers});
                 AsyncClient.getChannelExtraInfo(true);
             }.bind(this),
 
-            function(err) {
+            function error(err) {
-                this.setState({ invite_error: err.message });
+                this.setState({inviteError: err.message});
             }.bind(this)
         );
-    },
+    }
-
+    render() {
-    shouldComponentUpdate: function(nextProps, nextState) {
+        var inviteError = null;
-        return this.isShown && !utils.areStatesEqual(this.state, nextState);
+        if (this.state.inviteError) {
-    },
+            inviteError = (<label className='has-error control-label'>{this.state.inviteError}</label>);
-
+        }
-    render: function() {
-        var invite_error = this.state.invite_error ? <label className='has-error control-label'>{this.state.invite_error}</label> : null;
 
         var currentMember = ChannelStore.getCurrentMember();
         var 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 content;
+        if (this.state.loading) {
+            content = (<LoadingScreen />);
+        } else {
+            content = (<MemberList memberList={this.state.nonmembers} isAdmin={isAdmin} handleInvite={this.handleInvite} />);
         }
 
         return (
-            <div className="modal fade" id="channel_invite" tabIndex="-1" role="dialog" aria-hidden="true">
+            <div className='modal fade' id='channel_invite' tabIndex='-1' role='dialog' aria-hidden='true'>
-              <div className="modal-dialog" role="document">
+              <div className='modal-dialog' role='document'>
-                <div className="modal-content">
+                <div className='modal-content'>
-                  <div className="modal-header">
+                  <div className='modal-header'>
-                    <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                    <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>
-                    <h4 className="modal-title">Add New Members to {this.state.channel_name}</h4>
+                    <h4 className='modal-title'>Add New Members to {this.state.channelName}</h4>
                   </div>
-                  <div className="modal-body">
+                  <div className='modal-body'>
-                    { invite_error }
+                    {inviteError}
-                    <MemberList
+                    {content}
-                      memberList={this.state.nonmembers}
-                      isAdmin={isAdmin}
-                      handleInvite={this.handleInvite} />
                   </div>
-                  <div className="modal-footer">
+                  <div className='modal-footer'>
-                    <button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
+                    <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
                   </div>
                 </div>
               </div>
             </div>
         );
     }
-});
+}
+ChannelInviteModal.displayName = 'ChannelInviteModal';