[RNMobile] Error Notice Improvements (#30273)

* added error notice styling. * made notice style a success variant to differentiate. * simplified notice implementation for audio block * removed background styling and used text styling for error notice. * utilized noticeStore for notice instead of HOC within the media container. * utilized withDispatch instead of useDispatch since this is a class comp. * Removed onError is not supported on MediaPlaceholder native. * Removed the onUploadError function and utilized createErrorNotice. * Updated error messages for the audio and media component. * Simplified text styles logic.
WordPress · Apr 6, 2021 · 564a6c0 · 564a6c0
1 parent 8d4eef8
commit 564a6c0
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 37 deletions.
diff --git a/packages/block-library/src/audio/edit.native.js b/packages/block-library/src/audio/edit.native.js
@@ -12,7 +12,6 @@ import {
 	PanelBody,
 	SelectControl,
 	ToggleControl,
-	withNotices,
 	ToolbarButton,
 	ToolbarGroup,
 	AudioPlayer,
@@ -29,6 +28,8 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { audio as icon, replace } from '@wordpress/icons';
 import { useState } from '@wordpress/element';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -39,10 +40,8 @@ const ALLOWED_MEDIA_TYPES = [ 'audio' ];
 
 function AudioEdit( {
 	attributes,
-	noticeOperations,
 	setAttributes,
 	isSelected,
-	noticeUI,
 	insertBlocksAfter,
 	onFocus,
 	onBlur,
@@ -56,9 +55,10 @@ function AudioEdit( {
 		setAttributes( { id: mediaId, src: mediaUrl } );
 	};
 
+	const { createErrorNotice } = useDispatch( noticesStore );
+
 	const onError = () => {
-		// TODO: Set up error state
-		onUploadError( __( 'Error' ) );
+		createErrorNotice( __( 'Failed to insert audio file.' ) );
 	};
 
 	function toggleAttribute( attribute ) {
@@ -71,11 +71,6 @@ function AudioEdit( {
 		// TODO: Set up add audio from URL flow
 	}
 
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
-
 	function onSelectAudio( media ) {
 		if ( ! media || ! media.url ) {
 			// in this case there was an error and we should continue in the editing state
@@ -108,8 +103,6 @@ function AudioEdit( {
 					accept="audio/*"
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
-					notices={ noticeUI }
-					onError={ onUploadError }
 					onFocus={ onFocus }
 				/>
 			</View>
@@ -232,4 +225,4 @@ function AudioEdit( {
 		</TouchableWithoutFeedback>
 	);
 }
-export default withNotices( AudioEdit );
+export default AudioEdit;
diff --git a/packages/block-library/src/media-text/media-container.native.js b/packages/block-library/src/media-text/media-container.native.js
@@ -12,12 +12,7 @@ import {
 	requestImageUploadCancelDialog,
 	requestImageFullscreenPreview,
 } from '@wordpress/react-native-bridge';
-import {
-	Icon,
-	Image,
-	IMAGE_DEFAULT_FOCAL_POINT,
-	withNotices,
-} from '@wordpress/components';
+import { Icon, Image, IMAGE_DEFAULT_FOCAL_POINT } from '@wordpress/components';
 import {
 	MEDIA_TYPE_IMAGE,
 	MEDIA_TYPE_VIDEO,
@@ -31,6 +26,8 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { withDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -54,7 +51,6 @@ export { imageFillStyles } from './media-container.js';
 class MediaContainer extends Component {
 	constructor() {
 		super( ...arguments );
-		this.onUploadError = this.onUploadError.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.finishMediaUploadWithSuccess = this.finishMediaUploadWithSuccess.bind(
 			this
@@ -83,12 +79,6 @@ class MediaContainer extends Component {
 		}
 	}
 
-	onUploadError( message ) {
-		const { noticeOperations } = this.props;
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
-
 	onSelectMediaUploadOption( params ) {
 		const { id, url, type } = params;
 		const { onSelectMedia } = this.props;
@@ -162,6 +152,10 @@ class MediaContainer extends Component {
 	}
 
 	finishMediaUploadWithFailure() {
+		const { createErrorNotice } = this.props;
+
+		createErrorNotice( __( 'Failed to insert media.' ) );
+
 		this.setState( { isUploadInProgress: false } );
 	}
 
@@ -333,7 +327,6 @@ class MediaContainer extends Component {
 				onSelect={ this.onSelectMediaUploadOption }
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				onFocus={ this.props.onFocus }
-				onError={ this.onUploadError }
 			/>
 		);
 	}
@@ -388,7 +381,11 @@ class MediaContainer extends Component {
 	}
 }
 
-export default compose(
-	withNotices,
-	withPreferredColorScheme
-)( MediaContainer );
+export default compose( [
+	withDispatch( ( dispatch ) => {
+		const { createErrorNotice } = dispatch( noticesStore );
+
+		return { createErrorNotice };
+	} ),
+	withPreferredColorScheme,
+] )( MediaContainer );
diff --git a/packages/components/src/notice/index.native.js b/packages/components/src/notice/index.native.js
@@ -23,7 +23,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const Notice = ( { onNoticeHidden, content, id } ) => {
+const Notice = ( { onNoticeHidden, content, id, status } ) => {
 	const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
 	const [ visible, setVisible ] = useState( true );
 
@@ -77,11 +77,21 @@ const Notice = ( { onNoticeHidden, content, id } ) => {
 		styles.noticeSolidDark
 	);
 
-	const textStyles = usePreferredColorSchemeStyle(
-		styles.text,
-		styles.textDark
+	const successTextStyles = usePreferredColorSchemeStyle(
+		styles.successText,
+		styles.successTextDark
 	);
 
+	const errorTextStyles = usePreferredColorSchemeStyle(
+		styles.errorText,
+		styles.errorTextDark
+	);
+
+	const textStyles = [
+		status === 'success' && successTextStyles,
+		status === 'error' && errorTextStyles,
+	];
+
 	return (
 		<>
 			<Animated.View

diff --git a/packages/components/src/notice/style.native.scss b/packages/components/src/notice/style.native.scss
@@ -1,14 +1,25 @@
-.text {
+.successText {
 	color: #212121;
 	align-self: center;
 	background-color: transparent;
 	font-size: 12;
 }
 
-.textDark {
+.successTextDark {
 	color: $white;
 }
 
+.errorText {
+	color: $red-50;
+	align-self: center;
+	background-color: transparent;
+	font-size: 12;
+}
+
+.errorTextDark {
+	color: $red-30;
+}
+
 .list {
 	position: absolute;
 	margin-left: auto;