Replaced remaining message.errors with handleError, PureComponents

recipe-server/client/control/components/extensions/CreateExtensionPage.js

@@ -20,7 +20,7 @@ import {
   },
 )
 @autobind
-export default class CreateExtensionPage extends React.Component {
+export default class CreateExtensionPage extends React.PureComponent {
   static propTypes = {
     createExtension: PropTypes.func.isRequired,
     push: PropTypes.func.isRequired,
@@ -36,6 +36,9 @@ export default class CreateExtensionPage extends React.Component {
    */
   async handleSubmit(values) {
     const { createExtension, push } = this.props;
+
+    this.setState({ formErrors: undefined, });
+
     try {
       const extensionId = await createExtension(values);
       message.success('Extension saved');
@@ -43,7 +46,7 @@ export default class CreateExtensionPage extends React.Component {
     } catch (error) {
       handleError('Extension cannot be saved.', error);
 
-      this.setState({ formErrors: error.data });
+      this.setState({ formErrors: error.data || error });
     }
   }
 

recipe-server/client/control/components/extensions/EditExtensionPage.js

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect } from 'react-redux';
 
+import handleError from 'control/utils/handleError';
 import LoadingOverlay from 'control/components/common/LoadingOverlay';
 import QueryExtension from 'control/components/data/QueryExtension';
 import ExtensionForm from 'control/components/extensions/ExtensionForm';
@@ -30,7 +31,7 @@ import { addSessionView as addSessionViewAction } from 'control/state/app/sessio
   },
 )
 @autobind
-export default class EditExtensionPage extends React.Component {
+export default class EditExtensionPage extends React.PureComponent {
   static propTypes = {
     extension: PropTypes.instanceOf(Map).isRequired,
     extensionId: PropTypes.number.isRequired,
@@ -64,15 +65,16 @@ export default class EditExtensionPage extends React.Component {
    */
   async handleSubmit(values) {
     const { extensionId, updateExtension } = this.props;
+    this.setState({ formErrors: undefined, });
+
     try {
       await updateExtension(extensionId, values);
-      message.success('Extension saved');
+      message.success('Extension saved!');
     } catch (error) {
-      message.error(
-        'Extension cannot be saved. Please correct any errors listed in the form below.',
-      );
+      handleError('Extension cannot be updated.', error)
+
       if (error.data) {
-        this.setState({ formErrors: error.data });
+        this.setState({ formErrors: error.data || error });
       }
     }
   }

recipe-server/client/control/components/recipes/CloneRecipePage.js

@@ -6,6 +6,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link, push as pushAction } from 'redux-little-router';
 
+import handleError from 'control/utils/handleError';
 import LoadingOverlay from 'control/components/common/LoadingOverlay';
 import RecipeForm from 'control/components/recipes/RecipeForm';
 import QueryRecipe from 'control/components/data/QueryRecipe';
@@ -68,9 +69,7 @@ export default class CloneRecipePage extends React.PureComponent {
 
       push(`/recipe/${newId}/`);
     } catch (error) {
-      message.error(
-        'Recipe cannot be saved. Please correct any errors listed in the form below.',
-      );
+      handleError('Recipe cannot be cloned.', error);
 
       this.setState({
         formErrors: error.data || error,

recipe-server/client/control/components/recipes/CreateRecipePage.js

@@ -18,7 +18,7 @@ import { createRecipe as createAction } from 'control/state/app/recipes/actions'
   },
 )
 @autobind
-export default class CreateRecipePage extends React.Component {
+export default class CreateRecipePage extends React.PureComponent {
   static propTypes = {
     createRecipe: PropTypes.func.isRequired,
     push: PropTypes.func.isRequired,
@@ -37,13 +37,13 @@ export default class CreateRecipePage extends React.Component {
       push,
     } = this.props;
 
+    this.setState({
+      formErrors: undefined,
+    });
 
     try {
       const newId = await createRecipe(values);
       message.success('Recipe created');
-      this.setState({
-        formErrors: undefined,
-      });
       push(`/recipe/${newId}/`);
     } catch (error) {
       handleError('Recipe cannot be created.', error);

recipe-server/client/control/components/recipes/EditRecipePage.js

@@ -34,7 +34,7 @@ import { getUrlParamAsInt } from 'control/state/router/selectors';
   },
 )
 @autobind
-export default class EditRecipePage extends React.Component {
+export default class EditRecipePage extends React.PureComponent {
   static propTypes = {
     addSessionView: PropTypes.func.isRequired,
     updateRecipe: PropTypes.func.isRequired,
@@ -73,17 +73,18 @@ export default class EditRecipePage extends React.Component {
   async handleSubmit(values) {
     const { recipeId } = this.props;
 
+    this.setState({
+      formErrors: undefined,
+    });
+
     try {
       await this.props.updateRecipe(recipeId, values);
       message.success('Recipe updated!');
-      this.setState({
-        formErrors: undefined,
-      });
     } catch (error) {
       handleError('Recipe cannot be updated.', error);
 
       this.setState({
-        formErrors: error.data,
+        formErrors: error.data || error,
       });
     }
   }

recipe-server/client/control/utils/forms.js

@@ -3,6 +3,8 @@ import autobind from 'autobind-decorator';
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import handleError from 'control/utils/handleError';
+
 
 /**
  * Decorator used to wrap forms for collecting and validating user input.
@@ -92,13 +94,17 @@ export function createForm({ validateFields, ...formConfig }) {
        */
       async triggerSubmit(context) {
         const customValidateFields = validateFields || (values => values);
+        let values;
         try {
           const defaultValues = await this.defaultValidateFields();
-          const values = await customValidateFields.call(this.formComponent, defaultValues);
-          this.props.onSubmit(values, context);
+          values = await customValidateFields.call(this.formComponent, defaultValues);
         } catch (error) {
-          message.error('Could not validate form. Please correct the errors below.');
+          handleError('Could not validate form. Please correct the errors below.');
+
+          return;
         }
+
+        this.props.onSubmit(values, context);
       }
 
       async defaultValidateFields() {

recipe-server/client/control/utils/handleError.js

@@ -18,10 +18,11 @@ const checkFetchFailure = ({ message = '' }) =>
 const checkLoginFailure = ({ message = '' }) => message.indexOf('credentials were not provided') > -1;
 const checkAPIFailure = error => error instanceof APIClient.APIError;
 
+const msgDisplayTime = 8; // seconds
 
 const defaultMethods = {
   checkUserOnline: () => navigator.onLine,
-  notifyUser: errMsg => AntMessage.error(errMsg, 10),
+  notifyUser: errMsg => AntMessage.error(errMsg, msgDisplayTime),
 };
 
 const handleAPIError = error => {