chg: Workspace Edit Page

src/libs/actions/Policy.js

@@ -286,16 +286,23 @@ function uploadAvatar(file) {
     return API.User_UploadAvatar({file})
         .then((response) => {
             if (response.jsonCode !== 200) {
-                // Show the user feedback
-                const errorMessage = translateLocal('workspace.editor.avatarUploadFailureMessage');
-                Growl.error(errorMessage, 5000);
-                return;
+                // Let the component handle the issue.
+                throw new Error();
             }
 
             return response.s3url;
         });
 }
 
+/**
+ * Sets local values for the policy
+ * @param {String} policyID
+ * @param {Object} values
+ */
+function updateLocalPolicyValues(policyID, values) {
+    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, values);
+}
+
 /**
  * Sets the name of the policy
  *
@@ -307,34 +314,22 @@ function update(policyID, values, shouldGrowl = false) {
     API.UpdatePolicy({policyID, value: JSON.stringify(values), lastModified: null})
         .then((policyResponse) => {
             if (policyResponse.jsonCode !== 200) {
-                // Show the user feedback
-                const errorMessage = translateLocal('workspace.editor.genericFailureMessage');
-                Growl.error(errorMessage, 5000);
-                Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {isPolicyUpdating: false});
-                return;
+                throw new Error();
             }
 
-            const updatedValues = {...values, ...{isPolicyUpdating: false}};
-            Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, updatedValues);
+            updateLocalPolicyValues(policyID, {...values, isPolicyUpdating: false});
             if (shouldGrowl) {
                 Growl.show(translateLocal('workspace.common.growlMessageOnSave'), CONST.GROWL.SUCCESS, 3000);
             }
         }).catch(() => {
-            Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, {isPolicyUpdating: false});
+            updateLocalPolicyValues(policyID, {isPolicyUpdating: false});
+
+            // Show the user feedback
             const errorMessage = translateLocal('workspace.editor.genericFailureMessage');
             Growl.error(errorMessage, 5000);
         });
 }
 
-/**
- * Sets local values for the policy
- * @param {String} policyID
- * @param {Object} values
- */
-function updateLocalPolicyValues(policyID, values) {
-    Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`, values);
-}
-
 /**
  * @param {String} policyID
  * @param {Object} errors

src/pages/workspace/WorkspaceSettingsPage.js

@@ -67,13 +67,18 @@ class WorkspaceSettingsPage extends React.Component {
         this.uploadAvatar = this.uploadAvatar.bind(this);
         this.removeAvatar = this.removeAvatar.bind(this);
         this.getCurrencyItems = this.getCurrencyItems.bind(this);
+        this.validate = this.validate.bind(this);
         this.uploadAvatarPromise = Promise.resolve();
     }
 
     componentDidMount() {
         getCurrencyList();
     }
 
+    componentWillUnmount() {
+        Policy.updateLocalPolicyValues(this.props.policy.id, {isAvatarUploading: false});
+    }
+
     /**
      * @returns {Object[]}
      */
@@ -101,11 +106,15 @@ class WorkspaceSettingsPage extends React.Component {
         this.uploadAvatarPromise = Policy.uploadAvatar(image).then(url => new Promise((resolve) => {
             this.setState({avatarURL: url}, resolve);
         })).catch(() => {
+            this.setState({previewAvatarURL: ''});
             Growl.error(this.props.translate('workspace.editor.avatarUploadFailureMessage'));
         }).finally(() => Policy.updateLocalPolicyValues(this.props.policy.id, {isAvatarUploading: false}));
     }
 
     submit() {
+        if (this.props.policy.isAvatarUploading || !this.validate()) {
+            return;
+        }
         const name = this.state.name.trim();
         const avatarURL = this.state.avatarURL;
         const outputCurrency = this.state.currency;
@@ -118,6 +127,14 @@ class WorkspaceSettingsPage extends React.Component {
         Growl.success(this.props.translate('workspace.common.growlMessageOnSave'));
     }
 
+    validate() {
+        const errors = {};
+        if (!this.state.name.trim().length) {
+            errors.nameError = true;
+        }
+        return _.size(errors) === 0;
+    }
+
     render() {
         const {policy} = this.props;