From 820e7e82ac2c1533db84e5a84cee1945409ded76 Mon Sep 17 00:00:00 2001
From: Avinash Lingaloo <>
Date: Mon, 4 Oct 2021 09:47:07 +0400
Subject: [PATCH] Fix - Custom Status - Error

---
 .../components/custom_status/custom_label.tsx |   1 +
 .../components/custom_status/index.tsx        |  15 +-
 app/screens/home/account/index.tsx            | 157 ++++++++++--------
 assets/base/i18n/en.json                      |   2 +-
 4 files changed, 100 insertions(+), 75 deletions(-)

diff --git a/app/screens/home/account/components/custom_status/custom_label.tsx b/app/screens/home/account/components/custom_status/custom_label.tsx
index 7d25c33709..b8f40c4a70 100644
--- a/app/screens/home/account/components/custom_status/custom_label.tsx
+++ b/app/screens/home/account/components/custom_status/custom_label.tsx
@@ -85,6 +85,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
         },
         retryMessage: {
             color: theme.errorTextColor,
+            paddingBottom: 25,
         },
     };
 });
diff --git a/app/screens/home/account/components/custom_status/index.tsx b/app/screens/home/account/components/custom_status/index.tsx
index 8d98954e43..2e7e34eb51 100644
--- a/app/screens/home/account/components/custom_status/index.tsx
+++ b/app/screens/home/account/components/custom_status/index.tsx
@@ -1,12 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import React, {useState} from 'react';
+import React, {useEffect, useState} from 'react';
 import {useIntl} from 'react-intl';
+import {DeviceEventEmitter} from 'react-native';
 
 import {unsetCustomStatus} from '@actions/remote/user';
 import DrawerItem from '@components/drawer_item';
 import {Screens} from '@constants';
+import {SET_CUSTOM_STATUS_FAILURE} from '@constants/custom_status';
 import {useServerUrl} from '@context/server_url';
 import {useTheme} from '@context/theme';
 import {showModal} from '@screens/navigation';
@@ -39,6 +41,16 @@ const CustomStatus = ({config, currentUser, database}: CustomStatusProps) => {
     const isCustomStatusExpirySupported = checkCustomStatusExpiry(config);
     const isCustomStatusExpired = checkCustomStatusIsExpired(currentUser);
 
+    useEffect(() => {
+        const onSetCustomStatusError = () => {
+            setShowRetryMessage(true);
+        };
+
+        const listener = DeviceEventEmitter.addListener(SET_CUSTOM_STATUS_FAILURE, onSetCustomStatusError);
+
+        return () => listener.remove();
+    }, []);
+
     if (!isCustomStatusEnabled) {
         return null;
     }
@@ -61,6 +73,7 @@ const CustomStatus = ({config, currentUser, database}: CustomStatusProps) => {
 
     const goToCustomStatusScreen = () => {
         showModal(Screens.CUSTOM_STATUS, intl.formatMessage({id: 'mobile.routes.custom_status', defaultMessage: 'Set a Status'}));
+        setShowRetryMessage(false);
     };
 
     return (
diff --git a/app/screens/home/account/index.tsx b/app/screens/home/account/index.tsx
index b891296fba..f1e5ceba30 100644
--- a/app/screens/home/account/index.tsx
+++ b/app/screens/home/account/index.tsx
@@ -5,7 +5,7 @@ import {withDatabase} from '@nozbe/watermelondb/DatabaseProvider';
 import withObservables from '@nozbe/with-observables';
 import {useRoute} from '@react-navigation/native';
 import React, {useCallback, useEffect, useState} from 'react';
-import {StyleSheet, Text, TextStyle, View} from 'react-native';
+import {ScrollView, StyleSheet, Text, TextStyle, View} from 'react-native';
 import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated';
 import {SafeAreaView} from 'react-native-safe-area-context';
 import {of as of$} from 'rxjs';
@@ -38,6 +38,11 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
             flex: 1,
             backgroundColor: theme.sidebarBg,
         },
+        animatedView: {
+            flex: 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+        },
         body: {
             backgroundColor: theme.centerChannelBg,
             width: '100%',
@@ -177,80 +182,86 @@ const AccountScreen = ({config, currentUser, database}: AccountScreenProps) => {
 
     return (
         <SafeAreaView style={styles.container}>
-            <Animated.View
-                onLayout={onLayout}
-                style={[{flex: 1, justifyContent: 'center', alignItems: 'center'}, animated]}
+            <ScrollView
+                contentContainerStyle={styles.container}
+                alwaysBounceVertical={false}
             >
-                <View
-                    style={styles.upperBody}
+                <Animated.View
+                    onLayout={onLayout}
+                    style={[styles.animatedView, animated]}
                 >
-                    <ProfilePicture
-                        size={120}
-                        iconSize={28}
-                        showStatus={true}
-                        author={currentUser}
-                        testID={'account.profile_picture'}
-                        statusStyle={styles.statusStyle}
-                        statusSize={24}
-                    />
-                    <Text style={styles.textFullName}>{title}</Text>
-                    <Text style={styles.textUserName}>{`${userName}`}</Text>
-                </View>
-                <View style={styles.body}>
-                    <UserPresence
-                        currentUser={currentUser}
-                        database={database}
-                        serverUrl={serverUrl}
-                        styles={{menuLabel: styles.menuLabel}}
-                        theme={theme}
-                    />
-                    <CustomStatus
-                        config={config}
-                        currentUser={currentUser}
-                        database={database}
-                    />
-                    <View style={styles.divider}/>
-                    <DrawerItem
-                        testID='account.your_profile.action'
-                        labelComponent={getLabelComponent(t('account.your_profile'), 'Your Profile')}
-                        iconName='account-outline'
-                        onPress={goToSavedMessages}
-                        separator={false}
-                        theme={theme}
-                    />
-                    <DrawerItem
-                        testID='account.saved_messages.action'
-                        labelComponent={getLabelComponent(t('account.saved_messages'), 'Saved Messages')}
-                        iconName='bookmark-outline'
-                        onPress={goToSavedMessages}
-                        separator={false}
-                        theme={theme}
-                    />
-                    <DrawerItem
-                        testID='account.settings.action'
-                        labelComponent={getLabelComponent(t('account.settings'), 'Settings')}
-                        iconName='settings-outline'
-                        onPress={goToSavedMessages}
-                        separator={true}
-                        theme={theme}
-                    />
-                    <DrawerItem
-                        testID='account.logout.action'
-                        labelComponent={getLabelComponent(t('account.logout'), 'Log out', {color: theme.dndIndicator})}
-                        iconName='exit-to-app'
-                        isDestructor={true}
-                        onPress={goToSavedMessages}
-                        separator={false}
-                        theme={theme}
-                    />
-                    <FormattedText
-                        id={t('account.logout_from')}
-                        defaultMessage={'Log out of {serverName}'}
-                        values={{serverName}}
-                        style={styles.logOutFrom}
-                    />
-                </View>
-            </Animated.View>
+                    <View
+                        style={styles.upperBody}
+                    >
+                        <ProfilePicture
+                            size={120}
+                            iconSize={28}
+                            showStatus={true}
+                            author={currentUser}
+                            testID={'account.profile_picture'}
+                            statusStyle={styles.statusStyle}
+                            statusSize={24}
+                        />
+                        <Text style={styles.textFullName}>{title}</Text>
+                        <Text style={styles.textUserName}>{`${userName}`}</Text>
+                    </View>
+                    <View style={styles.body}>
+                        <UserPresence
+                            currentUser={currentUser}
+                            database={database}
+                            serverUrl={serverUrl}
+                            styles={{menuLabel: styles.menuLabel}}
+                            theme={theme}
+                        />
+                        <CustomStatus
+                            config={config}
+                            currentUser={currentUser}
+                            database={database}
+                        />
+                        <View style={styles.divider}/>
+                        <DrawerItem
+                            testID='account.your_profile.action'
+                            labelComponent={getLabelComponent(t('account.your_profile'), 'Your Profile')}
+                            iconName='account-outline'
+                            onPress={goToSavedMessages}
+                            separator={false}
+                            theme={theme}
+                        />
+                        <DrawerItem
+                            testID='account.saved_messages.action'
+                            labelComponent={getLabelComponent(t('account.saved_messages'), 'Saved Messages')}
+                            iconName='bookmark-outline'
+                            onPress={goToSavedMessages}
+                            separator={false}
+                            theme={theme}
+                        />
+                        <DrawerItem
+                            testID='account.settings.action'
+                            labelComponent={getLabelComponent(t('account.settings'), 'Settings')}
+                            iconName='settings-outline'
+                            onPress={goToSavedMessages}
+                            separator={true}
+                            theme={theme}
+                        />
+                        <DrawerItem
+                            testID='account.logout.action'
+                            labelComponent={getLabelComponent(t('account.logout'), 'Log out', {color: theme.dndIndicator})}
+                            iconName='exit-to-app'
+                            isDestructor={true}
+                            onPress={goToSavedMessages}
+                            separator={false}
+                            theme={theme}
+                        />
+                        <FormattedText
+                            id={t('account.logout_from')}
+                            defaultMessage={'Log out of {serverName}'}
+                            values={{serverName}}
+                            style={styles.logOutFrom}
+                        />
+                    </View>
+                </Animated.View>
+            </ScrollView>
+
         </SafeAreaView>
     );
 };
diff --git a/assets/base/i18n/en.json b/assets/base/i18n/en.json
index d04c7dc3ef..a07cae02ab 100644
--- a/assets/base/i18n/en.json
+++ b/assets/base/i18n/en.json
@@ -76,7 +76,7 @@
   "custom_status.expiry_time.tomorrow": "Tomorrow",
   "custom_status.expiry.at": "at",
   "custom_status.expiry.until": "Until",
-  "custom_status.failure_message": "",
+    "custom_status.failure_message": "Failed to update status. Try again",
   "custom_status.set_status": "Set a Status",
   "custom_status.suggestions.in_a_meeting": "In a meeting",
   "custom_status.suggestions.on_a_vacation": "On a vacation",