From f38dd31e7b853291f5b797103637426f9c9169cb Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 11 Dec 2017 10:58:58 +0100 Subject: [PATCH 1/2] Framework: Replace flowRight occurences with compose for HOCs --- blocks/library/image/block.js | 5 ++--- components/autocomplete/index.js | 6 +++--- editor/components/inserter/index.js | 6 +++--- editor/components/page-attributes/check.js | 5 +++-- editor/components/page-attributes/index.js | 4 ++-- editor/components/post-author/check.js | 5 +++-- editor/components/post-author/index.js | 6 +++--- editor/components/post-featured-image/index.js | 5 +++-- editor/components/post-format/check.js | 5 +++-- editor/components/post-format/index.js | 5 +++-- editor/components/post-pending-status/check.js | 4 ++-- editor/components/post-pending-status/index.js | 4 ++-- editor/components/post-publish-button/index.js | 5 +++-- editor/components/post-publish-button/label.js | 4 ++-- editor/components/post-sticky/check.js | 4 ++-- editor/components/post-sticky/index.js | 4 ++-- editor/components/post-taxonomies/index.js | 5 +++-- editor/components/post-visibility/index.js | 5 ++--- 18 files changed, 46 insertions(+), 41 deletions(-) diff --git a/blocks/library/image/block.js b/blocks/library/image/block.js index 6eb1ff4db356c..aa56b8ea7b6c3 100644 --- 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 index ff0beb0dd9973..6a58db012f1a2 100644 --- 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/inserter/index.js b/editor/components/inserter/index.js index c00d83388c0c8..c00282dde95da 100644 --- a/editor/components/inserter/index.js +++ b/editor/components/inserter/index.js @@ -3,7 +3,7 @@ */ import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; -import { flowRight, isEmpty } from 'lodash'; +import { isEmpty } from 'lodash'; /** * WordPress dependencies @@ -11,7 +11,7 @@ import { flowRight, isEmpty } from 'lodash'; 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/page-attributes/check.js b/editor/components/page-attributes/check.js index 760705f91d46d..44ea0fd608f8e 100644 --- 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 index 2b28f2bfea72c..51e3cde00ab57 100644 --- 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 index f77baf590ad3c..bb395b131f3c5 100644 --- 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 index 68ed59e208389..6a2341a0ef06f 100644 --- 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 index b7fe5a7e75995..f0b593d2c278a 100644 --- a/editor/components/post-featured-image/index.js +++ b/editor/components/post-featured-image/index.js @@ -2,7 +2,7 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight, get } from 'lodash'; +import { get } from 'lodash'; /** * WordPress dependencies @@ -10,6 +10,7 @@ import { flowRight, get } from 'lodash'; 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 index 7d2894b7524a0..a22d44eafb66a 100644 --- 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 index 307c4df2432ff..02439c3446e6f 100644 --- 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 { diff --git a/editor/components/post-pending-status/check.js b/editor/components/post-pending-status/check.js index 937252ccf6bda..b6e7e84362b42 100644 --- a/editor/components/post-pending-status/check.js +++ b/editor/components/post-pending-status/check.js @@ -2,12 +2,12 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { withAPIData } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -34,7 +34,7 @@ const applyWithAPIData = withAPIData( () => { }; } ); -export default flowRight( +export default compose( applyConnect, applyWithAPIData )( PostPendingStatusCheck ); diff --git a/editor/components/post-pending-status/index.js b/editor/components/post-pending-status/index.js index 986d01ec42fbe..9c20397f3ad58 100644 --- a/editor/components/post-pending-status/index.js +++ b/editor/components/post-pending-status/index.js @@ -2,13 +2,13 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { FormToggle, withInstanceId } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -48,7 +48,7 @@ const applyConnect = connect( } ); -export default flowRight( +export default compose( applyConnect, withInstanceId )( PostPendingStatus ); diff --git a/editor/components/post-publish-button/index.js b/editor/components/post-publish-button/index.js index ff9d8c21af68e..26772619b8ea0 100644 --- a/editor/components/post-publish-button/index.js +++ b/editor/components/post-publish-button/index.js @@ -3,12 +3,13 @@ */ import { connect } from 'react-redux'; import classnames from 'classnames'; -import { flowRight, noop } from 'lodash'; +import { noop } from 'lodash'; /** * WordPress dependencies */ import { Button, withAPIData } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -92,7 +93,7 @@ const applyWithAPIData = withAPIData( () => { }; } ); -export default flowRight( [ +export default compose( [ applyConnect, applyWithAPIData, ] )( PostPublishButton ); diff --git a/editor/components/post-publish-button/label.js b/editor/components/post-publish-button/label.js index 6b8ef59060eb9..8315575a65e1b 100644 --- a/editor/components/post-publish-button/label.js +++ b/editor/components/post-publish-button/label.js @@ -2,13 +2,13 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { withAPIData } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -62,7 +62,7 @@ const applyWithAPIData = withAPIData( () => { }; } ); -export default flowRight( [ +export default compose( [ applyConnect, applyWithAPIData, ] )( PublishButtonLabel ); diff --git a/editor/components/post-sticky/check.js b/editor/components/post-sticky/check.js index 9cb9ecc3b184f..9476370b906c4 100644 --- a/editor/components/post-sticky/check.js +++ b/editor/components/post-sticky/check.js @@ -2,12 +2,12 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { withAPIData } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -41,7 +41,7 @@ const applyWithAPIData = withAPIData( () => { }; } ); -export default flowRight( [ +export default compose( [ applyConnect, applyWithAPIData, ] )( PostStickyCheck ); diff --git a/editor/components/post-sticky/index.js b/editor/components/post-sticky/index.js index 1fbdb1e552df7..a97b3690785bc 100644 --- a/editor/components/post-sticky/index.js +++ b/editor/components/post-sticky/index.js @@ -2,13 +2,13 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; import { FormToggle, withInstanceId } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -49,7 +49,7 @@ const applyConnect = connect( }, ); -export default flowRight( [ +export default compose( [ applyConnect, withInstanceId, ] )( PostSticky ); diff --git a/editor/components/post-taxonomies/index.js b/editor/components/post-taxonomies/index.js index 730854a4502ee..a11b384c8a4b5 100644 --- a/editor/components/post-taxonomies/index.js +++ b/editor/components/post-taxonomies/index.js @@ -2,12 +2,13 @@ * External Dependencies */ import { connect } from 'react-redux'; -import { flowRight, filter } from 'lodash'; +import { filter } from 'lodash'; /** * WordPress dependencies */ import { withAPIData } from '@wordpress/components'; +import { compose } from '@wordpress/element'; /** * Internal dependencies @@ -49,7 +50,7 @@ const applyWithAPIData = withAPIData( () => ( { taxonomies: '/wp/v2/taxonomies?context=edit', } ) ); -export default flowRight( [ +export default compose( [ applyConnect, applyWithAPIData, ] )( PostTaxonomies ); diff --git a/editor/components/post-visibility/index.js b/editor/components/post-visibility/index.js index 05e08581428d6..d42bf9acc40b3 100644 --- a/editor/components/post-visibility/index.js +++ b/editor/components/post-visibility/index.js @@ -2,13 +2,12 @@ * External dependencies */ import { connect } from 'react-redux'; -import { flowRight } from 'lodash'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { Component } from '@wordpress/element'; +import { Component, compose } from '@wordpress/element'; import { withInstanceId } from '@wordpress/components'; /** @@ -147,7 +146,7 @@ const applyConnect = connect( } ); -export default flowRight( +export default compose( applyConnect, withInstanceId )( PostVisibility ); From db4d437a8be93d5e8b317ab104591fefd049631f Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 11 Dec 2017 12:16:06 +0100 Subject: [PATCH 2/2] Framework: Replace or flow occurences with HOCs with compose utility --- editor/components/block-drop-zone/index.js | 5 +++-- editor/components/block-mover/index.js | 5 +++-- .../block-settings-menu/block-delete-button.js | 3 ++- editor/components/block-switcher/index.js | 5 +++-- .../test/__snapshots__/index.js.snap | 2 +- .../editor-global-keyboard-shortcuts/index.js | 6 +++--- editor/components/inserter/menu.js | 10 +++++----- editor/edit-post/modes/visual-editor/inserter.js | 5 ++--- 8 files changed, 22 insertions(+), 19 deletions(-) diff --git a/editor/components/block-drop-zone/index.js b/editor/components/block-drop-zone/index.js index 832ad2f5f7ed2..3cde4cf1a95af 100644 --- 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 index ad1d5b2650580..ae3f2e76500b1 100644 --- a/editor/components/block-mover/index.js +++ b/editor/components/block-mover/index.js @@ -2,7 +2,7 @@ * External dependencies */ import { connect } from 'react-redux'; -import { first, last, flow } from 'lodash'; +import { first, last } from 'lodash'; /** * WordPress dependencies @@ -10,6 +10,7 @@ import { first, last, flow } from 'lodash'; 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 index fef2fecf06406..c4f542e0c81b3 100644 --- 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 index 138ae63cc40b5..ed8a396a3060b 100644 --- a/editor/components/block-switcher/index.js +++ b/editor/components/block-switcher/index.js @@ -2,7 +2,7 @@ * 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 @@ -10,6 +10,7 @@ import { every, uniq, get, reduce, find, flow } from 'lodash'; 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 index a32487237ad7d..77a3c0478734a 100644 --- 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`] = `
- + { return { diff --git a/editor/components/inserter/menu.js b/editor/components/inserter/menu.js index 30f55b047cbdf..2d91af86dc5e1 100644 --- 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/edit-post/modes/visual-editor/inserter.js b/editor/edit-post/modes/visual-editor/inserter.js index 0f4f865643643..480d18d1fdb01 100644 --- a/editor/edit-post/modes/visual-editor/inserter.js +++ b/editor/edit-post/modes/visual-editor/inserter.js @@ -3,14 +3,13 @@ */ import { connect } from 'react-redux'; import classnames from 'classnames'; -import { flow } from 'lodash'; /** * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; import { IconButton, withContext } from '@wordpress/components'; -import { Component } from '@wordpress/element'; +import { Component, compose } from '@wordpress/element'; import { createBlock, BlockIcon } from '@wordpress/blocks'; /** @@ -82,7 +81,7 @@ export class VisualEditorInserter extends Component { } } -export default flow( +export default compose( connect( ( state ) => { return {