PLT-4507 Don't mount modals until opened to make resetting state automatic (#4358)

* Don't mount modals until opened to make resetting state automatic

* Move dimiss handler to be fired after modal exit animation complete

1 files changed, 20 insertions, 22 deletions

diff --git a/webapp/components/channel_invite_modal.jsx b/webapp/components/channel_invite_modal.jsx
index 576a33dc5..29607136c 100644
--- a/webapp/components/channel_invite_modal.jsx
+++ b/webapp/components/channel_invite_modal.jsx
@@ -26,6 +26,7 @@ export default class ChannelInviteModal extends React.Component {
 
         this.onChange = this.onChange.bind(this);
         this.onStatusChange = this.onStatusChange.bind(this);
+        this.onHide = this.onHide.bind(this);
         this.handleInviteError = this.handleInviteError.bind(this);
         this.nextPage = this.nextPage.bind(this);
         this.search = this.search.bind(this);
@@ -36,34 +37,27 @@ export default class ChannelInviteModal extends React.Component {
         const teamStats = TeamStore.getCurrentStats();
 
         this.state = {
-            users: [],
+            users: null,
             total: teamStats.member_count - channelStats.member_count,
+            show: true,
             search: false,
             statusChange: false
         };
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (!this.props.show && nextProps.show) {
-            TeamStore.addStatsChangeListener(this.onChange);
-            ChannelStore.addStatsChangeListener(this.onChange);
-            UserStore.addNotInChannelChangeListener(this.onChange);
-            UserStore.addStatusesChangeListener(this.onStatusChange);
-
-            this.onChange();
-            AsyncClient.getProfilesNotInChannel(this.props.channel.id, 0);
-            AsyncClient.getTeamStats(TeamStore.getCurrentId());
-        } else if (this.props.show && !nextProps.show) {
-            TeamStore.removeStatsChangeListener(this.onChange);
-            ChannelStore.removeStatsChangeListener(this.onChange);
-            UserStore.removeNotInChannelChangeListener(this.onChange);
-            UserStore.removeStatusesChangeListener(this.onStatusChange);
-        }
+    componentDidMount() {
+        TeamStore.addStatsChangeListener(this.onChange);
+        ChannelStore.addStatsChangeListener(this.onChange);
+        UserStore.addNotInChannelChangeListener(this.onChange);
+        UserStore.addStatusesChangeListener(this.onStatusChange);
+
+        AsyncClient.getProfilesNotInChannel(this.props.channel.id, 0);
+        AsyncClient.getTeamStats(TeamStore.getCurrentId());
     }
 
     componentWillUnmount() {
+        TeamStore.removeStatsChangeListener(this.onChange);
         ChannelStore.removeStatsChangeListener(this.onChange);
-        ChannelStore.removeChangeListener(this.onChange);
         UserStore.removeNotInChannelChangeListener(this.onChange);
         UserStore.removeStatusesChangeListener(this.onStatusChange);
     }
@@ -90,6 +84,10 @@ export default class ChannelInviteModal extends React.Component {
         });
     }
 
+    onHide() {
+        this.setState({show: false});
+    }
+
     handleInviteError(err) {
         if (err) {
             this.setState({
@@ -159,8 +157,9 @@ export default class ChannelInviteModal extends React.Component {
         return (
             <Modal
                 dialogClassName='more-modal'
-                show={this.props.show}
-                onHide={this.props.onHide}
+                show={this.state.show}
+                onHide={this.onHide}
+                onExited={this.props.onHide}
             >
                 <Modal.Header closeButton={true}>
                     <Modal.Title>
@@ -179,7 +178,7 @@ export default class ChannelInviteModal extends React.Component {
                     <button
                         type='button'
                         className='btn btn-default'
-                        onClick={this.props.onHide}
+                        onClick={this.onHide}
                     >
                         <FormattedMessage
                             id='channel_invite.close'
@@ -193,7 +192,6 @@ export default class ChannelInviteModal extends React.Component {
 }
 
 ChannelInviteModal.propTypes = {
-    show: React.PropTypes.bool.isRequired,
     onHide: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
 };