Editor Module: Use withSelect/withDispatch instead of connect (round …

…2) (#6167)
WordPress · Apr 16, 2018 · d5fc1cf · d5fc1cf
1 parent 0d2cce9
commit d5fc1cf
Show file tree

Hide file tree

Showing 25 changed files with 312 additions and 440 deletions.
diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -35,7 +35,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     type="text"
     value="Write your story"
   />
-  <WithEditorSettings(Connect(WithDispatch(InserterWithShortcuts))) />
+  <WithEditorSettings(WithSelect(WithDispatch(InserterWithShortcuts))) />
   <WithSelect(WithDispatch(WithEditorSettings(Inserter)))
     position="top right"
   />
@@ -59,7 +59,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     type="text"
     value="Write your story"
   />
-  <WithEditorSettings(Connect(WithDispatch(InserterWithShortcuts))) />
+  <WithEditorSettings(WithSelect(WithDispatch(InserterWithShortcuts))) />
   <WithSelect(WithDispatch(WithEditorSettings(Inserter)))
     position="top right"
   />
@@ -83,7 +83,7 @@ exports[`DefaultBlockAppender should optionally show without prompt 1`] = `
     type="text"
     value=""
   />
-  <WithEditorSettings(Connect(WithDispatch(InserterWithShortcuts))) />
+  <WithEditorSettings(WithSelect(WithDispatch(InserterWithShortcuts))) />
   <WithSelect(WithDispatch(WithEditorSettings(Inserter)))
     position="top right"
   />

diff --git a/editor/components/document-title/index.js b/editor/components/document-title/index.js
@@ -1,13 +1,12 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import { Component } from 'react';
 
 /**
- * Internal dependencies
+ * WordPress dependencies
  */
-import { getDocumentTitle } from '../../store/selectors';
+import { withSelect } from '@wordpress/data';
 
 class DocumentTitle extends Component {
 	constructor( props ) {
@@ -38,8 +37,6 @@ class DocumentTitle extends Component {
 	}
 }
 
-export default connect(
-	( state ) => ( {
-		title: getDocumentTitle( state ),
-	} ),
-)( DocumentTitle );
+export default withSelect( ( select ) => ( {
+	title: select( 'core/editor' ).getDocumentTitle(),
+} ) )( DocumentTitle );
diff --git a/editor/components/editor-history/redo.js b/editor/components/editor-history/redo.js
@@ -1,18 +1,10 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { hasEditorRedo } from '../../store/selectors';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/element';
 
 function EditorHistoryRedo( { hasRedo, redo } ) {
 	return (
@@ -26,11 +18,11 @@ function EditorHistoryRedo( { hasRedo, redo } ) {
 	);
 }
 
-export default connect(
-	( state ) => ( {
-		hasRedo: hasEditorRedo( state ),
-	} ),
-	( dispatch ) => ( {
-		redo: () => dispatch( { type: 'REDO' } ),
-	} )
-)( EditorHistoryRedo );
+export default compose( [
+	withSelect( ( select ) => ( {
+		hasRedo: select( 'core/editor' ).hasEditorRedo(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		redo: () => dispatch( 'core/editor' ).redo(),
+	} ) ),
+] )( EditorHistoryRedo );
diff --git a/editor/components/editor-history/undo.js b/editor/components/editor-history/undo.js
@@ -1,18 +1,10 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { hasEditorUndo } from '../../store/selectors';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/element';
 
 function EditorHistoryUndo( { hasUndo, undo } ) {
 	return (
@@ -26,11 +18,11 @@ function EditorHistoryUndo( { hasUndo, undo } ) {
 	);
 }
 
-export default connect(
-	( state ) => ( {
-		hasUndo: hasEditorUndo( state ),
-	} ),
-	( dispatch ) => ( {
-		undo: () => dispatch( { type: 'UNDO' } ),
-	} )
-)( EditorHistoryUndo );
+export default compose( [
+	withSelect( ( select ) => ( {
+		hasUndo: select( 'core/editor' ).hasEditorUndo(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		undo: () => dispatch( 'core/editor' ).undo(),
+	} ) ),
+] )( EditorHistoryUndo );
diff --git a/editor/components/editor-notices/index.js b/editor/components/editor-notices/index.js
@@ -1,18 +1,13 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { NoticeList } from '@wordpress/components';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import { removeNotice } from '../../store/actions';
-import { getNotices } from '../../store/selectors';
 import TemplateValidationNotice from '../template-validation-notice';
 
 function EditorNotices( props ) {
@@ -23,9 +18,11 @@ function EditorNotices( props ) {
 	);
 }
 
-export default connect(
-	( state ) => ( {
-		notices: getNotices( state ),
-	} ),
-	{ onRemove: removeNotice }
-)( EditorNotices );
+export default compose( [
+	withSelect( ( select ) => ( {
+		notices: select( 'core/editor' ).getNotices(),
+	} ) ),
+	withDispatch( ( dispatch ) => ( {
+		onRemove: dispatch( 'core/editor' ).removeNotice,
+	} ) ),
+] )( EditorNotices );
diff --git a/editor/components/inserter-with-shortcuts/index.js b/editor/components/inserter-with-shortcuts/index.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import { filter, isEmpty } from 'lodash';
 
 /**
@@ -11,13 +10,12 @@ import { BlockIcon, createBlock, getDefaultBlockName, withEditorSettings } from
 import { compose } from '@wordpress/element';
 import { IconButton } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { withDispatch } from '@wordpress/data';
+import { withDispatch, withSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { getFrecentInserterItems } from '../../store/selectors';
 
 function InserterWithShortcuts( { items, isLocked, onInsert } ) {
 	if ( isLocked ) {
@@ -54,11 +52,9 @@ export default compose(
 			allowedBlockTypes,
 		};
 	} ),
-	connect(
-		( state, { allowedBlockTypes } ) => ( {
-			items: getFrecentInserterItems( state, allowedBlockTypes, 4 ),
-		} )
-	),
+	withSelect( ( select, { allowedBlockTypes } ) => ( {
+		items: select( 'core/editor' ).getFrecentInserterItems( allowedBlockTypes, 4 ),
+	} ) ),
 	withDispatch( ( dispatch, ownProps ) => {
 		const { uid, rootUID, layout } = ownProps;
 

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -12,7 +12,6 @@ import {
 	sortBy,
 	isEmpty,
 } from 'lodash';
-import { connect } from 'react-redux';
 
 /**
  * WordPress dependencies
@@ -27,16 +26,14 @@ import {
 } from '@wordpress/components';
 import { getCategories, isSharedBlock, withEditorSettings } from '@wordpress/blocks';
 import { keycodes } from '@wordpress/utils';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import NoBlocks from './no-blocks';
-
-import { getInserterItems, getFrecentInserterItems } from '../../store/selectors';
-import { fetchSharedBlocks } from '../../store/actions';
-import { default as InserterGroup } from './group';
+import InserterGroup from './group';
 import BlockPreview from '../block-preview';
 
 export const searchItems = ( items, searchTerm ) => {
@@ -346,15 +343,16 @@ export default compose(
 			allowedBlockTypes,
 		};
 	} ),
-	connect(
-		( state, { allowedBlockTypes } ) => {
-			return {
-				items: getInserterItems( state, allowedBlockTypes ),
-				frecentItems: getFrecentInserterItems( state, allowedBlockTypes ),
-			};
-		},
-		{ fetchSharedBlocks }
-	),
+	withSelect( ( select, { allowedBlockTypes } ) => {
+		const { getInserterItems, getFrecentInserterItems } = select( 'core/editor' );
+		return {
+			items: getInserterItems( allowedBlockTypes ),
+			frecentItems: getFrecentInserterItems( allowedBlockTypes ),
+		};
+	} ),
+	withDispatch( ( dispatch ) => ( {
+		fetchSharedBlocks: dispatch( 'core/editor' ).fetchSharedBlocks,
+	} ) ),
 	withSpokenMessages,
 	withInstanceId
 )( InserterMenu );
diff --git a/editor/components/page-attributes/order.js b/editor/components/page-attributes/order.js
@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import { connect } from 'react-redux';
-
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
 import { compose, Fragment } from '@wordpress/element';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import PostTypeSupportCheck from '../post-type-support-check';
-import { editPost } from '../../store/actions';
-import { getEditedPostAttribute } from '../../store/selectors';
 
 export function PageAttributesOrder( { onUpdateOrder, instanceId, order } ) {
 	const setUpdatedOrder = ( event ) => {
@@ -51,22 +45,18 @@ function PageAttributesOrderWithChecks( props ) {
 	);
 }
 
-const applyConnect = connect(
-	( state ) => {
+export default compose( [
+	withSelect( ( select ) => {
 		return {
-			order: getEditedPostAttribute( state, 'menu_order' ),
+			order: select( 'core/editor' ).getEditedPostAttribute( 'menu_order' ),
 		};
-	},
-	{
+	} ),
+	withDispatch( ( dispatch ) => ( {
 		onUpdateOrder( order ) {
-			return editPost( {
+			dispatch( 'core/editor' ).editPost( {
 				menu_order: order,
 			} );
 		},
-	}
-);
-
-export default compose( [
-	applyConnect,
+	} ) ),
 	withInstanceId,
 ] )( PageAttributesOrderWithChecks );
diff --git a/editor/components/page-attributes/template.js b/editor/components/page-attributes/template.js
@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { connect } from 'react-redux';
 import { isEmpty, map } from 'lodash';
 
 /**
@@ -11,13 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
 import { compose } from '@wordpress/element';
 import { withEditorSettings } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
-import { getEditedPostAttribute } from '../../store/selectors';
-import { editPost } from '../../store/actions';
 
 export function PageTemplate( { availableTemplates, selectedTemplate, instanceId, onUpdate } ) {
 	if ( isEmpty( availableTemplates ) ) {
@@ -42,27 +40,19 @@ export function PageTemplate( { availableTemplates, selectedTemplate, instanceId
 	);
 }
 
-const applyConnect = connect(
-	( state ) => {
+export default compose(
+	withSelect( ( select ) => {
 		return {
-			selectedTemplate: getEditedPostAttribute( state, 'template' ),
+			selectedTemplate: select( 'core/editor' ).getEditedPostAttribute( 'template' ),
 		};
-	},
-	{
+	} ),
+	withDispatch( ( dispatch ) => ( {
 		onUpdate( templateSlug ) {
-			return editPost( { template: templateSlug || '' } );
+			dispatch( 'core/editor' ).editPost( { template: templateSlug || '' } );
 		},
-	}
-);
-
-const applyWithEditorSettings = withEditorSettings(
-	( settings ) => ( {
+	} ) ),
+	withEditorSettings( ( settings ) => ( {
 		availableTemplates: settings.availableTemplates,
-	} )
-);
-
-export default compose(
-	applyConnect,
-	applyWithEditorSettings,
+	} ) ),
 	withInstanceId,
 )( PageTemplate );