Merge pull request #10393 from Expensify/alberto-deleteAvatar

Create DeleteWorkspaceAvatar
Expensify · Aug 25, 2022 · e6b6dd2 · e6b6dd2
2 parents f39e1f2 + ae0e20e
commit e6b6dd2
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 21 deletions.
diff --git a/src/languages/en.js b/src/languages/en.js
@@ -264,6 +264,7 @@ export default {
         removePhoto: 'Remove photo',
         editImage: 'Edit photo',
         imageUploadFailed: 'Image upload failed',
+        deleteWorkspaceError: 'Sorry, there was an unexpected problem deleting your workspace avatar.',
         sizeExceeded: ({maxUploadSizeInMB}) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`,
         tooSmallResolution: ({minHeightInPx, minWidthInPx}) => `Please upload an image larger than ${minHeightInPx}x${minWidthInPx} pixels`,
     },

diff --git a/src/languages/es.js b/src/languages/es.js
@@ -264,6 +264,7 @@ export default {
         removePhoto: 'Eliminar foto',
         editImage: 'Editar foto',
         imageUploadFailed: 'Error al cargar la imagen',
+        deleteWorkspaceError: 'Lo sentimos, hubo un problema eliminando el avatar de su espacio de trabajo.',
         sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB}MB.`,
         tooSmallResolution: ({minHeightInPx, minWidthInPx}) => `Por favor elige una imagen mas grande que ${minHeightInPx}x${minWidthInPx} píxeles`,
     },

diff --git a/src/libs/actions/Policy.js b/src/libs/actions/Policy.js
@@ -2,6 +2,7 @@ import _ from 'underscore';
 import Onyx from 'react-native-onyx';
 import lodashGet from 'lodash/get';
 import * as DeprecatedAPI from '../deprecatedAPI';
+import * as API from '../API';
 import ONYXKEYS from '../../ONYXKEYS';
 import * as PersonalDetails from './PersonalDetails';
 import Growl from '../Growl';
@@ -13,6 +14,7 @@ import ROUTES from '../../ROUTES';
 import * as OptionsListUtils from '../OptionsListUtils';
 import * as Report from './Report';
 import * as Pusher from '../Pusher/pusher';
+import DateUtils from '../DateUtils';
 
 const allPolicies = {};
 Onyx.connect({
@@ -370,6 +372,74 @@ function updateLocalPolicyValues(policyID, values) {
     Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, values);
 }
 
+/**
+ * Deletes the avatar image for the workspace
+ * @param {String} policyID
+ */
+function deleteWorkspaceAvatar(policyID) {
+    const optimisticData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                pendingFields: {
+                    avatarURL: CONST.RED_BRICK_ROAD_PENDING_ACTION.UPDATE,
+                },
+                errorFields: {
+                    avatarURL: null,
+                },
+                avatarURL: '',
+            },
+        },
+    ];
+    const successData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                pendingFields: {
+                    avatarURL: null,
+                },
+                errorFields: {
+                    avatarURL: null,
+                },
+            },
+        },
+    ];
+    const failureData = [
+        {
+            onyxMethod: CONST.ONYX.METHOD.MERGE,
+            key: `${ONYXKEYS.COLLECTION.POLICY}${policyID}`,
+            value: {
+                pendingFields: {
+                    avatarURL: null,
+                },
+                errorFields: {
+                    avatarURL: {
+                        [DateUtils.getMicroseconds()]: Localize.translateLocal('avatarWithImagePicker.deleteWorkspaceError'),
+                    },
+                },
+            },
+        },
+    ];
+    API.write('DeleteWorkspaceAvatar', {policyID}, {optimisticData, successData, failureData});
+}
+
+/**
+ * Clear error and pending fields for the workspace avatar
+ * @param {String} policyID
+ */
+function clearAvatarErrors(policyID) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {
+        errorFields: {
+            avatarURL: null,
+        },
+        pendingFields: {
+            avatarURL: null,
+        },
+    });
+}
+
 /**
  * Sets the name of the policy
  *
@@ -588,4 +658,6 @@ export {
     clearDeleteMemberError,
     clearAddMemberError,
     hasPolicyMemberError,
+    deleteWorkspaceAvatar,
+    clearAvatarErrors,
 };
diff --git a/src/pages/workspace/WorkspaceSettingsPage.js b/src/pages/workspace/WorkspaceSettingsPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 import {View} from 'react-native';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
+import lodashGet from 'lodash/get';
 import ONYXKEYS from '../../ONYXKEYS';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import styles from '../../styles/styles';
@@ -20,6 +21,7 @@ import FixedFooter from '../../components/FixedFooter';
 import WorkspacePageWithSections from './WorkspacePageWithSections';
 import withFullPolicy, {fullPolicyPropTypes, fullPolicyDefaultProps} from './withFullPolicy';
 import {withNetwork} from '../../components/OnyxProvider';
+import OfflineWithFeedback from '../../components/OfflineWithFeedback';
 import FullPageNotFoundView from '../../components/BlockingViews/FullPageNotFoundView';
 
 const propTypes = {
@@ -61,7 +63,7 @@ class WorkspaceSettingsPage extends React.Component {
 
     removeAvatar() {
         this.setState({previewAvatarURL: ''});
-        Policy.update(this.props.policy.id, {avatarURL: ''}, true);
+        Policy.deleteWorkspaceAvatar(this.props.policy.id);
     }
 
     /**
@@ -116,26 +118,31 @@ class WorkspaceSettingsPage extends React.Component {
                 >
                     {hasVBA => (
                         <View style={[styles.pageWrapper, styles.flex1, styles.alignItemsStretch]}>
-                            <AvatarWithImagePicker
-                                isUploading={this.props.policy.isAvatarUploading}
-                                avatarURL={this.state.previewAvatarURL}
-                                size={CONST.AVATAR_SIZE.LARGE}
-                                DefaultAvatar={() => (
-                                    <Icon
-                                        src={Expensicons.Workspace}
-                                        height={80}
-                                        width={80}
-                                        fill={defaultTheme.iconSuccessFill}
-                                    />
-                                )}
-                                fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
-                                style={[styles.mb3]}
-                                anchorPosition={{top: 172, right: 18}}
-                                isUsingDefaultAvatar={!this.state.previewAvatarURL}
-                                onImageSelected={this.uploadAvatar}
-                                onImageRemoved={this.removeAvatar}
-                            />
-
+                            <OfflineWithFeedback
+                                pendingAction={lodashGet(this.props.policy, 'pendingFields.avatarURL', null)}
+                                errors={lodashGet(this.props.policy, 'errorFields.avatarURL', null)}
+                                onClose={() => Policy.clearAvatarErrors(this.props.policy.id)}
+                            >
+                                <AvatarWithImagePicker
+                                    isUploading={this.props.policy.isAvatarUploading}
+                                    avatarURL={this.state.previewAvatarURL}
+                                    size={CONST.AVATAR_SIZE.LARGE}
+                                    DefaultAvatar={() => (
+                                        <Icon
+                                            src={Expensicons.Workspace}
+                                            height={80}
+                                            width={80}
+                                            fill={defaultTheme.iconSuccessFill}
+                                        />
+                                    )}
+                                    fallbackIcon={Expensicons.FallbackWorkspaceAvatar}
+                                    style={[styles.mb3]}
+                                    anchorPosition={{top: 172, right: 18}}
+                                    isUsingDefaultAvatar={!this.state.previewAvatarURL}
+                                    onImageSelected={this.uploadAvatar}
+                                    onImageRemoved={this.removeAvatar}
+                                />
+                            </OfflineWithFeedback>
                             <TextInput
                                 label={this.props.translate('workspace.editor.nameInputLabel')}
                                 containerStyles={[styles.mt4]}