Skip to content

Commit

Permalink
State: Extract selectors to a global selectors file (#720)
Browse files Browse the repository at this point in the history
  • Loading branch information
youknowriad authored and nylen committed May 9, 2017
1 parent ac15682 commit db94589
Show file tree
Hide file tree
Showing 13 changed files with 653 additions and 36 deletions.
6 changes: 3 additions & 3 deletions editor/block-mover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* External dependencies
*/
import { connect } from 'react-redux';
import { first, last } from 'lodash';

/**
* WordPress dependencies
Expand All @@ -13,6 +12,7 @@ import IconButton from 'components/icon-button';
* Internal dependencies
*/
import './style.scss';
import { isFirstBlock, isLastBlock } from '../selectors';

function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {
return (
Expand All @@ -35,8 +35,8 @@ function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast } ) {

export default connect(
( state, ownProps ) => ( {
isFirst: first( state.editor.blockOrder ) === ownProps.uid,
isLast: last( state.editor.blockOrder ) === ownProps.uid
isFirst: isFirstBlock( state, ownProps.uid ),
isLast: isLastBlock( state, ownProps.uid )
} ),
( dispatch, ownProps ) => ( {
onMoveDown() {
Expand Down
3 changes: 2 additions & 1 deletion editor/block-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import IconButton from 'components/icon-button';
* Internal dependencies
*/
import './style.scss';
import { getBlock } from '../selectors';

class BlockSwitcher extends wp.element.Component {
constructor() {
Expand Down Expand Up @@ -96,7 +97,7 @@ class BlockSwitcher extends wp.element.Component {

export default connect(
( state, ownProps ) => ( {
block: state.editor.blocksByUid[ ownProps.uid ]
block: getBlock( state, ownProps.uid )
} ),
( dispatch, ownProps ) => ( {
onTransform( block, blockType ) {
Expand Down
3 changes: 2 additions & 1 deletion editor/header/mode-switcher/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Dashicon from 'components/dashicon';
* Internal dependencies
*/
import './style.scss';
import { getEditorMode } from '../../selectors';

/**
* Set of available mode options.
Expand Down Expand Up @@ -57,7 +58,7 @@ function ModeSwitcher( { mode, onSwitch } ) {

export default connect(
( state ) => ( {
mode: state.mode
mode: getEditorMode( state )
} ),
( dispatch ) => ( {
onSwitch( mode ) {
Expand Down
3 changes: 2 additions & 1 deletion editor/header/saved-state/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import Dashicon from 'components/dashicon';
* Internal dependencies
*/
import './style.scss';
import { isEditedPostDirty } from '../../selectors';

function SavedState( { isDirty } ) {
const classes = classNames( 'editor-saved-state', {
Expand All @@ -35,6 +36,6 @@ function SavedState( { isDirty } ) {

export default connect(
( state ) => ( {
isDirty: state.editor.dirty,
isDirty: isEditedPostDirty( state ),
} )
)( SavedState );
7 changes: 4 additions & 3 deletions editor/header/tools/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import Button from 'components/button';
import './style.scss';
import Inserter from '../../inserter';
import PublishButton from './publish-button';
import { isEditorSidebarOpened, hasEditorUndo, hasEditorRedo } from '../../selectors';

function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar } ) {
return (
Expand Down Expand Up @@ -50,9 +51,9 @@ function Tools( { undo, redo, hasUndo, hasRedo, isSidebarOpened, toggleSidebar }

export default connect(
( state ) => ( {
hasUndo: state.editor.history.past.length > 0,
hasRedo: state.editor.history.future.length > 0,
isSidebarOpened: state.isSidebarOpened,
hasUndo: hasEditorUndo( state ),
hasRedo: hasEditorRedo( state ),
isSidebarOpened: isEditorSidebarOpened( state ),
} ),
( dispatch ) => ( {
undo: () => dispatch( { type: 'UNDO' } ),
Expand Down
28 changes: 18 additions & 10 deletions editor/header/tools/publish-button.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@ import Button from 'components/button';
* Internal dependencies
*/
import { savePost } from '../../actions';
import {
isEditedPostDirty,
getCurrentPost,
getPostEdits,
getBlocks,
isSavingPost,
didPostSaveRequestSucceed,
didPostSaveRequestFail,
isSavingNewPost
} from '../../selectors';

function PublishButton( {
post,
Expand Down Expand Up @@ -66,16 +76,14 @@ function PublishButton( {

export default connect(
( state ) => ( {
post: state.currentPost,
edits: state.editor.edits,
dirty: state.editor.dirty,
blocks: state.editor.blockOrder.map( ( uid ) => (
state.editor.blocksByUid[ uid ]
) ),
isRequesting: state.saving.requesting,
isSuccessful: state.saving.successful,
isError: !! state.saving.error,
requestIsNewPost: state.saving.isNew,
post: getCurrentPost( state ),
edits: getPostEdits( state ),
dirty: isEditedPostDirty( state ),
blocks: getBlocks( state ),
isRequesting: isSavingPost( state ),
isSuccessful: didPostSaveRequestSucceed( state ),
isError: !! didPostSaveRequestFail( state ),
requestIsNewPost: isSavingNewPost( state ),
} ),
( dispatch ) => ( {
onUpdate( post, edits, blocks ) {
Expand Down
5 changes: 3 additions & 2 deletions editor/layout/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import Header from '../header';
import Sidebar from '../sidebar';
import TextEditor from '../modes/text-editor';
import VisualEditor from '../modes/visual-editor';
import { getEditorMode, isEditorSidebarOpened } from '../selectors';

function Layout( { mode, isSidebarOpened } ) {
const className = classnames( 'editor-layout', {
Expand All @@ -31,6 +32,6 @@ function Layout( { mode, isSidebarOpened } ) {
}

export default connect( ( state ) => ( {
mode: state.mode,
isSidebarOpened: state.isSidebarOpened
mode: getEditorMode( state ),
isSidebarOpened: isEditorSidebarOpened( state )
} ) )( Layout );
5 changes: 2 additions & 3 deletions editor/modes/text-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import Textarea from 'react-autosize-textarea';
*/
import './style.scss';
import PostTitle from '../../post-title';
import { getBlocks } from '../../selectors';

function TextEditor( { blocks, onChange } ) {
return (
Expand Down Expand Up @@ -45,9 +46,7 @@ function TextEditor( { blocks, onChange } ) {

export default connect(
( state ) => ( {
blocks: state.editor.blockOrder.map( ( uid ) => (
state.editor.blocksByUid[ uid ]
) )
blocks: getBlocks( state )
} ),
( dispatch ) => ( {
onChange( value ) {
Expand Down
24 changes: 16 additions & 8 deletions editor/modes/visual-editor/block.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ import Toolbar from 'components/toolbar';
*/
import BlockMover from '../../block-mover';
import BlockSwitcher from '../../block-switcher';
import {
getPreviousBlock,
getBlock,
getBlockFocus,
getBlockOrder,
isBlockHovered,
isBlockSelected,
isTypingInBlock
} from '../../selectors';

class VisualEditorBlock extends wp.element.Component {
constructor() {
Expand Down Expand Up @@ -230,15 +239,14 @@ class VisualEditorBlock extends wp.element.Component {

export default connect(
( state, ownProps ) => {
const order = state.editor.blockOrder.indexOf( ownProps.uid );
return {
previousBlock: state.editor.blocksByUid[ state.editor.blockOrder[ order - 1 ] ] || null,
block: state.editor.blocksByUid[ ownProps.uid ],
isSelected: state.selectedBlock.uid === ownProps.uid,
isHovered: state.hoveredBlock === ownProps.uid,
focus: state.selectedBlock.uid === ownProps.uid ? state.selectedBlock.focus : null,
isTyping: state.selectedBlock.uid === ownProps.uid ? state.selectedBlock.typing : false,
order
previousBlock: getPreviousBlock( state, ownProps.uid ),
block: getBlock( state, ownProps.uid ),
isSelected: isBlockSelected( state, ownProps.uid ),
isHovered: isBlockHovered( state, ownProps.uid ),
focus: getBlockFocus( state, ownProps.uid ),
isTyping: isTypingInBlock( state, ownProps.uid ),
order: getBlockOrder( state, ownProps.uid )
};
},
( dispatch, ownProps ) => ( {
Expand Down
3 changes: 2 additions & 1 deletion editor/modes/visual-editor/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import './style.scss';
import Inserter from '../../inserter';
import VisualEditorBlock from './block';
import PostTitle from '../../post-title';
import { getBlockUids } from '../../selectors';

function VisualEditor( { blocks } ) {
return (
Expand All @@ -24,5 +25,5 @@ function VisualEditor( { blocks } ) {
}

export default connect( ( state ) => ( {
blocks: state.editor.blockOrder
blocks: getBlockUids( state )
} ) )( VisualEditor );
5 changes: 2 additions & 3 deletions editor/post-title/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Textarea from 'react-autosize-textarea';
* Internal dependencies
*/
import './style.scss';
import { getEditedPostTitle } from '../selectors';

/**
* Constants
Expand All @@ -34,9 +35,7 @@ function PostTitle( { title, onUpdate } ) {

export default connect(
( state ) => ( {
title: state.editor.edits.title === undefined
? state.currentPost.title.raw
: state.editor.edits.title,
title: getEditedPostTitle( state ),
} ),
( dispatch ) => {
return {
Expand Down
101 changes: 101 additions & 0 deletions editor/selectors.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/**
* External dependencies
*/
import { first, last } from 'lodash';

export function getEditorMode( state ) {
return state.mode;
}

export function isEditorSidebarOpened( state ) {
return state.isSidebarOpened;
}

export function hasEditorUndo( state ) {
return state.editor.history.past.length > 0;
}

export function hasEditorRedo( state ) {
return state.editor.history.future.length > 0;
}

export function isEditedPostDirty( state ) {
return state.editor.dirty;
}

export function getCurrentPost( state ) {
return state.currentPost;
}

export function getPostEdits( state ) {
return state.editor.edits;
}

export function getEditedPostTitle( state ) {
return state.editor.edits.title === undefined
? state.currentPost.title.raw
: state.editor.edits.title;
}

export function getBlock( state, uid ) {
return state.editor.blocksByUid[ uid ];
}

export function getBlocks( state ) {
return state.editor.blockOrder.map( ( uid ) => (
state.editor.blocksByUid[ uid ]
) );
}

export function getBlockUids( state ) {
return state.editor.blockOrder;
}

export function getBlockOrder( state, uid ) {
return state.editor.blockOrder.indexOf( uid );
}

export function isFirstBlock( state, uid ) {
return first( state.editor.blockOrder ) === uid;
}

export function isLastBlock( state, uid ) {
return last( state.editor.blockOrder ) === uid;
}

export function getPreviousBlock( state, uid ) {
const order = getBlockOrder( state, uid );
return state.editor.blocksByUid[ state.editor.blockOrder[ order - 1 ] ] || null;
}

export function isBlockSelected( state, uid ) {
return state.selectedBlock.uid === uid;
}

export function isBlockHovered( state, uid ) {
return state.hoveredBlock === uid;
}

export function getBlockFocus( state, uid ) {
return state.selectedBlock.uid === uid ? state.selectedBlock.focus : null;
}

export function isTypingInBlock( state, uid ) {
return state.selectedBlock.uid === uid ? state.selectedBlock.typing : false;
}

export function isSavingPost( state ) {
return state.saving.requesting;
}

export function didPostSaveRequestSucceed( state ) {
return state.saving.successful;
}

export function didPostSaveRequestFail( state ) {
return !! state.saving.error;
}

export function isSavingNewPost( state ) {
return state.saving.isNew;
}
Loading

0 comments on commit db94589

Please sign in to comment.