From dcb67824cedcec9a6d08c09808227d274b63aa10 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 29 Jul 2016 12:34:39 -0400 Subject: [PATCH 1/2] Editor: Bind EditorPageOrder to Redux state --- .../editor-drawer/page-options.jsx | 2 +- .../post-editor/editor-page-order/index.jsx | 108 +++++++++--------- .../post-editor/editor-page-order/style.scss | 8 +- 3 files changed, 64 insertions(+), 54 deletions(-) diff --git a/client/post-editor/editor-drawer/page-options.jsx b/client/post-editor/editor-drawer/page-options.jsx index e43b744fca84a5..3736829aa1e3cd 100644 --- a/client/post-editor/editor-drawer/page-options.jsx +++ b/client/post-editor/editor-drawer/page-options.jsx @@ -41,7 +41,7 @@ function EditorDrawerPageOptions( { translate, siteId, postId, post, postType, h ) } - + ); } diff --git a/client/post-editor/editor-page-order/index.jsx b/client/post-editor/editor-page-order/index.jsx index c0628393784725..f96a5d35f07aa1 100644 --- a/client/post-editor/editor-page-order/index.jsx +++ b/client/post-editor/editor-page-order/index.jsx @@ -1,75 +1,79 @@ /** * External dependencies */ -import React, { PropTypes } from 'react'; -import PureRenderMixin from 'react-pure-render/mixin'; -import isNaN from 'lodash/isNaN'; +import React, { Component, PropTypes } from 'react'; +import { connect } from 'react-redux'; +import { localize } from 'i18n-calypso'; /** * Internal dependencies */ +import AccordionSection from 'components/accordion/section'; import TextInput from 'components/forms/form-text-input'; -import postActions from 'lib/posts/actions'; import { recordEvent, recordStat } from 'lib/posts/stats'; +import { getSelectedSiteId } from 'state/ui/selectors'; +import { getEditorPostId } from 'state/ui/editor/selectors'; +import { getEditedPostValue } from 'state/posts/selectors'; +import { editPost } from 'state/posts/actions'; -export default React.createClass( { - displayName: 'EditorPageOrder', +class EditorPageOrder extends Component { + static propTypes = { + siteId: PropTypes.number, + postId: PropTypes.number, + menuOrder: PropTypes.number + }; - mixins: [ PureRenderMixin ], + static defaultProps = { + menuOrder: 0 + }; - propTypes: { - menuOrder: PropTypes.oneOfType( [ - PropTypes.number, - PropTypes.string - ] ) - }, - - getDefaultProps() { - return { - menuOrder: 0 - }; - }, - - updateMenuOrder( event ) { - let newOrder = parseInt( event.target.value ); - - if ( isNaN( newOrder ) ) { - newOrder = ''; - } - - this.editMenuOrder( newOrder ); - }, + constructor() { + super( ...arguments ); - validateMenuOrder( event ) { - let newOrder = parseInt( event.target.value ); + this.editMenuOrder = this.editMenuOrder.bind( this ); + } - if ( isNaN( newOrder ) ) { - newOrder = 0; + editMenuOrder( event ) { + const { menuOrder, siteId, postId } = this.props; + const newOrder = parseInt( event.target.value, 10 ) || 0; + if ( newOrder === menuOrder ) { + return; } - this.editMenuOrder( newOrder ); - }, - - editMenuOrder( newOrder ) { - if ( newOrder !== this.props.menuOrder ) { - recordStat( 'advanced_menu_order_changed' ); - recordEvent( 'Changed page menu order' ); - - // TODO: REDUX - remove flux actions when whole post-editor is reduxified - postActions.edit( { - menu_order: newOrder - } ); - } - }, + recordStat( 'advanced_menu_order_changed' ); + recordEvent( 'Changed page menu order' ); + this.props.editPost( { menu_order: newOrder }, siteId, postId ); + } render() { + const { translate, menuOrder } = this.props; + return ( -
+ -
+ ); } -} ); +} + +export default connect( + ( state ) => { + const siteId = getSelectedSiteId( state ); + const postId = getEditorPostId( state ); + const menuOrder = getEditedPostValue( state, siteId, postId, 'menu_order' ); + + return { siteId, postId, menuOrder }; + }, + { editPost } +)( localize( EditorPageOrder ) ); diff --git a/client/post-editor/editor-page-order/style.scss b/client/post-editor/editor-page-order/style.scss index 6af9cf0f2797f1..3d3236c8c65e26 100644 --- a/client/post-editor/editor-page-order/style.scss +++ b/client/post-editor/editor-page-order/style.scss @@ -10,7 +10,13 @@ text-transform: uppercase; } -.editor-page-order input[type="text"] { +input[type="number"].editor-page-order__input { + -moz-appearance: textfield; font-size: 13px; width: 50px; + + &::-webkit-outer-spin-button, + &::-webkit-inner-spin-button { + -webkit-appearance: none; + } } From 9c9f2754cfded1bc66b8da486cf872f7f869a8d3 Mon Sep 17 00:00:00 2001 From: Andrew Duthie Date: Fri, 29 Jul 2016 15:03:29 -0400 Subject: [PATCH 2/2] Editor: Only bump order stat once per session --- client/post-editor/editor-page-order/index.jsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/client/post-editor/editor-page-order/index.jsx b/client/post-editor/editor-page-order/index.jsx index f96a5d35f07aa1..6b318bd4b167d3 100644 --- a/client/post-editor/editor-page-order/index.jsx +++ b/client/post-editor/editor-page-order/index.jsx @@ -31,6 +31,7 @@ class EditorPageOrder extends Component { super( ...arguments ); this.editMenuOrder = this.editMenuOrder.bind( this ); + this.statTracked = false; } editMenuOrder( event ) { @@ -40,8 +41,12 @@ class EditorPageOrder extends Component { return; } - recordStat( 'advanced_menu_order_changed' ); - recordEvent( 'Changed page menu order' ); + if ( ! this.statTracked ) { + this.statTracked = true; + recordStat( 'advanced_menu_order_changed' ); + recordEvent( 'Changed page menu order' ); + } + this.props.editPost( { menu_order: newOrder }, siteId, postId ); }