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 ] );