PLT-6214 Move channel store and actions over to redux (#6235)

* Move channel store and actions over to redux

* Fix style errors

* Fix unit test

* Various fixes

* More fixes

* Revert config changes

webapp/components/channel_members_dropdown/channel_members_dropdown.jsx

@@ -7,7 +7,6 @@ import UserStore from 'stores/user_store.jsx';
 
 import {removeUserFromChannel, makeUserChannelAdmin, makeUserChannelMember} from 'actions/channel_actions.jsx';
 
-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import {canManageMembers} from 'utils/channel_utils.jsx';
 import {Constants} from 'utils/constants.jsx';
@@ -16,6 +15,16 @@ import React from 'react';
 import {FormattedMessage} from 'react-intl';
 
 export default class ChannelMembersDropdown extends React.Component {
+    static propTypes = {
+        channel: React.PropTypes.object.isRequired,
+        user: React.PropTypes.object.isRequired,
+        teamMember: React.PropTypes.object.isRequired,
+        channelMember: React.PropTypes.object.isRequired,
+        actions: React.PropTypes.shape({
+            getChannelStats: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
 
@@ -35,7 +44,7 @@ export default class ChannelMembersDropdown extends React.Component {
             this.props.channel.id,
             this.props.user.id,
             () => {
-                AsyncClient.getChannelStats(this.props.channel.id);
+                this.props.actions.getChannelStats(this.props.channel.id);
             },
             (err) => {
                 this.setState({serverError: err.message});
@@ -48,7 +57,7 @@ export default class ChannelMembersDropdown extends React.Component {
             this.props.channel.id,
             this.props.user.id,
             () => {
-                AsyncClient.getChannelStats(this.props.channel.id);
+                this.props.actions.getChannelStats(this.props.channel.id);
             },
             (err) => {
                 this.setState({serverError: err.message});
@@ -61,7 +70,7 @@ export default class ChannelMembersDropdown extends React.Component {
             this.props.channel.id,
             this.props.user.id,
             () => {
-                AsyncClient.getChannelStats(this.props.channel.id);
+                this.props.actions.getChannelStats(this.props.channel.id);
             },
             (err) => {
                 this.setState({serverError: err.message});
@@ -255,10 +264,3 @@ export default class ChannelMembersDropdown extends React.Component {
         );
     }
 }
-
-ChannelMembersDropdown.propTypes = {
-    channel: React.PropTypes.object.isRequired,
-    user: React.PropTypes.object.isRequired,
-    teamMember: React.PropTypes.object.isRequired,
-    channelMember: React.PropTypes.object.isRequired
-};

webapp/components/channel_members_dropdown/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getChannelStats} from 'mattermost-redux/actions/channels';
+
+import ChannelMembersDropdown from './channel_members_dropdown.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getChannelStats
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChannelMembersDropdown);

webapp/components/channel_members_modal.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import MemberListChannel from './member_list_channel.jsx';
+import MemberListChannel from 'components/member_list_channel';
 
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';

webapp/components/channel_view.jsx

@@ -8,7 +8,7 @@ import * as UserAgent from 'utils/user_agent.jsx';
 import ChannelHeader from 'components/channel_header.jsx';
 import FileUploadOverlay from 'components/file_upload_overlay.jsx';
 import CreatePost from 'components/create_post.jsx';
-import PostViewCache from 'components/post_view/post_view_cache.jsx';
+import PostViewCache from 'components/post_view';
 
 import ChannelStore from 'stores/channel_store.jsx';
 

webapp/components/member_list_channel/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getChannelStats} from 'mattermost-redux/actions/channels';
+
+import MemberListChannel from './member_list_channel.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getChannelStats
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MemberListChannel);

webapp/components/member_list_channel/member_list_channel.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2017-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import ChannelMembersDropdown from 'components/channel_members_dropdown.jsx';
+import ChannelMembersDropdown from 'components/channel_members_dropdown';
 import SearchableUserList from 'components/searchable_user_list/searchable_user_list_container.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
@@ -9,7 +9,6 @@ import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import {searchUsers, loadProfilesAndTeamMembersAndChannelMembers, loadTeamMembersAndChannelMembersForProfilesList} from 'actions/user_actions.jsx';
-import {getChannelStats} from 'utils/async_client.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -23,6 +22,13 @@ import {searchProfilesInCurrentChannel} from 'mattermost-redux/selectors/entitie
 const USERS_PER_PAGE = 50;
 
 export default class MemberListChannel extends React.Component {
+    static propTypes = {
+        channel: React.PropTypes.object.isRequired,
+        actions: React.PropTypes.shape({
+            getChannelStats: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
 
@@ -53,7 +59,7 @@ export default class MemberListChannel extends React.Component {
         ChannelStore.addStatsChangeListener(this.onStatsChange);
 
         loadProfilesAndTeamMembersAndChannelMembers(0, Constants.PROFILE_CHUNK_SIZE, TeamStore.getCurrentId(), ChannelStore.getCurrentId(), this.loadComplete);
-        getChannelStats(ChannelStore.getCurrentId());
+        this.props.actions.getChannelStats(ChannelStore.getCurrentId());
     }
 
     componentWillUnmount() {
@@ -163,7 +169,3 @@ export default class MemberListChannel extends React.Component {
         );
     }
 }
-
-MemberListChannel.propTypes = {
-    channel: React.PropTypes.object.isRequired
-};

webapp/components/more_channels/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {getChannels} from 'mattermost-redux/actions/channels';
+
+import MoreChannels from './more_channels.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getChannels
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(MoreChannels);

webapp/components/more_channels/more_channels.jsx

@@ -1,14 +1,13 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import SearchableChannelList from './searchable_channel_list.jsx';
+import SearchableChannelList from 'components/searchable_channel_list.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import {joinChannel, searchMoreChannels} from 'actions/channel_actions.jsx';
 import {showCreateOption} from 'utils/channel_utils.jsx';
 
@@ -23,6 +22,14 @@ const CHANNELS_PER_PAGE = 50;
 const SEARCH_TIMEOUT_MILLISECONDS = 100;
 
 export default class MoreChannels extends React.Component {
+    static propTypes = {
+        onModalDismissed: React.PropTypes.func,
+        handleNewChannel: React.PropTypes.func,
+        actions: React.PropTypes.shape({
+            getChannels: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
 
@@ -47,7 +54,7 @@ export default class MoreChannels extends React.Component {
 
     componentDidMount() {
         ChannelStore.addChangeListener(this.onChange);
-        AsyncClient.getMoreChannelsPage(0, CHANNELS_CHUNK_SIZE * 2);
+        this.props.actions.getChannels(TeamStore.getCurrentId(), 0, CHANNELS_CHUNK_SIZE * 2);
     }
 
     componentWillUnmount() {
@@ -76,7 +83,7 @@ export default class MoreChannels extends React.Component {
     }
 
     nextPage(page) {
-        AsyncClient.getMoreChannelsPage((page + 1) * CHANNELS_PER_PAGE, CHANNELS_PER_PAGE);
+        this.props.actions.getChannels(TeamStore.getCurrentId(), (page + 1) * CHANNELS_PER_PAGE, CHANNELS_PER_PAGE);
     }
 
     handleJoin(channel, done) {
@@ -194,8 +201,3 @@ export default class MoreChannels extends React.Component {
         );
     }
 }
-
-MoreChannels.propTypes = {
-    onModalDismissed: React.PropTypes.func,
-    handleNewChannel: React.PropTypes.func
-};

webapp/components/needs_team/index.js

@@ -0,0 +1,25 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {viewChannel, getMyChannelMembers} from 'mattermost-redux/actions/channels';
+
+import NeedsTeam from './needs_team.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            viewChannel,
+            getMyChannelMembers
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(NeedsTeam);

webapp/components/needs_team/needs_team.jsx

@@ -7,7 +7,6 @@ import $ from 'jquery';
 
 import {browserHistory} from 'react-router/es6';
 import * as Utils from 'utils/utils.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 import TeamStore from 'stores/team_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PreferenceStore from 'stores/preference_store.jsx';
@@ -26,9 +25,9 @@ import ErrorBar from 'components/error_bar.jsx';
 import SidebarRight from 'components/sidebar_right.jsx';
 import SidebarRightMenu from 'components/sidebar_right_menu.jsx';
 import Navbar from 'components/navbar.jsx';
-import WebrtcSidebar from './webrtc/components/webrtc_sidebar.jsx';
+import WebrtcSidebar from 'components/webrtc/components/webrtc_sidebar.jsx';
 
-import WebrtcNotification from './webrtc/components/webrtc_notification.jsx';
+import WebrtcNotification from 'components/webrtc/components/webrtc_notification.jsx';
 
 // Modals
 import GetPostLinkModal from 'components/get_post_link_modal.jsx';
@@ -48,6 +47,23 @@ import * as UserAgent from 'utils/user_agent.jsx';
 const UNREAD_CHECK_TIME_MILLISECONDS = 10000;
 
 export default class NeedsTeam extends React.Component {
+    static propTypes = {
+        children: React.PropTypes.oneOfType([
+            React.PropTypes.arrayOf(React.PropTypes.element),
+            React.PropTypes.element
+        ]),
+        navbar: React.PropTypes.element,
+        sidebar: React.PropTypes.element,
+        team_sidebar: React.PropTypes.element,
+        center: React.PropTypes.element,
+        params: React.PropTypes.object,
+        user: React.PropTypes.object,
+        actions: React.PropTypes.shape({
+            viewChannel: React.PropTypes.func.isRequired,
+            getMyChannelMembers: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(params) {
         super(params);
 
@@ -102,13 +118,13 @@ export default class NeedsTeam extends React.Component {
         // Set up tracking for whether the window is active
         window.isActive = true;
         $(window).on('focus', () => {
-            AsyncClient.viewChannel();
+            this.props.actions.viewChannel(ChannelStore.getCurrentId());
             ChannelStore.resetCounts(ChannelStore.getCurrentId());
             ChannelStore.emitChange();
 
             window.isActive = true;
             if (new Date().getTime() - this.blurTime > UNREAD_CHECK_TIME_MILLISECONDS) {
-                AsyncClient.getMyChannelMembers().then(loadProfilesForSidebar);
+                this.props.actions.getMyChannelMembers(TeamStore.getCurrentId()).then(loadProfilesForSidebar);
             }
         });
 
@@ -116,7 +132,7 @@ export default class NeedsTeam extends React.Component {
             window.isActive = false;
             this.blurTime = new Date().getTime();
             if (UserStore.getCurrentUser()) {
-                AsyncClient.viewChannel('');
+                this.props.actions.viewChannel('');
             }
         });
 
@@ -216,16 +232,3 @@ export default class NeedsTeam extends React.Component {
         );
     }
 }
-
-NeedsTeam.propTypes = {
-    children: React.PropTypes.oneOfType([
-        React.PropTypes.arrayOf(React.PropTypes.element),
-        React.PropTypes.element
-    ]),
-    navbar: React.PropTypes.element,
-    sidebar: React.PropTypes.element,
-    team_sidebar: React.PropTypes.element,
-    center: React.PropTypes.element,
-    params: React.PropTypes.object,
-    user: React.PropTypes.object
-};

webapp/components/new_channel_flow.jsx

@@ -3,7 +3,6 @@
 
 import * as Utils from 'utils/utils.jsx';
 import TeamStore from 'stores/team_store.jsx';
-import UserStore from 'stores/user_store.jsx';
 import {cleanUpUrlable} from 'utils/url.jsx';
 
 import NewChannelModal from './new_channel_modal.jsx';
@@ -68,9 +67,8 @@ export default class NewChannelFlow extends React.Component {
             return;
         }
 
-        const cu = UserStore.getCurrentUser();
         const channel = {
-            team_id: cu.team_id,
+            team_id: TeamStore.getCurrentId(),
             name: this.state.channelName,
             display_name: this.state.channelDisplayName,
             purpose: this.state.channelPurpose,
@@ -82,7 +80,7 @@ export default class NewChannelFlow extends React.Component {
             channel,
             (data) => {
                 this.doOnModalExited = () => {
-                    browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + data.channel.name);
+                    browserHistory.push(TeamStore.getCurrentTeamRelativeUrl() + '/channels/' + data.name);
                 };
 
                 this.props.onModalDismissed();

webapp/components/post_view/index.js

@@ -0,0 +1,24 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {viewChannel} from 'mattermost-redux/actions/channels';
+
+import PostViewCache from './post_view_cache.jsx';
+
+function mapStateToProps(state, ownProps) {
+    return {
+        ...ownProps
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            viewChannel
+        }, dispatch)
+    };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(PostViewCache);

webapp/components/post_view/post_view_cache.jsx

@@ -5,13 +5,18 @@ import PostViewController from './post_view_controller.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
 import UserStore from 'stores/user_store.jsx';
-import * as AsyncClient from 'utils/async_client.jsx';
 
 import React from 'react';
 
 const MAXIMUM_CACHED_VIEWS = 5;
 
 export default class PostViewCache extends React.Component {
+    static propTypes = {
+        actions: React.PropTypes.shape({
+            viewChannel: React.PropTypes.func.isRequired
+        }).isRequired
+    }
+
     constructor(props) {
         super(props);
 
@@ -32,7 +37,7 @@ export default class PostViewCache extends React.Component {
 
     componentWillUnmount() {
         if (UserStore.getCurrentUser()) {
-            AsyncClient.viewChannel('', this.state.currentChannelId || '');
+            this.props.actions.viewChannel('', this.state.currentChannelId || '');
         }
         ChannelStore.removeChangeListener(this.onChannelChange);
     }

webapp/components/rename_channel_modal.jsx

@@ -2,6 +2,7 @@
 // See License.txt for license information.
 
 import ReactDOM from 'react-dom';
+import {browserHistory} from 'react-router/es6';
 import * as Utils from 'utils/utils.jsx';
 import Constants from 'utils/constants.jsx';
 import {cleanUpUrlable, getShortenedURL} from 'utils/url.jsx';
@@ -164,8 +165,10 @@ export class RenameChannelModal extends React.Component {
         }
 
         updateChannel(channel,
-            () => {
+            (data) => {
                 this.handleHide();
+                const team = TeamStore.get(data.team_id);
+                browserHistory.push('/' + team.name + '/channels/' + data.name);
             },
             (err) => {
                 this.setState({

webapp/components/sidebar.jsx

@@ -5,7 +5,7 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import NewChannelFlow from './new_channel_flow.jsx';
 import MoreDirectChannels from 'components/more_direct_channels';
-import MoreChannels from 'components/more_channels.jsx';
+import MoreChannels from 'components/more_channels';
 import SidebarHeader from './sidebar_header.jsx';
 import UnreadChannelIndicator from './unread_channel_indicator.jsx';
 import TutorialTip from './tutorial/tutorial_tip.jsx';

webapp/components/team_members_dropdown/index.js

@@ -5,6 +5,7 @@ import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 import {getUser} from 'mattermost-redux/actions/users';
 import {getTeamStats} from 'mattermost-redux/actions/teams';
+import {getChannelStats} from 'mattermost-redux/actions/channels';
 
 import TeamMembersDropdown from './team_members_dropdown.jsx';
 
@@ -18,7 +19,8 @@ function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
             getUser,
-            getTeamStats
+            getTeamStats,
+            getChannelStats
         }, dispatch)
     };
 }

webapp/components/team_members_dropdown/team_members_dropdown.jsx

@@ -10,7 +10,6 @@ import ChannelStore from 'stores/channel_store.jsx';
 import {removeUserFromTeam, updateTeamMemberRoles} from 'actions/team_actions.jsx';
 import {loadMyTeamMembers, updateActive} from 'actions/user_actions.jsx';
 
-import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
 import React from 'react';
@@ -23,7 +22,8 @@ export default class TeamMembersDropdown extends React.Component {
         teamMember: React.PropTypes.object.isRequired,
         actions: React.PropTypes.shape({
             getUser: React.PropTypes.func.isRequired,
-            getTeamStats: React.PropTypes.func.isRequired
+            getTeamStats: React.PropTypes.func.isRequired,
+            getChannelStats: React.PropTypes.func.isRequired
         }).isRequired
     }
 
@@ -88,7 +88,7 @@ export default class TeamMembersDropdown extends React.Component {
     handleMakeActive() {
         updateActive(this.props.user.id, true,
             () => {
-                AsyncClient.getChannelStats(ChannelStore.getCurrentId());
+                this.props.actions.getChannelStats(ChannelStore.getCurrentId());
                 this.props.actions.getTeamStats(this.props.teamMember.team_id);
             },
             (err) => {
@@ -100,7 +100,7 @@ export default class TeamMembersDropdown extends React.Component {
     handleMakeNotActive() {
         updateActive(this.props.user.id, false,
             () => {
-                AsyncClient.getChannelStats(ChannelStore.getCurrentId());
+                this.props.actions.getChannelStats(ChannelStore.getCurrentId());
                 this.props.actions.getTeamStats(this.props.teamMember.team_id);
             },
             (err) => {