From 3413f37d8c1e08971fa121b89b673645d9ba285a Mon Sep 17 00:00:00 2001 From: Jeremy Kahn Date: Fri, 28 Jul 2023 09:50:03 -0500 Subject: [PATCH] feat(typing-indicator): add setting to disable typing indicator --- src/Bootstrap.test.tsx | 1 + src/Bootstrap.tsx | 1 + src/components/MessageForm/MessageForm.tsx | 13 +++- src/components/Room/Room.tsx | 9 +-- src/components/Room/useRoom.ts | 5 +- src/contexts/SettingsContext.ts | 1 + src/models/settings.ts | 1 + src/pages/Settings/Settings.tsx | 81 +++++++++++++++------- src/test-utils/stubs/settingsContext.ts | 1 + 9 files changed, 81 insertions(+), 32 deletions(-) diff --git a/src/Bootstrap.test.tsx b/src/Bootstrap.test.tsx index 2fda0f4..d3a87a9 100644 --- a/src/Bootstrap.test.tsx +++ b/src/Bootstrap.test.tsx @@ -57,6 +57,7 @@ test('persists user settings if none were already persisted', async () => { customUsername: '', playSoundOnNewMessage: true, showNotificationOnNewMessage: true, + showActiveTypingStatus: true, }) }) diff --git a/src/Bootstrap.tsx b/src/Bootstrap.tsx index c8399d5..cecd21e 100644 --- a/src/Bootstrap.tsx +++ b/src/Bootstrap.tsx @@ -43,6 +43,7 @@ function Bootstrap({ colorMode: 'dark', playSoundOnNewMessage: true, showNotificationOnNewMessage: true, + showActiveTypingStatus: true, }) const { userId } = userSettings diff --git a/src/components/MessageForm/MessageForm.tsx b/src/components/MessageForm/MessageForm.tsx index 6690942..9f2a869 100644 --- a/src/components/MessageForm/MessageForm.tsx +++ b/src/components/MessageForm/MessageForm.tsx @@ -1,6 +1,7 @@ import { KeyboardEvent, SyntheticEvent, + useContext, useEffect, useRef, useState, @@ -12,6 +13,8 @@ import Fab from '@mui/material/Fab' import ArrowUpward from '@mui/icons-material/ArrowUpward' import { messageCharacterSizeLimit } from 'config/messaging' +import { SettingsContext } from 'contexts/SettingsContext' +import classNames from 'classnames' interface MessageFormProps { onMessageSubmit: (message: string) => void @@ -24,6 +27,8 @@ export const MessageForm = ({ onMessageChange, isMessageSending, }: MessageFormProps) => { + const settingsContext = useContext(SettingsContext) + const { showActiveTypingStatus } = settingsContext.getUserSettings() const textFieldRef = useRef(null) const [textMessage, setTextMessage] = useState('') @@ -71,7 +76,13 @@ export const MessageForm = ({ } return ( -
+ - + {showActiveTypingStatus ? : null} )} diff --git a/src/components/Room/useRoom.ts b/src/components/Room/useRoom.ts index 97e7980..7ed8915 100644 --- a/src/components/Room/useRoom.ts +++ b/src/components/Room/useRoom.ts @@ -66,6 +66,7 @@ export function useRoom( } = useContext(ShellContext) const settingsContext = useContext(SettingsContext) + const { showActiveTypingStatus } = settingsContext.getUserSettings() const [isMessageSending, setIsMessageSending] = useState(false) const [messageLog, _setMessageLog] = useState>( [] @@ -164,8 +165,10 @@ export function useRoom( ) useEffect(() => { + if (!showActiveTypingStatus) return + sendTypingStatusChange({ isTyping }) - }, [isTyping, sendTypingStatusChange]) + }, [isTyping, sendTypingStatusChange, showActiveTypingStatus]) useEffect(() => { return () => { diff --git a/src/contexts/SettingsContext.ts b/src/contexts/SettingsContext.ts index b3917c8..fe4a2e9 100644 --- a/src/contexts/SettingsContext.ts +++ b/src/contexts/SettingsContext.ts @@ -15,5 +15,6 @@ export const SettingsContext = createContext({ colorMode: 'dark', playSoundOnNewMessage: true, showNotificationOnNewMessage: true, + showActiveTypingStatus: true, }), }) diff --git a/src/models/settings.ts b/src/models/settings.ts index 2b8e47e..2a8c24b 100644 --- a/src/models/settings.ts +++ b/src/models/settings.ts @@ -4,4 +4,5 @@ export interface UserSettings { customUsername: string playSoundOnNewMessage: boolean showNotificationOnNewMessage: boolean + showActiveTypingStatus: boolean } diff --git a/src/pages/Settings/Settings.tsx b/src/pages/Settings/Settings.tsx index 7257b9a..a6ff906 100644 --- a/src/pages/Settings/Settings.tsx +++ b/src/pages/Settings/Settings.tsx @@ -6,6 +6,7 @@ import Divider from '@mui/material/Divider' import Switch from '@mui/material/Switch' import FormGroup from '@mui/material/FormGroup' import FormControlLabel from '@mui/material/FormControlLabel' +import Paper from '@mui/material/Paper' import { NotificationService } from 'services/Notification' import { ShellContext } from 'contexts/ShellContext' @@ -28,8 +29,11 @@ export const Settings = ({ userId }: SettingsProps) => { setIsDeleteSettingsConfirmDiaglogOpen, ] = useState(false) const [, setIsNotificationPermissionDetermined] = useState(false) - const { playSoundOnNewMessage, showNotificationOnNewMessage } = - getUserSettings() + const { + playSoundOnNewMessage, + showNotificationOnNewMessage, + showActiveTypingStatus, + } = getUserSettings() const persistedStorage = getPersistedStorage() @@ -61,6 +65,13 @@ export const Settings = ({ userId }: SettingsProps) => { updateUserSettings({ showNotificationOnNewMessage }) } + const handleShowActiveTypingStatusChange = ( + _event: ChangeEvent, + showActiveTypingStatus: boolean + ) => { + updateUserSettings({ showActiveTypingStatus }) + } + const handleDeleteSettingsClick = () => { setIsDeleteSettingsConfirmDiaglogOpen(true) } @@ -88,30 +99,48 @@ export const Settings = ({ userId }: SettingsProps) => { > Chat - When a message is received in the background: - - - } - label="Play a sound" - /> - - } - label="Show a notification" - /> - + + When a message is received in the background: + + + } + label="Play a sound" + /> + + } + label="Show a notification" + /> + + + + + + } + label="Show active typing indicators" + /> + + ({})}> + Disabling this will also hide your active typing status from others. + +