MM-39711 - Gekidou Settings Autoresponder functionality [2] (#6364)

app/screens/settings/notification_auto_responder/notification_auto_responder.tsx

@@ -1,17 +1,22 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useCallback, useMemo, useRef, useState} from 'react';
+import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {useIntl} from 'react-intl';
 import {View} from 'react-native';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context';
 
+import {updateMe} from '@actions/remote/user';
 import FloatingTextInput from '@components/floating_text_input_label';
 import FormattedText from '@components/formatted_text';
 import OptionItem from '@components/option_item';
 import {General} from '@constants';
+import {useServerUrl} from '@context/server';
 import {useTheme} from '@context/theme';
+import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
+import useNavButtonPressed from '@hooks/navigation_button_pressed';
 import {t} from '@i18n';
+import {popTopScreen, setButtons} from '@screens/navigation';
 import {changeOpacity, makeStyleSheetFromTheme, getKeyboardAppearanceFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 import {getNotificationProps} from '@utils/user';
@@ -27,6 +32,9 @@ const OOO = {
     id: t('notification_settings.auto_responder.default_message'),
     defaultMessage: 'Hello, I am out of office and unable to respond to messages.',
 };
+const SAVE_OOO_BUTTON_ID = 'notification_settings.auto_responder.save.button';
+
+const edges: Edge[] = ['left', 'right'];
 
 const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     return {
@@ -67,37 +75,73 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
     };
 });
 
-const edges: Edge[] = ['left', 'right'];
 type NotificationAutoResponderProps = {
+    componentId: string;
     currentUser: UserModel;
 }
-const NotificationAutoResponder = ({currentUser}: NotificationAutoResponderProps) => {
+const NotificationAutoResponder = ({currentUser, componentId}: NotificationAutoResponderProps) => {
     const theme = useTheme();
-    const autoresponderRef = useRef(null);
+    const serverUrl = useServerUrl();
     const intl = useIntl();
     const userNotifyProps = useMemo(() => getNotificationProps(currentUser), [currentUser.notifyProps]);
-
-    const [notifyProps, setNotifyProps] = useState<Partial<UserNotifyProps>>({
-        ...userNotifyProps,
-        auto_responder_active: (currentUser.status === General.OUT_OF_OFFICE && userNotifyProps.auto_responder_active) ? 'true' : 'false',
-        auto_responder_message: userNotifyProps.auto_responder_message || intl.formatMessage(OOO),
-    });
+    const [autoResponderActive, setAutoResponderActive] = useState((currentUser.status === General.OUT_OF_OFFICE && userNotifyProps.auto_responder_active) ? 'true' : 'false');
+    const [autoResponderMessage, setAutoResponderMessage] = useState(userNotifyProps.auto_responder_message || intl.formatMessage(OOO));
 
     const styles = getStyleSheet(theme);
 
+    const close = () => popTopScreen(componentId);
+
+    const saveButton = useMemo(() => {
+        return {
+            id: SAVE_OOO_BUTTON_ID,
+            enabled: false,
+            showAsAction: 'always' as const,
+            testID: 'notification_settings.auto_res.save.button',
+            color: theme.sidebarHeaderTextColor,
+            text: intl.formatMessage({id: 'settings.save', defaultMessage: 'Save'}),
+        };
+    }, [theme.sidebarHeaderTextColor]);
+
     const onAutoResponseToggle = useCallback((active: boolean) => {
-        setNotifyProps({
-            ...notifyProps,
-            auto_responder_active: `${active}`,
-        });
-    }, [notifyProps]);
+        setAutoResponderActive(`${active}`);
+    }, []);
 
     const onAutoResponseChangeText = useCallback((message: string) => {
-        setNotifyProps({
-            ...notifyProps,
-            auto_responder_message: message,
+        setAutoResponderMessage(message);
+    }, []);
+
+    const saveAutoResponder = useCallback(() => {
+        const notifyProps = {
+            ...userNotifyProps,
+            auto_responder_active: autoResponderActive,
+            auto_responder_message: autoResponderMessage,
+        } as unknown as UserNotifyProps;
+
+        updateMe(serverUrl, {
+            notify_props: notifyProps,
         });
-    }, [notifyProps]);
+        close();
+    }, [serverUrl, autoResponderActive, autoResponderMessage, userNotifyProps]);
+
+    useEffect(() => {
+        const updatedMsg = userNotifyProps?.auto_responder_message !== autoResponderMessage;
+        const enabling = currentUser.status !== General.OUT_OF_OFFICE && autoResponderActive === 'true';
+        const disabling = currentUser.status === General.OUT_OF_OFFICE && autoResponderActive === 'false';
+
+        const enabled = enabling || disabling || updatedMsg;
+
+        const buttons = {
+            rightButtons: [{
+                ...saveButton,
+                enabled,
+            }],
+        };
+        setButtons(componentId, buttons);
+    }, [autoResponderActive, autoResponderMessage, componentId, currentUser.status, userNotifyProps.auto_responder_message]);
+
+    useNavButtonPressed(SAVE_OOO_BUTTON_ID, componentId, saveAutoResponder, [saveAutoResponder]);
+
+    useAndroidHardwareBackHandler(componentId, close);
 
     return (
         <SafeAreaView
@@ -112,10 +156,10 @@ const NotificationAutoResponder = ({currentUser}: NotificationAutoResponderProps
                         label={intl.formatMessage({id: 'notification_settings.auto_responder.enabled', defaultMessage: 'Enabled'})}
                         action={onAutoResponseToggle}
                         type='toggle'
-                        selected={notifyProps.auto_responder_active === 'true'}
+                        selected={autoResponderActive === 'true'}
                     />
                 </View>
-                {notifyProps.auto_responder_active === 'true' && (
+                {autoResponderActive === 'true' && (
                     <FloatingTextInput
                         allowFontScaling={true}
                         autoCapitalize='none'
@@ -127,13 +171,12 @@ const NotificationAutoResponder = ({currentUser}: NotificationAutoResponderProps
                         onChangeText={onAutoResponseChangeText}
                         placeholder={intl.formatMessage(headerText)}
                         placeholderTextColor={changeOpacity(theme.centerChannelColor, 0.4)}
-                        ref={autoresponderRef}
                         returnKeyType='done'
                         style={styles.input}
                         textAlignVertical='top'
                         theme={theme}
                         underlineColorAndroid='transparent'
-                        value={notifyProps.auto_responder_message || ''}
+                        value={autoResponderMessage || ''}
                     />
                 )}
                 <FormattedText

assets/base/i18n/en.json

@@ -669,6 +669,7 @@
   "settings.display": "Display",
   "settings.display.militaryClock.save": "Save",
   "settings.notifications": "Notifications",
+  "settings.save": "Save",
   "snack.bar.favorited.channel": "This channel was favorited",
   "snack.bar.link.copied": "Link copied to clipboard",
   "snack.bar.message.copied": "Text copied to clipboard",