Menus: fix randomly closing item edit view

Observing `sites` in menus/main.jsx forces a re-render whenever `sites` changes.
When this happens, the edit-tracking `lock` object is created anew, causing any currently
open item edit box to close.

This change removes the use of the lock lib entirely, using state to track
the currently edited item.

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 }