Framework: Replace flowRight occurences with compose for HOCs (#3907)

* Framework: Replace flowRight occurences with compose for HOCs * Framework: Replace or flow occurences with HOCs with compose utility
WordPress · Dec 12, 2017 · dfa9e5e · dfa9e5e
1 parent 599afcf
commit dfa9e5e
Show file tree

Hide file tree

Showing 26 changed files with 68 additions and 60 deletions.
diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js
@@ -8,14 +8,13 @@ import {
 	isEmpty,
 	map,
 	get,
-	flowRight,
 } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 import { mediaUpload, createMediaFromFile, getBlobByURL, revokeBlobURL, viewPort } from '@wordpress/utils';
 import {
 	Placeholder,
@@ -298,7 +297,7 @@ class ImageBlock extends Component {
 	}
 }
 
-export default flowRight( [
+export default compose( [
 	withContext( 'editor' )( ( settings ) => {
 		return { settings };
 	} ),

diff --git a/components/autocomplete/index.js b/components/autocomplete/index.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { escapeRegExp, find, filter, map, flowRight } from 'lodash';
+import { escapeRegExp, find, filter, map } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Component, renderToString } from '@wordpress/element';
+import { Component, compose, renderToString } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 import { __, _n, sprintf } from '@wordpress/i18n';
 
@@ -497,7 +497,7 @@ export class Autocomplete extends Component {
 	}
 }
 
-export default flowRight( [
+export default compose( [
 	withSpokenMessages,
 	withInstanceId,
 	withFocusOutside, // this MUST be the innermost HOC as it calls handleFocusOutside

diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js
@@ -2,13 +2,14 @@
  * External Dependencies
  */
 import { connect } from 'react-redux';
-import { reduce, get, find, flow } from 'lodash';
+import { reduce, get, find } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { DropZone, withContext } from '@wordpress/components';
 import { getBlockTypes } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -49,7 +50,7 @@ function BlockDropZone( { index, isLocked, ...props } ) {
 	);
 }
 
-export default flow(
+export default compose(
 	connect(
 		undefined,
 		{ insertBlocks }

diff --git a/editor/components/block-mover/index.js b/editor/components/block-mover/index.js
@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { first, last, flow } from 'lodash';
+import { first, last } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton, withContext } from '@wordpress/components';
 import { getBlockType } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -64,7 +65,7 @@ export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, block
 	);
 }
 
-export default flow(
+export default compose(
 	connect(
 		( state, ownProps ) => {
 			const block = getBlock( state, first( ownProps.uids ) );

diff --git a/editor/components/block-settings-menu/block-delete-button.js b/editor/components/block-settings-menu/block-delete-button.js
@@ -9,6 +9,7 @@ import { flow, noop } from 'lodash';
  */
 import { __ } from '@wordpress/i18n';
 import { IconButton, withContext } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -34,7 +35,7 @@ export function BlockDeleteButton( { onDelete, onClick = noop, isLocked, small =
 	);
 }
 
-export default flow(
+export default compose(
 	connect(
 		undefined,
 		( dispatch, ownProps ) => ( {

diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js
@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { every, uniq, get, reduce, find, flow } from 'lodash';
+import { every, uniq, get, reduce, find } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Dropdown, Dashicon, IconButton, Toolbar, NavigableMenu, withContext } from '@wordpress/components';
 import { getBlockType, getBlockTypes, switchToBlockType, BlockIcon } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
 import { keycodes } from '@wordpress/utils';
 
 /**
@@ -126,7 +127,7 @@ function BlockSwitcher( { blocks, onTransform, isLocked } ) {
 	);
 }
 
-export default flow(
+export default compose(
 	connect(
 		( state, ownProps ) => {
 			return {

diff --git a/editor/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -6,7 +6,7 @@ exports[`DefaultBlockAppender no block present should match snapshot 1`] = `
 <div
   className="editor-default-block-appender"
 >
-  <WrappedComponent />
+  <Connect(WrappedComponent) />
   <input
     className="editor-default-block-appender__content"
     onClick={[Function]}

diff --git a/editor/components/editor-global-keyboard-shortcuts/index.js b/editor/components/editor-global-keyboard-shortcuts/index.js
@@ -2,12 +2,12 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { first, last, flow } from 'lodash';
+import { first, last } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 import { KeyboardShortcuts, withContext } from '@wordpress/components';
 
 /**
@@ -65,7 +65,7 @@ class EditorGlobalKeyboardShortcuts extends Component {
 	}
 }
 
-export default flow(
+export default compose(
 	connect(
 		( state ) => {
 			return {

diff --git a/editor/components/inserter/index.js b/editor/components/inserter/index.js
@@ -3,15 +3,15 @@
  */
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { flowRight, isEmpty } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Dropdown, IconButton, withContext } from '@wordpress/components';
 import { createBlock } from '@wordpress/blocks';
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -106,7 +106,7 @@ class Inserter extends Component {
 	}
 }
 
-export default flowRight( [
+export default compose( [
 	connect(
 		( state ) => {
 			return {

diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js
@@ -18,7 +18,7 @@ import { connect } from 'react-redux';
  * WordPress dependencies
  */
 import { __, _n, sprintf } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 import {
 	TabPanel,
 	TabbableContainer,
@@ -365,9 +365,9 @@ const connectComponent = connect(
 	{ showInsertionPoint, hideInsertionPoint, fetchReusableBlocks }
 );
 
-export default flow(
-	withInstanceId,
-	withSpokenMessages,
+export default compose(
+	connectComponent,
 	withContext( 'editor' )( ( settings ) => pick( settings, 'blockTypes' ) ),
-	connectComponent
+	withSpokenMessages,
+	withInstanceId
 )( InserterMenu );
diff --git a/editor/components/page-attributes/check.js b/editor/components/page-attributes/check.js
@@ -2,12 +2,13 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { get, flowRight } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withAPIData } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -44,7 +45,7 @@ const applyWithAPIData = withAPIData( ( props ) => {
 	};
 } );
 
-export default flowRight( [
+export default compose( [
 	applyConnect,
 	applyWithAPIData,
 ] )( PageAttributesCheck );
diff --git a/editor/components/page-attributes/index.js b/editor/components/page-attributes/index.js
@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { flowRight } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -58,7 +58,7 @@ const applyConnect = connect(
 	}
 );
 
-export default flowRight( [
+export default compose( [
 	applyConnect,
 	withInstanceId,
 ] )( PageAttributes );
diff --git a/editor/components/post-author/check.js b/editor/components/post-author/check.js
@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { flowRight, filter } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withAPIData, withInstanceId } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 export function PostAuthorCheck( { user, users, children } ) {
 	const authors = filter( users.data, ( { capabilities } ) => capabilities.level_1 );
@@ -24,7 +25,7 @@ const applyWithAPIData = withAPIData( () => {
 	};
 } );
 
-export default flowRight( [
+export default compose( [
 	applyWithAPIData,
 	withInstanceId,
 ] )( PostAuthorCheck );
diff --git a/editor/components/post-author/index.js b/editor/components/post-author/index.js
@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { filter, flowRight } from 'lodash';
+import { filter } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { withAPIData, withInstanceId } from '@wordpress/components';
-import { Component } from '@wordpress/element';
+import { Component, compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -89,7 +89,7 @@ const applyWithAPIData = withAPIData( () => {
 	};
 } );
 
-export default flowRight( [
+export default compose( [
 	applyConnect,
 	applyWithAPIData,
 	withInstanceId,

diff --git a/editor/components/post-featured-image/index.js b/editor/components/post-featured-image/index.js
@@ -2,14 +2,15 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { flowRight, get } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Button, Spinner, ResponsiveWrapper, withAPIData } from '@wordpress/components';
 import { MediaUploadButton } from '@wordpress/blocks';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -92,7 +93,7 @@ const applyWithAPIData = withAPIData( ( { featuredImageId, postTypeName } ) => {
 	};
 } );
 
-export default flowRight(
+export default compose(
 	applyConnect,
 	applyWithAPIData,
 )( PostFeaturedImage );
diff --git a/editor/components/post-format/check.js b/editor/components/post-format/check.js
@@ -2,12 +2,13 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { get, flowRight } from 'lodash';
+import { get } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { withAPIData } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -22,7 +23,7 @@ function PostFormatCheck( { postType, children } ) {
 	return children;
 }
 
-export default flowRight( [
+export default compose( [
 	connect(
 		( state ) => {
 			return {

diff --git a/editor/components/post-format/index.js b/editor/components/post-format/index.js
@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import { find, flowRight } from 'lodash';
+import { find } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { withInstanceId } from '@wordpress/components';
+import { compose } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -68,7 +69,7 @@ function PostFormat( { onUpdatePostFormat, postFormat = 'standard', suggestedFor
 	/* eslint-enable jsx-a11y/no-onchange */
 }
 
-export default flowRight( [
+export default compose( [
 	connect(
 		( state ) => {
 			return {