Media: Swap flux media error clearing actions for redux actions (#43869)

* Media: Replace error clearing flux action with redux * Media: Replace flux action with redux clearMediaErrors
Automattic · Jul 8, 2020 · 77f0ed4 · 77f0ed4
1 parent e3d8dc0
commit 77f0ed4
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 65 deletions.
diff --git a/client/components/tinymce/plugins/media/plugin.jsx b/client/components/tinymce/plugins/media/plugin.jsx
@@ -31,7 +31,7 @@ import { getEditorRawContent, isEditorSaveBlocked } from 'state/editor/selectors
 import { ModalViews } from 'state/ui/media-modal/constants';
 import { renderWithReduxStore } from 'lib/react-helpers';
 import Gridicon from 'components/gridicon';
-import { setMediaLibrarySelectedItems } from 'state/media/actions';
+import { clearMediaItemErrors, setMediaLibrarySelectedItems } from 'state/media/actions';
 import { fetchMediaItem } from 'state/media/thunks';
 
 /**
@@ -415,7 +415,7 @@ function mediaButton( editor ) {
 	function initMediaModal() {
 		const selectedSite = getSelectedSiteFromState();
 		if ( selectedSite ) {
-			MediaActions.clearValidationErrors( selectedSite.ID );
+			dispatch( clearMediaItemErrors( selectedSite.ID ) );
 		}
 	}
 
@@ -482,7 +482,7 @@ function mediaButton( editor ) {
 			}
 			const image = MediaStore.get( siteId, imageId );
 
-			MediaActions.clearValidationErrors( siteId );
+			dispatch( clearMediaItemErrors( siteId ) );
 			renderModal(
 				{
 					visible: true,

diff --git a/client/lib/media/actions.js b/client/lib/media/actions.js
@@ -17,8 +17,6 @@ import MediaStore from './store';
 import MediaListStore from './list-store';
 import {
 	changeMediaSource,
-	clearMediaErrors,
-	clearMediaItemErrors,
 	createMediaItem,
 	deleteMedia,
 	failMediaItemRequest,
@@ -285,26 +283,6 @@ MediaActions.delete = function ( siteId, item ) {
 		} );
 };
 
-MediaActions.clearValidationErrors = function ( siteId, itemId ) {
-	debug( 'Clearing validation errors for %d, with item ID %d', siteId, itemId );
-	Dispatcher.handleViewAction( {
-		type: 'CLEAR_MEDIA_VALIDATION_ERRORS',
-		siteId: siteId,
-		itemId: itemId,
-	} );
-	reduxDispatch( clearMediaItemErrors( siteId, itemId ) );
-};
-
-MediaActions.clearValidationErrorsByType = function ( siteId, type ) {
-	debug( 'Clearing validation errors for %d, by type %s', siteId, type );
-	Dispatcher.handleViewAction( {
-		type: 'CLEAR_MEDIA_VALIDATION_ERRORS',
-		siteId: siteId,
-		errorType: type,
-	} );
-	reduxDispatch( clearMediaErrors( siteId, type ) );
-};
-
 MediaActions.sourceChanged = function ( siteId ) {
 	debug( 'Media data source changed' );
 	Dispatcher.handleViewAction( {

diff --git a/client/lib/media/test/actions.js b/client/lib/media/test/actions.js
@@ -380,28 +380,6 @@ describe( 'MediaActions', () => {
 		} );
 	} );
 
-	describe( '#clearValidationErrors()', () => {
-		test( 'should dispatch the `CLEAR_MEDIA_VALIDATION_ERRORS` action with the specified siteId', () => {
-			MediaActions.clearValidationErrors( DUMMY_SITE_ID );
-
-			expect( Dispatcher.handleViewAction ).to.have.been.calledWithMatch( {
-				type: 'CLEAR_MEDIA_VALIDATION_ERRORS',
-				siteId: DUMMY_SITE_ID,
-				itemId: undefined,
-			} );
-		} );
-
-		test( 'should dispatch the `CLEAR_MEDIA_VALIDATION_ERRORS` action with the specified siteId and itemId', () => {
-			MediaActions.clearValidationErrors( DUMMY_SITE_ID, DUMMY_ITEM.ID );
-
-			expect( Dispatcher.handleViewAction ).to.have.been.calledWithMatch( {
-				type: 'CLEAR_MEDIA_VALIDATION_ERRORS',
-				siteId: DUMMY_SITE_ID,
-				itemId: DUMMY_ITEM.ID,
-			} );
-		} );
-	} );
-
 	describe( '#sourceChanged()', () => {
 		test( 'should dispatch the `CHANGE_MEDIA_SOURCE` action with the specified siteId', () => {
 			MediaActions.sourceChanged( DUMMY_SITE_ID );

diff --git a/client/my-sites/media-library/content.jsx b/client/my-sites/media-library/content.jsx
@@ -39,7 +39,7 @@ import { pauseGuidedTour, resumeGuidedTour } from 'state/ui/guided-tours/actions
 import { deleteKeyringConnection } from 'state/sharing/keyring/actions';
 import { getGuidedTourState } from 'state/ui/guided-tours/selectors';
 import { withoutNotice } from 'state/notices/actions';
-import { reduxDispatch } from 'lib/redux-bridge';
+import { clearMediaErrors } from 'state/media/actions';
 
 /**
  * Style dependencies
@@ -129,7 +129,7 @@ export class MediaLibraryContent extends React.Component {
 			};
 
 			if ( site ) {
-				onDismiss = MediaActions.clearValidationErrorsByType.bind( null, site.ID, errorType );
+				onDismiss = () => this.props.clearMediaErrors( site.ID, errorType );
 			}
 
 			let status = 'is-error';
@@ -457,19 +457,18 @@ export default connect(
 			selectedItems: getMediaLibrarySelectedItems( state, ownProps.site?.ID ),
 		};
 	},
-	() => ( {
-		toggleGuidedTour: ( shouldPause ) => {
-			// We're using `reduxDispatch` to avoid dispatch clashes with the media data Flux implementation.
-			// The eventual Reduxification of the media store should prevent this. See: #26168
-			reduxDispatch( shouldPause ? pauseGuidedTour() : resumeGuidedTour() );
+	{
+		toggleGuidedTour: ( shouldPause ) => ( dispatch ) => {
+			dispatch( shouldPause ? pauseGuidedTour() : resumeGuidedTour() );
 		},
-		deleteKeyringConnection: ( connection ) => {
+		deleteKeyringConnection: ( connection ) => ( dispatch ) => {
 			// We don't want this to trigger a global notice - a notice is shown inline
 			const deleteKeyring = withoutNotice( () => deleteKeyringConnection( connection ) );
 
-			reduxDispatch( deleteKeyring() );
+			dispatch( deleteKeyring() );
 		},
-	} ),
+		clearMediaErrors,
+	},
 	null,
 	{ pure: false }
 )( localize( MediaLibraryContent ) );
diff --git a/client/my-sites/media-library/drop-zone.jsx b/client/my-sites/media-library/drop-zone.jsx
@@ -3,6 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
 import { noop } from 'lodash';
 import Gridicon from 'components/gridicon';
 import { localize } from 'i18n-calypso';
@@ -14,6 +15,7 @@ import { bumpStat } from 'lib/analytics/mc';
 import DropZone from 'components/drop-zone';
 import MediaActions from 'lib/media/actions';
 import { userCan } from 'lib/site/utils';
+import { clearMediaItemErrors } from 'state/media/actions';
 
 class MediaLibraryDropZone extends React.Component {
 	static displayName = 'MediaLibraryDropZone';
@@ -36,7 +38,7 @@ class MediaLibraryDropZone extends React.Component {
 			return;
 		}
 
-		MediaActions.clearValidationErrors( this.props.site.ID );
+		this.props.clearMediaItemErrors( this.props.site.ID );
 		MediaActions.add( this.props.site, files );
 		this.props.onAddMedia();
 
@@ -91,4 +93,4 @@ class MediaLibraryDropZone extends React.Component {
 	}
 }
 
-export default localize( MediaLibraryDropZone );
+export default connect( null, { clearMediaItemErrors } )( localize( MediaLibraryDropZone ) );
diff --git a/client/my-sites/media-library/upload-button.jsx b/client/my-sites/media-library/upload-button.jsx
@@ -3,6 +3,7 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { connect } from 'react-redux';
 import { noop, uniq } from 'lodash';
 import classNames from 'classnames';
 import page from 'page';
@@ -14,15 +15,14 @@ import { bumpStat } from 'lib/analytics/mc';
 import MediaActions from 'lib/media/actions';
 import { getAllowedFileTypesForSite, isSiteAllowedFileTypesToBeTrusted } from 'lib/media/utils';
 import { VideoPressFileTypes } from 'lib/media/constants';
+import { clearMediaItemErrors } from 'state/media/actions';
 
 /**
  * Style dependencies
  */
 import './upload-button.scss';
 
-export default class extends React.Component {
-	static displayName = 'MediaLibraryUploadButton';
-
+class MediaLibraryUploadButton extends React.Component {
 	static propTypes = {
 		site: PropTypes.object,
 		onAddMedia: PropTypes.func,
@@ -48,7 +48,7 @@ export default class extends React.Component {
 
 	uploadFiles = ( event ) => {
 		if ( event.target.files && this.props.site ) {
-			MediaActions.clearValidationErrors( this.props.site.ID );
+			this.props.clearMediaItemErrors( this.props.site.ID );
 			MediaActions.add( this.props.site, event.target.files );
 		}
 
@@ -95,3 +95,5 @@ export default class extends React.Component {
 		);
 	}
 }
+
+export default connect( null, { clearMediaItemErrors } )( MediaLibraryUploadButton );
diff --git a/client/my-sites/media-library/upload-url.jsx b/client/my-sites/media-library/upload-url.jsx
@@ -4,6 +4,7 @@
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { connect } from 'react-redux';
 import { noop } from 'lodash';
 import classNames from 'classnames';
 import Gridicon from 'components/gridicon';
@@ -16,6 +17,7 @@ import { bumpStat } from 'lib/analytics/mc';
 import FormTextInput from 'components/forms/form-text-input';
 import { ScreenReaderText } from '@automattic/components';
 import MediaActions from 'lib/media/actions';
+import { clearMediaItemErrors } from 'state/media/actions';
 
 /**
  * Style dependencies
@@ -50,7 +52,7 @@ class MediaLibraryUploadUrl extends Component {
 			return;
 		}
 
-		MediaActions.clearValidationErrors( this.props.site.ID );
+		this.props.clearMediaItemErrors( this.props.site.ID );
 		MediaActions.add( this.props.site, this.state.value );
 
 		this.setState( { value: '', isError: false } );
@@ -91,11 +93,13 @@ class MediaLibraryUploadUrl extends Component {
 					onChange={ this.onChange }
 					onKeyDown={ this.onKeyDown }
 					isError={ this.state.isError }
+					// eslint-disable-next-line jsx-a11y/no-autofocus
 					autoFocus
 					required
 				/>
 
 				<div className="media-library__upload-url-button-group">
+					{ /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ }
 					<button type="submit" className="button is-primary">
 						{ translate( 'Upload', { context: 'verb' } ) }
 					</button>
@@ -110,4 +114,4 @@ class MediaLibraryUploadUrl extends Component {
 	}
 }
 
-export default localize( MediaLibraryUploadUrl );
+export default connect( null, { clearMediaItemErrors } )( localize( MediaLibraryUploadUrl ) );