app/javascript/flavours/glitch/features/notifications/components/column_settings.js

   1 import React from 'react';
   2 import PropTypes from 'prop-types';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import { FormattedMessage } from 'react-intl';
   5 import ClearColumnButton from './clear_column_button';
   6 import SettingToggle from './setting_toggle';
   7
   8 export default class ColumnSettings extends React.PureComponent {
   9
  10   static propTypes = {
  11     settings: ImmutablePropTypes.map.isRequired,
  12     pushSettings: ImmutablePropTypes.map.isRequired,
  13     onChange: PropTypes.func.isRequired,
  14     onClear: PropTypes.func.isRequired,
  15   };
  16
  17   onPushChange = (path, checked) => {
  18     this.props.onChange(['push', ...path], checked);
  19   }
  20
  21   render () {
  22     const { settings, pushSettings, onChange, onClear } = this.props;
  23
  24     const alertStr = <FormattedMessage id='notifications.column_settings.alert' defaultMessage='Desktop notifications' />;
  25     const showStr  = <FormattedMessage id='notifications.column_settings.show' defaultMessage='Show in column' />;
  26     const soundStr = <FormattedMessage id='notifications.column_settings.sound' defaultMessage='Play sound' />;
  27
  28     const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed');
  29     const pushStr = showPushSettings && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
  30     const pushMeta = showPushSettings && <FormattedMessage id='notifications.column_settings.push_meta' defaultMessage='This device' />;
  31
  32     return (
  33       <div>
  34         <div className='column-settings__row'>
  35           <ClearColumnButton onClick={onClear} />
  36         </div>
  37
  38         <div role='group' aria-labelledby='notifications-follow'>
  39           <span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
  40
  41           <div className='column-settings__row'>
  42             <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'follow']} onChange={onChange} label={alertStr} />
  43             {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'follow']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
  44             <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'follow']} onChange={onChange} label={showStr} />
  45             <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'follow']} onChange={onChange} label={soundStr} />
  46           </div>
  47         </div>
  48
  49         <div role='group' aria-labelledby='notifications-favourite'>
  50           <span id='notifications-favourite' className='column-settings__section'><FormattedMessage id='notifications.column_settings.favourite' defaultMessage='Favourites:' /></span>
  51
  52           <div className='column-settings__row'>
  53             <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'favourite']} onChange={onChange} label={alertStr} />
  54             {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'favourite']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
  55             <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'favourite']} onChange={onChange} label={showStr} />
  56             <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'favourite']} onChange={onChange} label={soundStr} />
  57           </div>
  58         </div>
  59
  60         <div role='group' aria-labelledby='notifications-mention'>
  61           <span id='notifications-mention' className='column-settings__section'><FormattedMessage id='notifications.column_settings.mention' defaultMessage='Mentions:' /></span>
  62
  63           <div className='column-settings__row'>
  64             <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'mention']} onChange={onChange} label={alertStr} />
  65             {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'mention']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
  66             <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'mention']} onChange={onChange} label={showStr} />
  67             <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'mention']} onChange={onChange} label={soundStr} />
  68           </div>
  69         </div>
  70
  71         <div role='group' aria-labelledby='notifications-reblog'>
  72           <span id='notifications-reblog' className='column-settings__section'><FormattedMessage id='notifications.column_settings.reblog' defaultMessage='Boosts:' /></span>
  73
  74           <div className='column-settings__row'>
  75             <SettingToggle prefix='notifications_desktop' settings={settings} settingPath={['alerts', 'reblog']} onChange={onChange} label={alertStr} />
  76             {showPushSettings && <SettingToggle prefix='notifications_push' settings={pushSettings} settingPath={['alerts', 'reblog']} meta={pushMeta} onChange={this.onPushChange} label={pushStr} />}
  77             <SettingToggle prefix='notifications' settings={settings} settingPath={['shows', 'reblog']} onChange={onChange} label={showStr} />
  78             <SettingToggle prefix='notifications' settings={settings} settingPath={['sounds', 'reblog']} onChange={onChange} label={soundStr} />
  79           </div>
  80         </div>
  81       </div>
  82     );
  83   }
  84
  85 }