Made ChannelInviteModal pull all channel members before rendering

3 files changed, 35 insertions, 10 deletions

diff --git a/web/react/components/channel_invite_modal.jsx b/web/react/components/channel_invite_modal.jsx
index 7dac39942..8b7485e5f 100644
--- a/web/react/components/channel_invite_modal.jsx
+++ b/web/react/components/channel_invite_modal.jsx
@@ -20,9 +20,14 @@ export default class ChannelInviteModal extends React.Component {
         this.onListenerChange = this.onListenerChange.bind(this);
         this.handleInvite = this.handleInvite.bind(this);
 
-        this.state = this.getStateFromStores();
+        // the state gets populated when the modal is shown
+        this.state = {};
     }
     shouldComponentUpdate(nextProps, nextState) {
+        if (!this.props.show && !nextProps.show) {
+            return false;
+        }
+
         if (!Utils.areObjectsEqual(this.props, nextProps)) {
             return true;
         }
@@ -34,13 +39,25 @@ export default class ChannelInviteModal extends React.Component {
         return false;
     }
     getStateFromStores() {
-        function getId(user) {
-            return user.id;
+        const users = UserStore.getActiveOnlyProfiles();
+
+        if ($.isEmptyObject(users)) {
+            return {
+                loading: true
+            };
+        }
+
+        // make sure we have all members of this channel before rendering
+        const extraInfo = ChannelStore.getCurrentExtraInfo();
+        if (extraInfo.member_count !== extraInfo.members.length) {
+            AsyncClient.getChannelExtraInfo(this.props.channel.id, -1);
+
+            return {
+                loading: true
+            };
         }
-        var users = UserStore.getActiveOnlyProfiles();
-        var memberIds = ChannelStore.getCurrentExtraInfo().members.map(getId);
 
-        var loading = $.isEmptyObject(users);
+        const memberIds = extraInfo.members.map((user) => user.id);
 
         var nonmembers = [];
         for (var id in users) {
@@ -55,7 +72,7 @@ export default class ChannelInviteModal extends React.Component {
 
         return {
             nonmembers,
-            loading
+            loading: false
         };
     }
     onShow() {
diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx
index f218270da..0ee89b9fa 100644
--- a/web/react/utils/async_client.jsx
+++ b/web/react/utils/async_client.jsx
@@ -168,7 +168,7 @@ export function getMoreChannels(force) {
     }
 }
 
-export function getChannelExtraInfo(id) {
+export function getChannelExtraInfo(id, memberLimit) {
     let channelId;
     if (id) {
         channelId = id;
@@ -185,6 +185,7 @@ export function getChannelExtraInfo(id) {
 
         client.getChannelExtraInfo(
             channelId,
+            memberLimit,
             (data, textStatus, xhr) => {
                 callTracker['getChannelExtraInfo_' + channelId] = 0;
 
diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx
index e1c331aff..96d1ef720 100644
--- a/web/react/utils/client.jsx
+++ b/web/react/utils/client.jsx
@@ -824,10 +824,17 @@ export function getChannelCounts(success, error) {
     });
 }
 
-export function getChannelExtraInfo(id, success, error) {
+export function getChannelExtraInfo(id, memberLimit, success, error) {
+    let url = '/api/v1/channels/' + id + '/extra_info';
+
+    if (memberLimit) {
+        url += '/' + memberLimit;
+    }
+
     $.ajax({
-        url: '/api/v1/channels/' + id + '/extra_info',
+        url,
         dataType: 'json',
+        contentType: 'application/json',
         type: 'GET',
         success,
         error: function onError(xhr, status, err) {