diff options
author | Elias Nahum <nahumhbl@gmail.com> | 2016-01-30 18:10:04 -0300 |
---|---|---|
committer | Elias Nahum <nahumhbl@gmail.com> | 2016-01-30 18:10:04 -0300 |
commit | 78314c7d4d1417fd42ab48cbe41d360f80915453 (patch) | |
tree | 7db4a466d880e106071dddea30c4dcc724c50393 /web/react/components/user_settings/user_settings_notifications.jsx | |
parent | 7ff7c864611590347cb6a230d31635ecabdc4f25 (diff) | |
download | chat-78314c7d4d1417fd42ab48cbe41d360f80915453.tar.gz chat-78314c7d4d1417fd42ab48cbe41d360f80915453.tar.bz2 chat-78314c7d4d1417fd42ab48cbe41d360f80915453.zip |
PLT-7: Refactoring frontend (chunk 6)
- User settings
Diffstat (limited to 'web/react/components/user_settings/user_settings_notifications.jsx')
-rw-r--r-- | web/react/components/user_settings/user_settings_notifications.jsx | 226 |
1 files changed, 189 insertions, 37 deletions
diff --git a/web/react/components/user_settings/user_settings_notifications.jsx b/web/react/components/user_settings/user_settings_notifications.jsx index f762405af..91a03eb70 100644 --- a/web/react/components/user_settings/user_settings_notifications.jsx +++ b/web/react/components/user_settings/user_settings_notifications.jsx @@ -10,6 +10,8 @@ import * as Client from '../../utils/client.jsx'; import * as AsyncClient from '../../utils/async_client.jsx'; import * as Utils from '../../utils/utils.jsx'; +import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl'; + function getNotificationsStateFromStores() { var user = UserStore.getCurrentUser(); var soundNeeded = !Utils.isBrowserFirefox(); @@ -73,7 +75,30 @@ function getNotificationsStateFromStores() { firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey}; } -export default class NotificationsTab extends React.Component { +const holders = defineMessages({ + desktop: { + id: 'user.settings.notifications.desktop', + defaultMessage: 'Send desktop notifications' + }, + desktopSounds: { + id: 'user.settings.notifications.desktopSounds', + defaultMessage: 'Desktop notification sounds' + }, + emailNotifications: { + id: 'user.settings.notifications.emailNotifications', + defaultMessage: 'Email notifications' + }, + wordsTrigger: { + id: 'user.settings.notifications.wordsTrigger', + defaultMessage: 'Words that trigger mentions' + }, + close: { + id: 'user.settings.notifications.close', + defaultMessage: 'Close' + } +}); + +class NotificationsTab extends React.Component { constructor(props) { super(props); @@ -198,6 +223,7 @@ export default class NotificationsTab extends React.Component { this.updateCustomMentionKeys(); } render() { + const {formatMessage} = this.props.intl; var serverError = null; if (this.state.serverError) { serverError = this.state.serverError; @@ -227,7 +253,10 @@ export default class NotificationsTab extends React.Component { checked={notifyActive[0]} onChange={this.handleNotifyRadio.bind(this, 'all')} /> - {'For all activity'} + <FormattedMessage + id='user.settings.notification.allActivity' + defaultMessage='For all activity' + /> </label> <br/> </div> @@ -238,7 +267,10 @@ export default class NotificationsTab extends React.Component { checked={notifyActive[1]} onChange={this.handleNotifyRadio.bind(this, 'mention')} /> - {'Only for mentions and direct messages'} + <FormattedMessage + id='user.settings.notifications.onlyMentions' + defaultMessage='Only for mentions and direct messages' + /> </label> <br/> </div> @@ -249,17 +281,27 @@ export default class NotificationsTab extends React.Component { checked={notifyActive[2]} onChange={this.handleNotifyRadio.bind(this, 'none')} /> - {'Never'} + <FormattedMessage + id='user.settings.notifications.never' + defaultMessage='Never' + /> </label> </div> </div> ); - const extraInfo = <span>{'Desktop notifications are available on Firefox, Safari, and Chrome.'}</span>; + const extraInfo = ( + <span> + <FormattedMessage + id='user.settings.notifications.info' + defaultMessage='Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.' + /> + </span> + ); desktopSection = ( <SettingItemMax - title='Send desktop notifications' + title={formatMessage(holders.desktop)} extraInfo={extraInfo} inputs={inputs} submit={this.handleSubmit} @@ -270,11 +312,26 @@ export default class NotificationsTab extends React.Component { } else { let describe = ''; if (this.state.notifyLevel === 'mention') { - describe = 'Only for mentions and direct messages'; + describe = ( + <FormattedMessage + id='user.settings.notifications.onlyMentions' + defaultMessage='Only for mentions and direct messages' + /> + ); } else if (this.state.notifyLevel === 'none') { - describe = 'Never'; + describe = ( + <FormattedMessage + id='user.settings.notifications.never' + defaultMessage='Never' + /> + ); } else { - describe = 'For all activity'; + describe = ( + <FormattedMessage + id='user.settings.notification.allActivity' + defaultMessage='For all activity' + /> + ); } handleUpdateDesktopSection = function updateDesktopSection() { @@ -283,7 +340,7 @@ export default class NotificationsTab extends React.Component { desktopSection = ( <SettingItemMin - title='Send desktop notifications' + title={formatMessage(holders.desktop)} describe={describe} updateSection={handleUpdateDesktopSection} /> @@ -311,7 +368,10 @@ export default class NotificationsTab extends React.Component { checked={soundActive[0]} onChange={this.handleSoundRadio.bind(this, 'true')} /> - {'On'} + <FormattedMessage + id='user.settings.notifications.on' + defaultMessage='On' + /> </label> <br/> </div> @@ -322,18 +382,28 @@ export default class NotificationsTab extends React.Component { checked={soundActive[1]} onChange={this.handleSoundRadio.bind(this, 'false')} /> - {'Off'} + <FormattedMessage + id='user.settings.notifications.off' + defaultMessage='Off' + /> </label> <br/> </div> </div> ); - const extraInfo = <span>{'Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.'}</span>; + const extraInfo = ( + <span> + <FormattedMessage + id='user.settings.notifications.info' + defaultMessage='Desktop notification sounds are available on Firefox, Safari, Chrome, Internet Explorer, and Edge.' + /> + </span> + ); soundSection = ( <SettingItemMax - title='Desktop notification sounds' + title={formatMessage(holders.desktopSounds)} extraInfo={extraInfo} inputs={inputs} submit={this.handleSubmit} @@ -344,11 +414,26 @@ export default class NotificationsTab extends React.Component { } else { let describe = ''; if (!this.state.soundNeeded) { - describe = 'Please configure notification sounds in your browser settings'; + describe = ( + <FormattedMessage + id='user.settings.notification.soundConfig' + defaultMessage='Please configure notification sounds in your browser settings' + /> + ); } else if (this.state.enableSound === 'false') { - describe = 'Off'; + describe = ( + <FormattedMessage + id='user.settings.notifications.off' + defaultMessage='Off' + /> + ); } else { - describe = 'On'; + describe = ( + <FormattedMessage + id='user.settings.notifications.on' + defaultMessage='On' + /> + ); } handleUpdateSoundSection = function updateSoundSection() { @@ -357,7 +442,7 @@ export default class NotificationsTab extends React.Component { soundSection = ( <SettingItemMin - title='Desktop notification sounds' + title={formatMessage(holders.desktopSounds)} describe={describe} updateSection={handleUpdateSoundSection} disableOpen = {!this.state.soundNeeded} @@ -386,7 +471,10 @@ export default class NotificationsTab extends React.Component { checked={emailActive[0]} onChange={this.handleEmailRadio.bind(this, 'true')} /> - {'On'} + <FormattedMessage + id='user.settings.notifications.on' + defaultMessage='On' + /> </label> <br/> </div> @@ -397,17 +485,28 @@ export default class NotificationsTab extends React.Component { checked={emailActive[1]} onChange={this.handleEmailRadio.bind(this, 'false')} /> - {'Off'} + <FormattedMessage + id='user.settings.notifications.off' + defaultMessage='Off' + /> </label> <br/> </div> - <div><br/>{'Email notifications are sent for mentions and direct messages after you’ve been offline for more than 60 seconds or away from ' + global.window.mm_config.SiteName + ' for more than 5 minutes.'}</div> + <div><br/> + <FormattedMessage + id='user.settings.notifications.emailInfo' + defaultMessage='Email notifications are sent for mentions and direct messages after you’ve been offline for more than 60 seconds or away from {siteName} for more than 5 minutes.' + values={{ + siteName: global.window.mm_config.SiteName + }} + /> + </div> </div> ); emailSection = ( <SettingItemMax - title='Email notifications' + title={formatMessage(holders.emailNotifications)} inputs={inputs} submit={this.handleSubmit} server_error={serverError} @@ -417,9 +516,19 @@ export default class NotificationsTab extends React.Component { } else { let describe = ''; if (this.state.enableEmail === 'false') { - describe = 'Off'; + describe = ( + <FormattedMessage + id='user.settings.notifications.off' + defaultMessage='Off' + /> + ); } else { - describe = 'On'; + describe = ( + <FormattedMessage + id='user.settings.notifications.on' + defaultMessage='On' + /> + ); } handleUpdateEmailSection = function updateEmailSection() { @@ -428,7 +537,7 @@ export default class NotificationsTab extends React.Component { emailSection = ( <SettingItemMin - title='Email notifications' + title={formatMessage(holders.emailNotifications)} describe={describe} updateSection={handleUpdateEmailSection} /> @@ -459,7 +568,13 @@ export default class NotificationsTab extends React.Component { checked={this.state.firstNameKey} onChange={handleUpdateFirstNameKey} /> - {'Your case sensitive first name "' + user.first_name + '"'} + <FormattedMessage + id='user.settings.notifications.sensitiveName' + defaultMessage='Your case sensitive first name "{first_name}"' + values={{ + first_name: user.first_name + }} + /> </label> </div> </div> @@ -478,7 +593,13 @@ export default class NotificationsTab extends React.Component { checked={this.state.usernameKey} onChange={handleUpdateUsernameKey} /> - {'Your non-case sensitive username "' + user.username + '"'} + <FormattedMessage + id='user.settings.notifications.sensitiveUsername' + defaultMessage='Your non-case sensitive username "{username}"' + values={{ + username: user.username + }} + /> </label> </div> </div> @@ -496,7 +617,13 @@ export default class NotificationsTab extends React.Component { checked={this.state.mentionKey} onChange={handleUpdateMentionKey} /> - {'Your username mentioned "@' + user.username + '"'} + <FormattedMessage + id='user.settings.notifications.usernameMention' + defaultMessage='Your username mentioned "@{username}"' + values={{ + username: user.username + }} + /> </label> </div> </div> @@ -514,7 +641,10 @@ export default class NotificationsTab extends React.Component { checked={this.state.allKey} onChange={handleUpdateAllKey} /> - {'Team-wide mentions "@all"'} + <FormattedMessage + id='user.settings.notifications.teamWide' + defaultMessage='Team-wide mentions "@all"' + /> </label> </div> </div> @@ -532,7 +662,10 @@ export default class NotificationsTab extends React.Component { checked={this.state.channelKey} onChange={handleUpdateChannelKey} /> - {'Channel-wide mentions "@channel"'} + <FormattedMessage + id='user.settings.notifications.channelWide' + defaultMessage='Channel-wide mentions "@channel"' + /> </label> </div> </div> @@ -548,7 +681,10 @@ export default class NotificationsTab extends React.Component { checked={this.state.customKeysChecked} onChange={this.updateCustomMentionKeys} /> - {'Other non-case sensitive words, separated by commas:'} + <FormattedMessage + id='user.settings.notifications.sensitiveWords' + defaultMessage='Other non-case sensitive words, separated by commas:' + /> </label> </div> <input @@ -563,7 +699,7 @@ export default class NotificationsTab extends React.Component { keysSection = ( <SettingItemMax - title='Words that trigger mentions' + title={formatMessage(holders.wordsTrigger)} inputs={inputs} submit={this.handleSubmit} server_error={serverError} @@ -601,7 +737,12 @@ export default class NotificationsTab extends React.Component { if (describe.length > 0) { describe = describe.substring(0, describe.length - 2); } else { - describe = 'No words configured'; + describe = ( + <FormattedMessage + id='user.settings.notifications.noWords' + defaultMessage='No words configured' + /> + ); } handleUpdateKeysSection = function updateKeysSection() { @@ -610,7 +751,7 @@ export default class NotificationsTab extends React.Component { keysSection = ( <SettingItemMin - title='Words that trigger mentions' + title={formatMessage(holders.wordsTrigger)} describe={describe} updateSection={handleUpdateKeysSection} /> @@ -624,7 +765,7 @@ export default class NotificationsTab extends React.Component { type='button' className='close' data-dismiss='modal' - aria-label='Close' + aria-label={formatMessage(holders.close)} onClick={this.props.closeModal} > <span aria-hidden='true'>{'×'}</span> @@ -637,14 +778,22 @@ export default class NotificationsTab extends React.Component { className='modal-back' onClick={this.props.collapseModal} /> - {'Notification Settings'} + <FormattedMessage + id='user.settings.notifications.title' + defaultMessage='Notification Settings' + /> </h4> </div> <div ref='wrapper' className='user-settings' > - <h3 className='tab-header'>{'Notifications'}</h3> + <h3 className='tab-header'> + <FormattedMessage + id='user.settings.notifications.header' + defaultMessage='Notifications' + /> + </h3> <div className='divider-dark first'/> {desktopSection} <div className='divider-light'/> @@ -667,6 +816,7 @@ NotificationsTab.defaultProps = { activeTab: '' }; NotificationsTab.propTypes = { + intl: intlShape.isRequired, user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, @@ -675,3 +825,5 @@ NotificationsTab.propTypes = { closeModal: React.PropTypes.func.isRequired, collapseModal: React.PropTypes.func.isRequired }; + +export default injectIntl(NotificationsTab);
\ No newline at end of file |