Show server error in notification if one is given for failed piece registrations

js/components/whitelabel/prize/portfolioreview/components/pr_forms/pr_register_piece_form.js

@@ -19,8 +19,9 @@ import ApiUrls from '../../../../../../constants/api_urls';
 
 import requests from '../../../../../../utils/requests';
 
-import { getLangText } from '../../../../../../utils/lang_utils';
+import { getErrorNotificationMessage } from '../../../../../../utils/error_utils';
 import { setCookie } from '../../../../../../utils/fetch_api_utils';
+import { getLangText } from '../../../../../../utils/lang_utils';
 import { formSubmissionValidation } from '../../../../../ascribe_uploader/react_s3_fine_uploader_utils';
 
 
@@ -35,7 +36,7 @@ const PRRegisterPieceForm = React.createClass({
 
     mixins: [History],
 
-    getInitialState(){
+    getInitialState() {
         return {
             digitalWorkKeyReady: true,
             thumbnailKeyReady: true,
@@ -56,13 +57,13 @@ const PRRegisterPieceForm = React.createClass({
     submit() {
         if(!this.validateForms()) {
             return;
-        } else {
+        }
+
         // disable the submission button right after the user
         // clicks on it to avoid double submission
         this.setState({
             submitted: true
         });
-        }
 
         const { currentUser } = this.props;
         const { registerPieceForm,
@@ -106,10 +107,18 @@ const PRRegisterPieceForm = React.createClass({
             })
             .then(() => this.history.pushState(null, `/pieces/${this.state.piece.id}`))
             .catch((err) => {
-                const notificationMessage = new GlobalNotificationModel(getLangText("Oops! We weren't able to send your submission. Contact: support@ascribe.io"), 'danger', 5000);
+                const errMessage = (getErrorNotificationMessage(err) || getLangText("Oops! We weren't able to send your submission.")) +
+                                        getLangText(' Please contact support@ascribe.io');
+
+                const notificationMessage = new GlobalNotificationModel(errMessage, 'danger', 10000);
                 GlobalNotificationActions.appendGlobalNotification(notificationMessage);
 
                 console.logGlobal(new Error('Portfolio Review piece registration failed'), err);
+
+                // Reset the submit button
+                this.setState({
+                    submitted: false
+                });
             });
     },
 

js/utils/error_utils.js

@@ -35,3 +35,31 @@ export function initLogging() {
 
     console.logGlobal = logGlobal;
 }
+
+/*
+ * Gets the json errors from the error as an array
+ * @param  {Error} error A Javascript error
+ * @return {Array}       List of json errors
+ */
+export function getJsonErrorsAsArray(error) {
+    const { json: { errors = {} } = {} } = error;
+
+    const errorArrays = Object
+        .keys(errors)
+        .map((errorKey) => {
+            return errors[errorKey];
+        });
+
+    // Collapse each errorKey's errors into a flat array
+    return [].concat(...errorArrays);
+}
+
+/*
+ * Tries to get an error message from the error, either by using its notification
+ * property or first json error (if any)
+ * @param  {Error} error A Javascript error
+ * @return {string}      Error message string
+ */
+export function getErrorNotificationMessage(error) {
+    return (error && error.notification) || getJsonErrorsAsArray(error)[0] || '';
+}

js/utils/general_utils.js

@@ -84,8 +84,6 @@ export function formatText() {
  * Checks a list of objects for key duplicates and returns a boolean
  */
 function _doesObjectListHaveDuplicates(l) {
-    let mergedList = [];
-
     l = l.map((obj) => {
         if(!obj) {
             throw new Error('The object you are trying to merge is null instead of an empty object');
@@ -94,11 +92,11 @@ function _doesObjectListHaveDuplicates(l) {
         return Object.keys(obj);
     });
 
-    // Taken from: http://stackoverflow.com/a/10865042
+    // Taken from: http://stackoverflow.com/a/10865042 (but even better with rest)
     // How to flatten an array of arrays in javascript.
     // If two objects contain the same key, then these two keys
     // will actually be represented in the merged array
-    mergedList = mergedList.concat.apply(mergedList, l);
+    let mergedList = [].concat(...l);
 
     // Taken from: http://stackoverflow.com/a/7376645/1263876
     // By casting the array to a set, and then checking if the size of the array