From b70ff93218d0e9e3f2ee2f50f71b5d7ddcc8f5bd Mon Sep 17 00:00:00 2001
From: Andrew Duthie <andrew@andrewduthie.com>
Date: Fri, 29 Jul 2016 12:34:39 -0400
Subject: [PATCH] Editor: Bind EditorPageOrder to Redux state

---
 .../editor-drawer/page-options.jsx            |   2 +-
 .../post-editor/editor-page-order/index.jsx   | 103 +++++++++---------
 .../post-editor/editor-page-order/style.scss  |   8 +-
 3 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/client/post-editor/editor-drawer/page-options.jsx b/client/post-editor/editor-drawer/page-options.jsx
index e43b744fca84a..3736829aa1e3c 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
 					<PageTemplates post={ post } />
 				</PageTemplatesData>
 			) }
-			<PageOrder menuOrder={ get( post, 'menu_order', 0 ) } />
+			<PageOrder />
 		</Accordion>
 	);
 }
diff --git a/client/post-editor/editor-page-order/index.jsx b/client/post-editor/editor-page-order/index.jsx
index c062839378472..f2ae94d4ceac2 100644
--- a/client/post-editor/editor-page-order/index.jsx
+++ b/client/post-editor/editor-page-order/index.jsx
@@ -1,75 +1,78 @@
 /**
  * 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 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 newOrder = parseInt( event.target.value ) || 0;
+		const { menuOrder, siteId, postId } = this.props;
+		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 (
 			<div className="editor-page-order">
 				<label>
-					<span className="editor-page-order__label-text">{ this.translate( 'Order', { context: 'Editor: Field label for page menu order.' } ) }</span>
-					<TextInput value={ this.props.menuOrder } onChange={ this.updateMenuOrder } onBlur={ this.validateMenuOrder } />
+					<span className="editor-page-order__label-text">
+						{ translate( 'Order', { context: 'Editor: Field label for page menu order.' } ) }
+					</span>
+					<TextInput
+						type="number"
+						value={ menuOrder }
+						pattern="[0-9]*"
+						onChange={ this.editMenuOrder }
+						onBlur={ this.editMenuOrder }
+						className="editor-page-order__input" />
 				</label>
 			</div>
 		);
 	}
-} );
+}
+
+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 6af9cf0f2797f..3d3236c8c65e2 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;
+	}
 }