RN-349 Mark channel as read when switching teams and opening the app (#953)

* RN-349 Mark current channel as read when opening the app

* RN-349 Mark channels as read when switching teams

* Moved markChannelAsRead into handleTeamChange action

app/actions/views/select_team.js

@@ -3,8 +3,10 @@
 
 import {batchActions} from 'redux-batched-actions';
 
+import {markChannelAsRead, viewChannel} from 'mattermost-redux/actions/channels';
 import {ChannelTypes, TeamTypes} from 'mattermost-redux/action_types';
 import EventEmitter from 'mattermost-redux/utils/event_emitter';
+import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
 
 import {NavigationTypes} from 'app/constants';
 
@@ -12,12 +14,12 @@ import {setChannelDisplayName} from './channel';
 
 export function handleTeamChange(team, selectChannel = true) {
     return async (dispatch, getState) => {
-        const {currentTeamId} = getState().entities.teams;
+        const state = getState();
+        const {currentTeamId} = state.entities.teams;
         if (currentTeamId === team.id) {
             return;
         }
 
-        const state = getState();
         const actions = [
             setChannelDisplayName(''),
             {type: TeamTypes.SELECT_TEAM, data: team.id}
@@ -26,6 +28,10 @@ export function handleTeamChange(team, selectChannel = true) {
         if (selectChannel) {
             const lastChannelId = state.views.team.lastChannelForTeam[team.id] || '';
             actions.push({type: ChannelTypes.SELECT_CHANNEL, data: lastChannelId});
+
+            const currentChannelId = getCurrentChannelId(state);
+            viewChannel(lastChannelId, currentChannelId)(dispatch, getState);
+            markChannelAsRead(lastChannelId, currentChannelId)(dispatch, getState);
         }
 
         dispatch(batchActions(actions), getState);

app/components/channel_drawer/teams_list/index.js

@@ -4,8 +4,6 @@
 import {bindActionCreators} from 'redux';
 import {connect} from 'react-redux';
 
-import {markChannelAsRead} from 'mattermost-redux/actions/channels';
-import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentUrl} from 'mattermost-redux/selectors/entities/general';
 import {getCurrentTeamId, getJoinableTeams, getMyTeams, getTeamMemberships} from 'mattermost-redux/selectors/entities/teams';
 import {getCurrentUser} from 'mattermost-redux/selectors/entities/users';
@@ -30,7 +28,6 @@ function mapStateToProps(state, ownProps) {
     return {
         canCreateTeams: false,
         joinableTeams: getJoinableTeams(state),
-        currentChannelId: getCurrentChannelId(state),
         currentTeamId: getCurrentTeamId(state),
         currentUrl: removeProtocol(getCurrentUrl(state)),
         teams: getMyTeams(state).sort(sortTeams.bind(null, (user.locale))),
@@ -43,8 +40,7 @@ function mapStateToProps(state, ownProps) {
 function mapDispatchToProps(dispatch) {
     return {
         actions: bindActionCreators({
-            handleTeamChange,
-            markChannelAsRead
+            handleTeamChange
         }, dispatch)
     };
 }

app/components/channel_drawer/teams_list/teams_list.js

@@ -4,7 +4,6 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import {
-    InteractionManager,
     FlatList,
     Platform,
     Text,
@@ -23,12 +22,10 @@ import {changeOpacity, makeStyleSheetFromTheme} from 'app/utils/theme';
 class TeamsList extends PureComponent {
     static propTypes = {
         actions: PropTypes.shape({
-            handleTeamChange: PropTypes.func.isRequired,
-            markChannelAsRead: PropTypes.func.isRequired
+            handleTeamChange: PropTypes.func.isRequired
         }).isRequired,
         canCreateTeams: PropTypes.bool.isRequired,
         closeChannelDrawer: PropTypes.func.isRequired,
-        currentChannelId: PropTypes.string,
         currentTeamId: PropTypes.string.isRequired,
         currentUrl: PropTypes.string.isRequired,
         intl: intlShape.isRequired,
@@ -48,17 +45,13 @@ class TeamsList extends PureComponent {
     }
 
     selectTeam = (team) => {
-        const {actions, closeChannelDrawer, currentChannelId, currentTeamId} = this.props;
+        const {actions, closeChannelDrawer, currentTeamId} = this.props;
         if (team.id === currentTeamId) {
             closeChannelDrawer();
         } else {
             actions.handleTeamChange(team);
 
             closeChannelDrawer();
-
-            InteractionManager.runAfterInteractions(() => {
-                actions.markChannelAsRead(currentChannelId);
-            });
         }
     };
 

app/screens/channel/channel.js

@@ -34,12 +34,14 @@ class Channel extends PureComponent {
             connection: PropTypes.func.isRequired,
             loadChannelsIfNecessary: PropTypes.func.isRequired,
             loadProfilesAndTeamMembersForDMSidebar: PropTypes.func.isRequired,
+            markChannelAsRead: PropTypes.func.isRequired,
             selectFirstAvailableTeam: PropTypes.func.isRequired,
             selectInitialChannel: PropTypes.func.isRequired,
             initWebSocket: PropTypes.func.isRequired,
             closeWebSocket: PropTypes.func.isRequired,
             startPeriodicStatusUpdates: PropTypes.func.isRequired,
-            stopPeriodicStatusUpdates: PropTypes.func.isRequired
+            stopPeriodicStatusUpdates: PropTypes.func.isRequired,
+            viewChannel: PropTypes.func.isRequired
         }).isRequired,
         intl: intlShape.isRequired,
         navigator: PropTypes.object,
@@ -69,6 +71,12 @@ class Channel extends PureComponent {
         } catch (error) {
             // We don't care about the error
         }
+
+        // Mark current channel as read when opening app while logged in
+        if (this.props.currentChannelId) {
+            this.props.actions.markChannelAsRead(this.props.currentChannelId);
+            this.props.actions.viewChannel(this.props.currentChannelId);
+        }
     }
 
     componentWillReceiveProps(nextProps) {

app/screens/channel/index.js

@@ -14,6 +14,7 @@ import {selectFirstAvailableTeam} from 'app/actions/views/select_team';
 import {getStatusBarHeight} from 'app/selectors/device';
 import {getTheme} from 'app/selectors/preferences';
 
+import {viewChannel, markChannelAsRead} from 'mattermost-redux/actions/channels';
 import {startPeriodicStatusUpdates, stopPeriodicStatusUpdates} from 'mattermost-redux/actions/users';
 import {getCurrentChannelId} from 'mattermost-redux/selectors/entities/channels';
 import {getCurrentTeamId} from 'mattermost-redux/selectors/entities/teams';
@@ -46,12 +47,14 @@ function mapDispatchToProps(dispatch) {
             connection,
             loadChannelsIfNecessary,
             loadProfilesAndTeamMembersForDMSidebar,
+            markChannelAsRead,
             selectFirstAvailableTeam,
             selectInitialChannel,
             initWebSocket,
             closeWebSocket,
             startPeriodicStatusUpdates,
-            stopPeriodicStatusUpdates
+            stopPeriodicStatusUpdates,
+            viewChannel
         }, dispatch)
     };
 }