Chats: allow toggling sound

app/soapbox/features/chats/components/chat-page/components/chat-page-settings.tsx

@@ -2,9 +2,11 @@ import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
+import { changeSetting } from 'soapbox/actions/settings';
 import List, { ListItem } from 'soapbox/components/list';
 import { Button, CardBody, CardTitle, Form, HStack, IconButton, Stack, Toggle } from 'soapbox/components/ui';
-import { useOwnAccount } from 'soapbox/hooks';
+import SettingToggle from 'soapbox/features/notifications/components/setting-toggle';
+import { useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
 import { useUpdateCredentials } from 'soapbox/queries/accounts';
 
 type FormData = {
@@ -14,8 +16,10 @@ type FormData = {
 
 const messages = defineMessages({
   title: { id: 'chat.page_settings.title', defaultMessage: 'Message Settings' },
+  preferences: { id: 'chat.page_settings.preferences', defaultMessage: 'Preferences' },
   privacy: { id: 'chat.page_settings.privacy', defaultMessage: 'Privacy' },
-  acceptingMessageLabel: { id: 'chat.page_settings.accepting_messages.label', defaultMessage: 'Allow users you follow to start a new chat with you' },
+  acceptingMessageLabel: { id: 'chat.page_settings.accepting_messages.label', defaultMessage: 'Allow users to start a new chat with you' },
+  playSoundsLabel: { id: 'chat.page_settings.play_sounds.label', defaultMessage: 'Play a sound when you receive a message' },
   submit: { id: 'chat.page_settings.submit', defaultMessage: 'Save' },
 });
 
@@ -23,6 +27,8 @@ const ChatPageSettings = () => {
   const account = useOwnAccount();
   const intl = useIntl();
   const history = useHistory();
+  const dispatch = useAppDispatch();
+  const settings = useSettings();
   const updateCredentials = useUpdateCredentials();
 
   const [data, setData] = useState<FormData>({
@@ -30,6 +36,10 @@ const ChatPageSettings = () => {
     accepts_chat_messages: account?.accepts_chat_messages,
   });
 
+  const onToggleChange = (key: string[], checked: boolean) => {
+    dispatch(changeSetting(key, checked, { showAlert: true }));
+  };
+
   const handleSubmit = (event: React.FormEvent) => {
     event.preventDefault();
 
@@ -49,6 +59,16 @@ const ChatPageSettings = () => {
       </HStack>
 
       <Form onSubmit={handleSubmit}>
+        <CardTitle title={intl.formatMessage(messages.preferences)} />
+
+        <List>
+          <ListItem
+            label={intl.formatMessage(messages.playSoundsLabel)}
+          >
+            <SettingToggle settings={settings} settingPath={['chats', 'sound']} onChange={onToggleChange} />
+          </ListItem>
+        </List>
+
         <CardTitle title={intl.formatMessage(messages.privacy)} />
 
         <CardBody>