Merge pull request #1234 from Automattic/fix/menu-edit-rerender

Menus: fix randomly closing item edit view

client/my-sites/menus/main.jsx

@@ -16,7 +16,6 @@ var protectForm = require( 'lib/mixins/protect-form' ),
 	SidebarNavigation = require( 'my-sites/sidebar-navigation' ),
 	Main = require( 'components/main' ),
 	Menu = require( './menu' ),
-	Lock = require( 'lib/mixins/lock' ),
 	MenuSaveButton = require( './menus-save-button' ),
 	EmptyContent = require( 'components/empty-content' ),
 	LoadingPlaceholder = require( './loading-placeholder' ),
@@ -237,7 +236,6 @@ var Menus = React.createClass( {
 						selectedMenu={ selectedMenu }
 						selectedLocation={ selectedLocation }
 						siteMenus={ this.props.siteMenus }
-						itemsLock={ new Lock() }
 						setBusy={ this.setBusy }
 						confirmDiscard={ this.confirmDiscard.bind( null, 'menu' ) } />;
 		}

client/my-sites/menus/menu-item-list.jsx

@@ -50,7 +50,8 @@ var MenuItemList = React.createClass( {
 							item={ menuItem }
 							items={ menuItem.items }
 							depth={ this.props.depth + 1 }
-							lock={ this.props.lock }
+							getEditItem={ this.props.getEditItem }
+							setEditItem={ this.props.setEditItem }
 							moveState={ this.props.moveState }
 							doMoveItem={ this.props.doMoveItem }
 							addState={ this.props.addState }
@@ -100,22 +101,18 @@ var MenuItem = React.createClass( {
 		};
 	},
 
-	componentWillUnmount: function() {
-		this.props.lock.unlock( this, { silent: true } );
-	},
-
 	edit: function() {
-		this.props.lock.lock( this );
+		this.props.setEditItem( this.props.item.id );
 	},
 
 	cancelCurrentOperation: function() {
-		this.props.lock.unlock( this );
+		this.props.setEditItem( null );
 		this.props.doMoveItem( 'cancel' );
 		this.props.doAddItem( 'cancel' );
 	},
 
 	startMoveItem: function() {
-		this.props.lock.unlock( this );
+		this.props.setEditItem( null );
 		this.props.doMoveItem( 'setSource', this.props.item.id );
 	},
 
@@ -141,15 +138,15 @@ var MenuItem = React.createClass( {
 	},
 
 	isEditing: function() {
-		return this.props.lock.hasLock( this );
+		return this.props.getEditItem() === this.props.item.id;
 	},
 
 	addNewItemInProgress: function() {
 		return !! this.props.addState.targetId;
 	},
 
 	canEdit: function() {
-		return ! this.props.lock.mustWait( this ) &&
+		return ! this.props.getEditItem() &&
 			! this.props.moveState.moving &&
 			! this.addNewItemInProgress() &&
 			! this.props.confirmDeleteItem;
@@ -380,7 +377,8 @@ var MenuItem = React.createClass( {
 					depth={ this.props.depth }
 					menuData={ this.props.menuData }
 					items={ this.props.items }
-					lock={ this.props.lock }
+					setEditItem={ this.props.setEditItem }
+					getEditItem={ this.props.getEditItem }
 					moveState={ this.props.moveState }
 					doMoveItem={ this.props.doMoveItem }
 					addState={ this.props.addState }

client/my-sites/menus/menu.jsx

@@ -21,15 +21,16 @@ var protectForm = require( 'lib/mixins/protect-form' ),
  */
 var Menu = React.createClass( {
 
-	mixins: [ protectForm.mixin, observe( 'itemsLock' ) ],
+	mixins: [ protectForm.mixin ],
 
 	MOUSE_DRAG_STEP_PIXELS: 16,
 
 	getInitialState: function() {
 		return {
 			moveState: {},
 			addState: {},
-			confirmDeleteItem: null
+			confirmDeleteItem: null,
+			editItemId: null
 		};
 	},
 
@@ -190,11 +191,16 @@ var Menu = React.createClass( {
 		this.setState( { confirmDeleteItem: id } );
 	},
 
-	renderAddTip: function() {
-		var isNotEditing = this.props.itemsLock.isLocked &&
-				! this.props.itemsLock.isLocked();
+	setEditItem: function( itemId ) {
+		this.setState( { editItemId: itemId } );
+	},
 
-		return isNotEditing ?
+	getEditItem: function() {
+		return this.state.editItemId;
+	},
+
+	renderAddTip: function() {
+		return ! this.getEditItem() ?
 			<div className="menus__add-item-footer-label">
 				{ this.translate( 'Add new item' ) }
 			</div> : null;
@@ -215,7 +221,8 @@ var Menu = React.createClass( {
 
 			menuItemList = (
 				<MenuItemList items={ this.props.selectedMenu.items }
-						lock={ this.props.itemsLock }
+						setEditItem={ this.setEditItem }
+						getEditItem={ this.getEditItem }
 						moveState={ this.state.moveState }
 						doMoveItem={ this.doMoveItem }
 						addState={ this.state.addState }