Render toggle for chats audio notifications

app/soapbox/features/chats/components/audio_toggle.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { injectIntl, defineMessages } from 'react-intl';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import Icon from 'soapbox/components/icon';
+import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import SettingToggle from 'soapbox/features/notifications/components/setting_toggle';
+
+const messages = defineMessages({
+  switchToOn: { id: 'chats.audio_toggle_on', defaultMessage: 'Audio notification on' },
+  switchToOff: { id: 'chats.audio_toggle_off', defaultMessage: 'Audio notification off' },
+});
+
+const mapStateToProps = state => {
+  return {
+    settings: getSettings(state),
+  };
+};
+
+const mapDispatchToProps = (dispatch) => ({
+  toggleAudio(setting) {
+    dispatch(changeSetting(['chats', 'sound'], setting));
+  },
+});
+
+export default @connect(mapStateToProps, mapDispatchToProps)
+@injectIntl
+class AudioToggle extends React.PureComponent {
+
+  static propTypes = {
+    intl: PropTypes.object.isRequired,
+    settings: ImmutablePropTypes.map.isRequired,
+    toggleAudio: PropTypes.func,
+    showLabel: PropTypes.bool,
+  };
+
+  handleToggleAudio = () => {
+    this.props.toggleAudio(this.props.settings.get('chats', 'sound') === true ? false : true);
+  }
+
+  render() {
+    const { intl, settings, showLabel } = this.props;
+    let toggle = (
+      <SettingToggle settings={settings} settingPath={['chats', 'sound']} onChange={this.handleToggleAudio} icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }} ariaLabel={settings.get('chats', 'sound') === 'light' ? intl.formatMessage(messages.switchToOff) : intl.formatMessage(messages.switchToOn)} />
+    );
+
+    if (showLabel) {
+      toggle = (
+        <SettingToggle settings={settings} settingPath={['chats', 'sound']} onChange={this.handleToggleAudio} icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }} label={settings.get('chats', 'sound') === 'light' ? intl.formatMessage(messages.switchToOff) : intl.formatMessage(messages.switchToOn)} />
+      );
+    }
+
+    return (
+      <div className='audio-toggle react-toggle--mini'>
+        {toggle}
+      </div>
+    );
+  }
+
+}

app/soapbox/features/chats/components/chat_panes.js

@@ -11,6 +11,7 @@ import { makeGetChat } from 'soapbox/selectors';
 import { openChat, toggleMainWindow } from 'soapbox/actions/chats';
 import ChatWindow from './chat_window';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
+import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
 
 const addChatsToPanes = (state, panesData) => {
   const getChat = makeGetChat();
@@ -62,6 +63,7 @@ class ChatPanes extends ImmutablePureComponent {
           <button className='pane__title' onClick={this.handleMainWindowToggle}>
             <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
           </button>
+          <AudioToggle />
         </div>
         <div className='pane__content'>
           <ChatList