From f3b44c556017121e743a46140382e00492e2df8e Mon Sep 17 00:00:00 2001
From: Curtis ROck <curtis.rock@wirelessmessaging.com>
Date: Sat, 5 Sep 2020 21:16:14 -0500
Subject: [PATCH] Render toggle for chats audio notifications

---
 .../features/chats/components/audio_toggle.js | 61 +++++++++++++++++++
 .../features/chats/components/chat_panes.js   |  2 +
 2 files changed, 63 insertions(+)
 create mode 100644 app/soapbox/features/chats/components/audio_toggle.js

diff --git a/app/soapbox/features/chats/components/audio_toggle.js b/app/soapbox/features/chats/components/audio_toggle.js
new file mode 100644
index 000000000..5c1d82e33
--- /dev/null
+++ b/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>
+    );
+  }
+
+}
diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 1bd7167bd..876ff9666 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/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