Fixing store access design issues (#4436)

webapp/components/integrations/components/add_command.jsx

@@ -166,7 +166,7 @@ export default class AddCommand extends React.Component {
         AsyncClient.addCommand(
             command,
             (data) => {
-                browserHistory.push('/' + this.props.team.name + '/integrations/confirm?type=commands&id=' + data.id);
+                browserHistory.push('/' + this.props.team.name + '/integrations/commands/confirm?type=commands&id=' + data.id);
             },
             (err) => {
                 this.setState({

webapp/components/integrations/components/commands_container.jsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import IntegrationStore from 'stores/integration_store.jsx';
+import TeamStore from 'stores/team_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
+import {loadTeamCommands} from 'actions/integration_actions.jsx';
+
+import React from 'react';
+
+export default class CommandsContainer extends React.Component {
+    static get propTypes() {
+        return {
+            team: React.propTypes.object.isRequired,
+            children: React.propTypes.node.isRequired
+        };
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
+        this.handleUserChange = this.handleUserChange.bind(this);
+
+        const teamId = TeamStore.getCurrentId();
+
+        this.state = {
+            commands: IntegrationStore.getCommands(teamId),
+            loading: !IntegrationStore.hasReceivedCommands(teamId),
+            users: UserStore.getProfiles()
+        };
+    }
+
+    componentDidMount() {
+        IntegrationStore.addChangeListener(this.handleIntegrationChange);
+        UserStore.addChangeListener(this.handleUserChange);
+
+        if (window.mm_config.EnableCommands === 'true') {
+            loadTeamCommands();
+        }
+    }
+
+    componentWillUnmount() {
+        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
+        UserStore.removeChangeListener(this.handleUserChange);
+    }
+
+    handleIntegrationChange() {
+        const teamId = TeamStore.getCurrentId();
+
+        this.setState({
+            commands: IntegrationStore.getCommands(teamId),
+            loading: !IntegrationStore.hasReceivedCommands(teamId)
+        });
+    }
+
+    handleUserChange() {
+        this.setState({users: UserStore.getProfiles()});
+    }
+
+    render() {
+        return (
+            <div>
+                {React.cloneElement(this.props.children, {
+                    commands: this.state.commands,
+                    users: this.state.users,
+                    loading: this.state.loading,
+                    team: this.props.team
+                })}
+            </div>
+        );
+    }
+}

webapp/components/integrations/components/confirm_integration.jsx

@@ -16,7 +16,8 @@ export default class ConfirmIntegration extends React.Component {
     static get propTypes() {
         return {
             team: React.propTypes.object.isRequired,
-            location: React.PropTypes.object
+            location: React.PropTypes.object,
+            loading: React.PropTypes.bool
         };
     }
 
@@ -56,6 +57,11 @@ export default class ConfirmIntegration extends React.Component {
         let headerText = null;
         let helpText = null;
         let tokenText = null;
+
+        if (this.props.loading === true) {
+            return (<div/>);
+        }
+
         if (this.state.type === Constants.Integrations.COMMAND) {
             headerText = (
                 <FormattedMessage

webapp/components/integrations/components/installed_commands.jsx

@@ -4,12 +4,6 @@
 import BackstageList from 'components/backstage/components/backstage_list.jsx';
 import InstalledCommand from './installed_command.jsx';
 
-import IntegrationStore from 'stores/integration_store.jsx';
-import TeamStore from 'stores/team_store.jsx';
-import UserStore from 'stores/user_store.jsx';
-
-import {loadTeamCommands} from 'actions/integration_actions.jsx';
-
 import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
@@ -19,52 +13,18 @@ import {FormattedMessage} from 'react-intl';
 export default class InstalledCommands extends React.Component {
     static get propTypes() {
         return {
-            team: React.propTypes.object.isRequired
+            team: React.propTypes.object.isRequired,
+            users: React.propTypes.object.isRequired,
+            commands: React.propTypes.array.isRequired,
+            loading: React.propTypes.bool.isRequired
         };
     }
 
     constructor(props) {
         super(props);
 
-        this.handleIntegrationChange = this.handleIntegrationChange.bind(this);
-        this.handleUserChange = this.handleUserChange.bind(this);
         this.regenCommandToken = this.regenCommandToken.bind(this);
         this.deleteCommand = this.deleteCommand.bind(this);
-
-        const teamId = TeamStore.getCurrentId();
-
-        this.state = {
-            commands: IntegrationStore.getCommands(teamId),
-            loading: !IntegrationStore.hasReceivedCommands(teamId),
-            users: UserStore.getProfiles()
-        };
-    }
-
-    componentDidMount() {
-        IntegrationStore.addChangeListener(this.handleIntegrationChange);
-        UserStore.addChangeListener(this.handleUserChange);
-
-        if (window.mm_config.EnableCommands === 'true') {
-            loadTeamCommands();
-        }
-    }
-
-    componentWillUnmount() {
-        IntegrationStore.removeChangeListener(this.handleIntegrationChange);
-        UserStore.removeChangeListener(this.handleUserChange);
-    }
-
-    handleIntegrationChange() {
-        const teamId = TeamStore.getCurrentId();
-
-        this.setState({
-            commands: IntegrationStore.getCommands(teamId),
-            loading: !IntegrationStore.hasReceivedCommands(teamId)
-        });
-    }
-
-    handleUserChange() {
-        this.setState({users: UserStore.getProfiles()});
     }
 
     regenCommandToken(command) {
@@ -76,14 +36,14 @@ export default class InstalledCommands extends React.Component {
     }
 
     render() {
-        const commands = this.state.commands.map((command) => {
+        const commands = this.props.commands.map((command) => {
             return (
                 <InstalledCommand
                     key={command.id}
                     command={command}
                     onRegenToken={this.regenCommandToken}
                     onDelete={this.deleteCommand}
-                    creator={this.state.users[command.creator_id] || {}}
+                    creator={this.props.users[command.creator_id] || {}}
                 />
             );
         });
@@ -130,7 +90,7 @@ export default class InstalledCommands extends React.Component {
                     />
                 }
                 searchPlaceholder={Utils.localizeMessage('installed_commands.search', 'Search Slash Commands')}
-                loading={this.state.loading}
+                loading={this.props.loading}
             >
                 {commands}
             </BackstageList>

webapp/routes/route_integrations.jsx

@@ -48,17 +48,28 @@ export default {
         },
         {
             path: 'commands',
-            indexRoute: {
-                getComponents: (location, callback) => {
-                    System.import('components/integrations/components/installed_commands.jsx').then(RouteUtils.importComponentSuccess(callback));
-                }
+            getComponents: (location, callback) => {
+                System.import('components/integrations/components/commands_container.jsx').then(RouteUtils.importComponentSuccess(callback));
             },
+            indexRoute: {onEnter: (nextState, replace) => replace(nextState.location.pathname + '/installed')},
             childRoutes: [
+                {
+                    path: 'installed',
+                    getComponents: (location, callback) => {
+                        System.import('components/integrations/components/installed_commands.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    }
+                },
                 {
                     path: 'add',
                     getComponents: (location, callback) => {
                         System.import('components/integrations/components/add_command.jsx').then(RouteUtils.importComponentSuccess(callback));
                     }
+                },
+                {
+                    path: 'confirm',
+                    getComponents: (location, callback) => {
+                        System.import('components/integrations/components/confirm_integration.jsx').then(RouteUtils.importComponentSuccess(callback));
+                    }
                 }
             ]
         },