Theme Upload: Move error handling to notices middleware

client/my-sites/themes/theme-upload/index.jsx

@@ -3,7 +3,6 @@
  */
 import React from 'react';
 import { connect } from 'react-redux';
-import { includes, find } from 'lodash';
 
 /**
  * Internal dependencies
@@ -32,7 +31,6 @@ import {
 	isUploadComplete,
 	hasUploadFailed,
 	getUploadedThemeId,
-	getUploadError,
 	getUploadProgressTotal,
 	getUploadProgressLoaded,
 	isInstallInProgress,
@@ -51,7 +49,6 @@ class Upload extends React.Component {
 		complete: React.PropTypes.bool,
 		failed: React.PropTypes.bool,
 		uploadedTheme: React.PropTypes.object,
-		error: React.PropTypes.object,
 		progressTotal: React.PropTypes.number,
 		progressLoaded: React.PropTypes.number,
 		installing: React.PropTypes.bool,
@@ -69,46 +66,6 @@ class Upload extends React.Component {
 		}
 	}
 
-	componentDidUpdate( prevProps ) {
-		if ( this.props.complete && ! prevProps.complete ) {
-			this.successMessage();
-		} else if ( this.props.failed && ! prevProps.failed ) {
-			this.failureMessage();
-		}
-	}
-
-	successMessage() {
-		const { translate, uploadedTheme, themeId } = this.props;
-		notices.success(
-			translate( 'Successfully uploaded theme %(name)s', {
-				args: {
-					// using themeId lets us show a message before theme data arrives
-					name: uploadedTheme ? uploadedTheme.name : themeId
-				}
-			} ),
-			{ duration: 5000 }
-		);
-	}
-
-	failureMessage() {
-		const { translate, error } = this.props;
-
-		debug( 'Error', error );
-
-		const errorCauses = {
-			exists: translate( 'Upload problem: Theme already installed on site.' ),
-			'Too Large': translate( 'Upload problem: Zip file too large to upload.' ),
-			incompatible: translate( 'Upload problem: Incompatible theme.' ),
-		};
-
-		const errorString = JSON.stringify( error );
-		const cause = find( errorCauses, ( v, key ) => {
-			return includes( errorString, key );
-		} );
-
-		notices.error( cause || translate( 'Problem uploading theme' ) );
-	}
-
 	onFileSelect = ( files ) => {
 		const { translate, siteId } = this.props;
 		const errorMessage = translate( 'Please drop a single zip file' );
@@ -275,7 +232,6 @@ export default connect(
 			failed: hasUploadFailed( state, siteId ),
 			themeId,
 			uploadedTheme: getTheme( state, siteId, themeId ),
-			error: getUploadError( state, siteId ),
 			progressTotal: getUploadProgressTotal( state, siteId ),
 			progressLoaded: getUploadProgressLoaded( state, siteId ),
 			installing: isInstallInProgress( state, siteId ),

client/state/notices/middleware.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { translate } from 'i18n-calypso';
-import { truncate } from 'lodash';
+import { find, includes, truncate } from 'lodash';
 
 /**
  * Internal dependencies
@@ -31,6 +31,11 @@ import {
 	PUBLICIZE_CONNECTION_UPDATE,
 	PUBLICIZE_CONNECTION_UPDATE_FAILURE,
 	SITE_FRONT_PAGE_SET_FAILURE,
+	THEME_ACTIVATE_REQUEST_FAILURE,
+	THEME_TRANSFER_INITIATE_FAILURE,
+	THEME_TRANSFER_STATUS_FAILURE,
+	THEME_UPLOAD_FAILURE,
+	THEME_UPLOAD_SUCCESS
 } from 'state/action-types';
 
 import { dispatchSuccess, dispatchError } from './utils';
@@ -141,6 +146,36 @@ export const onPublicizeConnectionUpdateFailure = ( dispatch, { error } ) => dis
 	} ) )
 );
 
+export const onThemeUploadSuccess = ( dispatch, { theme } ) => {
+	return dispatch( successNotice(
+		translate( 'Successfully uploaded theme %(name)s', {
+			args: {
+				name: theme.name
+			}
+		} ),
+		{ duration: 5000 }
+	) );
+};
+
+export const onThemeUploadFailure = ( dispatch, { error } ) => {
+	const errorCauses = {
+		exists: translate( 'Upload problem: Theme already installed on site.' ), // folder_exists
+		'already installed': translate( 'Upload problem: Theme already installed on site.' ), // theme_already_installed
+		'Too Large': translate( 'Upload problem: Zip file too large to upload.' ),
+		incompatible: translate( 'Upload problem: Incompatible theme.' ),
+	};
+
+	const errorString = JSON.stringify( error );
+
+	const cause = find( errorCauses, ( value, key ) => {
+		return includes( errorString, key );
+	} );
+
+	return dispatch(
+		errorNotice( cause || translate( 'Problem uploading theme' ) )
+	);
+};
+
 /**
  * Handler action type mapping
  */
@@ -169,6 +204,11 @@ export const handlers = {
 	[ PUBLICIZE_CONNECTION_UPDATE_FAILURE ]: onPublicizeConnectionUpdateFailure,
 	[ GUIDED_TRANSFER_HOST_DETAILS_SAVE_SUCCESS ]: dispatchSuccess( translate( 'Thanks for confirming those details!' ) ),
 	[ SITE_FRONT_PAGE_SET_FAILURE ]: dispatchError( translate( 'An error occurred while setting the homepage' ) ),
+	[ THEME_ACTIVATE_REQUEST_FAILURE ]: onThemeUploadFailure,
+	[ THEME_TRANSFER_INITIATE_FAILURE ]: onThemeUploadFailure,
+	[ THEME_TRANSFER_STATUS_FAILURE ]: onThemeUploadFailure,
+	[ THEME_UPLOAD_FAILURE ]: onThemeUploadFailure,
+	[ THEME_UPLOAD_SUCCESS ]: onThemeUploadSuccess
 };
 
 /**

client/state/themes/actions.js

@@ -433,6 +433,7 @@ export function uploadTheme( siteId, file ) {
 					type: THEME_UPLOAD_SUCCESS,
 					siteId,
 					themeId: theme.id,
+					theme
 				} );
 			} )
 			.catch( error => {