PLT 6062 - Fixing Push Notifications (#418)

* PLT-6062 Don't show in-app notification if current channel

* PLT-6131 make drawer titles all caps

* PLT-6027 fix handle Push notifications for DM/GM

app/actions/views/root.js

@@ -47,20 +47,24 @@ export function clearNotification() {
 
 export function goToNotification(notification) {
     return async (dispatch, getState) => {
+        const state = getState();
         const {data} = notification;
-        let teamId = data.team_id;
+        const {currentTeamId, teams} = state.entities.teams;
+        const channelId = data.channel_id;
+
+        // if the notification does not have a team id is because its from a DM or GM
+        let teamId = data.team_id || currentTeamId;
+
         if (teamId) {
-            const {teams} = getState().entities.teams;
             await handleTeamChange(teams[teamId])(dispatch, getState);
-            loadChannelsIfNecessary(teamId)(dispatch, getState);
+            await loadChannelsIfNecessary(teamId)(dispatch, getState);
         } else {
             await selectFirstAvailableTeam()(dispatch, getState);
-            teamId = getState().entities.teams.currentTeamId;
+            teamId = currentTeamId;
         }
 
-        const channelId = data.channel_id;
         viewChannel(teamId, channelId)(dispatch, getState);
-        loadProfilesAndTeamMembersForDMSidebar(teamId)(dispatch, getState);
+        await loadProfilesAndTeamMembersForDMSidebar(teamId)(dispatch, getState);
         await handleSelectChannel(channelId)(dispatch, getState);
         goToChannelView()(dispatch, getState);
         markChannelAsRead(teamId, channelId)(dispatch, getState);

app/components/channel_drawer_list/channel_drawer_list.js

@@ -255,15 +255,14 @@ class ChannelDrawerList extends Component {
     };
 
     renderTitle = (styles, id, defaultMessage, action, bottomDivider) => {
+        const {formatMessage} = this.props.intl;
         return (
             <View>
                 {this.renderDivider(styles, 0)}
                 <View style={styles.titleContainer}>
-                    <FormattedText
-                        style={styles.title}
-                        id={id}
-                        defaultMessage={defaultMessage}
-                    />
+                    <Text style={styles.title}>
+                        {formatMessage({id, defaultMessage}).toUpperCase()}
+                    </Text>
                     {action && this.renderSectionAction(styles, action)}
                 </View>
                 {bottomDivider && this.renderDivider(styles, 16)}

app/components/push_notification/index.js

@@ -11,13 +11,14 @@ import {getUnreads} from 'mattermost-redux/selectors/entities/channels';
 import PushNotification from './push_notification';
 
 function mapStateToProps(state, ownProps) {
-    const {currentTeamId} = state.entities.teams;
+    const {currentTeamId, teams} = state.entities.teams;
     const {currentChannelId} = state.entities.channels;
 
     return {
         ...ownProps,
         currentTeamId,
         currentChannelId,
+        teams,
         ...getUnreads(state)
     };
 }

app/components/push_notification/push_notification.js

@@ -16,6 +16,7 @@ export default class PushNotification extends PureComponent {
     static propTypes = {
         currentTeamId: PropTypes.string,
         currentChannelId: PropTypes.string,
+        teams: PropTypes.object,
         actions: PropTypes.shape({
             goToNotification: PropTypes.func.isRequired,
             queueNotification: PropTypes.func.isRequired,
@@ -23,6 +24,10 @@ export default class PushNotification extends PureComponent {
         }).isRequired
     };
 
+    static defaultProps: {
+        teams: {}
+    };
+
     constructor(props) {
         super(props);
 
@@ -88,9 +93,9 @@ export default class PushNotification extends PureComponent {
     };
 
     onNotificationTapped = (notification) => {
-        const {currentTeamId, currentChannelId} = this.props;
+        const {currentTeamId, currentChannelId, teams} = this.props;
 
-        if (currentTeamId && currentChannelId) {
+        if (currentTeamId && currentChannelId && Object.keys(teams).length) {
             // this means that the store has the necessary data
             this.props.actions.goToNotification(notification);
         } else {
@@ -99,20 +104,23 @@ export default class PushNotification extends PureComponent {
     };
 
     handleInAppNotification = (notification) => {
-        const {message} = notification;
+        const {data, message} = notification;
+        const {currentChannelId} = this.props;
 
-        MessageBarManager.showAlert({
-            alertType: 'info',
-            avatar: icon,
-            avatarStyle: {borderRadius: 10, width: 20, height: 20},
-            message,
-            stylesheetInfo: {backgroundColor: changeOpacity('#000', 0.9)},
-            messageStyle: {color: 'white', fontSize: 13},
-            viewTopInset: 15,
-            viewBottomInset: 15,
-            duration: 5000,
-            onTapped: () => this.onNotificationTapped(notification)
-        });
+        if (data.channel_id !== currentChannelId) {
+            MessageBarManager.showAlert({
+                alertType: 'info',
+                avatar: icon,
+                avatarStyle: {borderRadius: 10, width: 20, height: 20},
+                message,
+                stylesheetInfo: {backgroundColor: changeOpacity('#000', 0.9)},
+                messageStyle: {color: 'white', fontSize: 13},
+                viewTopInset: 15,
+                viewBottomInset: 15,
+                duration: 5000,
+                onTapped: () => this.onNotificationTapped(notification)
+            });
+        }
     };
 
     render() {