mattermost-mobile/app/screens/channel_notification_preference/channel_notification_preference_base.js
Jyoti Patel b6920770f1
[GH-15185][MM-5973] Add Channel Settings > Notification Preferences. (#4730)
* Add Channel Settings > Notification Preferences.

Fixes #15185

* Make newly added strings mmjstool compatible.

mmjstool seems to be looking for specific patterns in AST like called with
`formatMessage` and `t()` [1]. Looks like `t()` is just for that purpose.

[1]: a83581379d/mmjstool/src/i18n_extract.js (L97):L100

* Pass only required props to NotificationPreference & ChannelNotificationPreference.

* Fix style issues/nits from code review.

* Use radio button for channel notifications on android, and checkmarks on iOS.

Also changes style according to figma spec.

* Fix missing prop error.

For some reason, `npm run fix` didn't catch this. But `npm run check` did during CircleCI.

* Fix missing i18n strings by passing strings through `t()`.

mmjstool really needs to be smarter to understand these types of cases.

* Address comments from UX code review.

* Remove remnant from merge conflict.

* Fix UI in iOS landscape mode.

* Use SafeArea view for ios landscape view

* Use paddingHorizontal for SafeArea view for iOS landscape mode
2020-09-12 00:53:29 -03:00

95 lines
3.3 KiB
JavaScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {PureComponent} from 'react';
import PropTypes from 'prop-types';
import {intlShape} from 'react-intl';
import {ViewTypes} from '@constants';
import {alertErrorWithFallback} from 'app/utils/general';
import {t} from '@utils/i18n';
import {preventDoubleTap} from 'app/utils/tap';
export default class ChannelNotificationPreferenceBase extends PureComponent {
static propTypes = {
actions: PropTypes.shape({
updateChannelNotifyProps: PropTypes.func.isRequired,
}),
channelId: PropTypes.string.isRequired,
isLandscape: PropTypes.bool.isRequired,
notifyProps: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
userId: PropTypes.string.isRequired,
};
static contextTypes = {
intl: intlShape.isRequired,
};
constructor(props) {
super(props);
this.state = {
notificationLevel: props.notifyProps?.push || ViewTypes.NotificationLevels.DEFAULT,
};
}
getItems = () => {
const {notificationLevel} = this.state;
return [{
id: t('channel_notifications.preference.global_default'),
defaultMessage: 'Global default (Mentions)',
value: ViewTypes.NotificationLevels.DEFAULT,
checked: notificationLevel === ViewTypes.NotificationLevels.DEFAULT,
}, {
id: t('channel_notifications.preference.all_activity'),
defaultMessage: 'For all activity',
value: ViewTypes.NotificationLevels.ALL,
checked: notificationLevel === ViewTypes.NotificationLevels.ALL,
}, {
id: t('channel_notifications.preference.only_mentions'),
defaultMessage: 'Only mentions and direct messages',
value: ViewTypes.NotificationLevels.MENTION,
checked: notificationLevel === ViewTypes.NotificationLevels.MENTION,
}, {
id: t('channel_notifications.preference.never'),
defaultMessage: 'Never',
value: ViewTypes.NotificationLevels.NONE,
checked: notificationLevel === ViewTypes.NotificationLevels.NONE,
}];
}
handlePress = preventDoubleTap(async (newNotificationLevel) => {
const {actions, channelId, userId} = this.props;
const {notificationLevel} = this.state;
if (newNotificationLevel === notificationLevel) {
// tapped on current selection.
return;
}
this.setState({
notificationLevel: newNotificationLevel,
});
const props = {push: newNotificationLevel};
const {error} = await actions.updateChannelNotifyProps(userId, channelId, props);
if (error) {
const {intl} = this.context;
alertErrorWithFallback(
intl,
error,
{
id: t('channel_notifications.preference.save_error'),
defaultMessage: "We couldn't save notification preference. Please check your connection and try again.",
},
);
// restore old value.
this.setState({
notificationLevel,
});
}
});
}