From 321e9f8017d7133b952cc84906406fd0802a2ff2 Mon Sep 17 00:00:00 2001
From: grzegorz_marzencki <grzegorz.marzencki@a8c.com>
Date: Mon, 29 Mar 2021 13:09:25 +0200
Subject: [PATCH] save theme location on button click

---
 .../src/components/name-editor/index.js       | 10 +++++++-
 .../src/hooks/use-menu-entity.js              | 12 +++------
 .../src/hooks/use-menu-locations.js           | 25 ++++++++++---------
 3 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/packages/edit-navigation/src/components/name-editor/index.js b/packages/edit-navigation/src/components/name-editor/index.js
index b948ee893d23a1..39fca565e11edb 100644
--- a/packages/edit-navigation/src/components/name-editor/index.js
+++ b/packages/edit-navigation/src/components/name-editor/index.js
@@ -9,6 +9,7 @@ import { useEffect, useRef, useContext } from '@wordpress/element';
 import { TextControl } from '@wordpress/components';
 import {
 	IsMenuNameControlFocusedContext,
+	untitledMenu,
 	useMenuEntity,
 	useSelectedMenuData,
 } from '../../hooks';
@@ -19,7 +20,14 @@ export function NameEditor() {
 	);
 
 	const { menuId } = useSelectedMenuData();
-	const { editMenuName, editedMenuName } = useMenuEntity( menuId );
+	const { editedMenu, editMenuEntityRecord, menuEntityData } = useMenuEntity(
+		menuId
+	);
+	const editedMenuName = menuId && editedMenu.name;
+
+	const editMenuName = ( name = untitledMenu ) =>
+		editMenuEntityRecord( ...menuEntityData, { name } );
+
 	const inputRef = useRef();
 	useEffect( () => {
 		if ( isMenuNameEditFocused ) inputRef.current.focus();
diff --git a/packages/edit-navigation/src/hooks/use-menu-entity.js b/packages/edit-navigation/src/hooks/use-menu-entity.js
index b0347b115aaa65..d6a00a7e694fa3 100644
--- a/packages/edit-navigation/src/hooks/use-menu-entity.js
+++ b/packages/edit-navigation/src/hooks/use-menu-entity.js
@@ -7,8 +7,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
  */
 import { MENU_KIND, MENU_POST_TYPE } from '../constants';
 
-import { untitledMenu } from './index';
-
 export default function useMenuEntity( menuId ) {
 	const { editEntityRecord } = useDispatch( 'core' );
 
@@ -20,13 +18,9 @@ export default function useMenuEntity( menuId ) {
 		[ menuId ]
 	);
 
-	const editedMenuName = menuId && editedMenu.name;
-
-	const editMenuName = ( name = untitledMenu ) =>
-		editEntityRecord( ...menuEntityData, { name } );
-
 	return {
-		editedMenuName,
-		editMenuName,
+		editedMenu,
+		menuEntityData,
+		editMenuEntityRecord: editEntityRecord,
 	};
 }
diff --git a/packages/edit-navigation/src/hooks/use-menu-locations.js b/packages/edit-navigation/src/hooks/use-menu-locations.js
index 548a34fc0138b1..d1512a60c9eeb3 100644
--- a/packages/edit-navigation/src/hooks/use-menu-locations.js
+++ b/packages/edit-navigation/src/hooks/use-menu-locations.js
@@ -3,26 +3,26 @@
  */
 import { useState, useEffect, useMemo, useCallback } from '@wordpress/element';
 import apiFetch from '@wordpress/api-fetch';
-import { useDispatch } from '@wordpress/data';
 
 /**
  * External dependencies
  */
 import { merge } from 'lodash';
+/**
+ * Internal dependencies
+ */
+import { useMenuEntity, useSelectedMenuData } from './index';
 
 const locationsForMenuId = ( menuLocationsByName, id ) =>
 	Object.values( menuLocationsByName )
 		.filter( ( { menu } ) => menu === id )
 		.map( ( { name } ) => name );
 
-const withLocations = ( menuLocationsByName ) => ( id ) => ( {
-	id,
-	locations: locationsForMenuId( menuLocationsByName, id ),
-} );
-
 export default function useMenuLocations() {
 	const [ menuLocationsByName, setMenuLocationsByName ] = useState( null );
 
+	const { menuId } = useSelectedMenuData();
+	const { editMenuEntityRecord, menuEntityData } = useMenuEntity( menuId );
 	useEffect( () => {
 		let isMounted = true;
 
@@ -41,8 +41,6 @@ export default function useMenuLocations() {
 		return () => ( isMounted = false );
 	}, [] );
 
-	const { saveMenu } = useDispatch( 'core' );
-
 	const assignMenuToLocation = useCallback(
 		async ( locationName, newMenuId ) => {
 			const oldMenuId = menuLocationsByName[ locationName ].menu;
@@ -53,10 +51,13 @@ export default function useMenuLocations() {
 
 			setMenuLocationsByName( newMenuLocationsByName );
 
-			[ oldMenuId, newMenuId ]
-				.filter( Boolean )
-				.map( withLocations( newMenuLocationsByName ) )
-				.forEach( saveMenu );
+			const activeMenuId = oldMenuId || newMenuId;
+			editMenuEntityRecord( ...menuEntityData, {
+				locations: locationsForMenuId(
+					newMenuLocationsByName,
+					activeMenuId
+				),
+			} );
 		},
 		[ menuLocationsByName ]
 	);