diff --git a/packages/edit-navigation/src/components/delete-menu-button/index.js b/packages/edit-navigation/src/components/delete-menu-button/index.js index 118b1cc972fd4e..9cf1799ebfaf71 100644 --- a/packages/edit-navigation/src/components/delete-menu-button/index.js +++ b/packages/edit-navigation/src/components/delete-menu-button/index.js @@ -1,20 +1,10 @@ /** * WordPress dependencies */ -import apiFetch from '@wordpress/api-fetch'; import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -export default function DeleteMenuButton( { menuId, onDelete } ) { - const deleteMenu = async ( recordId ) => { - const path = `/__experimental/menus/${ recordId }?force=true`; - const deletedRecord = await apiFetch( { - path, - method: 'DELETE', - } ); - return deletedRecord.previous; - }; - +export default function DeleteMenuButton( { onDelete } ) { const askToDelete = async () => { if ( // eslint-disable-next-line no-alert @@ -22,8 +12,7 @@ export default function DeleteMenuButton( { menuId, onDelete } ) { __( 'Are you sure you want to delete this navigation?' ) ) ) { - const deletedMenu = await deleteMenu( menuId ); - onDelete( deletedMenu.id ); + onDelete(); } }; diff --git a/packages/edit-navigation/src/components/menus-editor/index.js b/packages/edit-navigation/src/components/menus-editor/index.js index 2f2b5c2407c803..41ffacf0cd0c30 100644 --- a/packages/edit-navigation/src/components/menus-editor/index.js +++ b/packages/edit-navigation/src/components/menus-editor/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useDispatch, useSelect } from '@wordpress/data'; import { useState, useEffect } from '@wordpress/element'; import { Button, @@ -32,20 +32,19 @@ export default function MenusEditor( { blockEditorSettings } ) { false ); + const { deleteMenu } = useDispatch( 'core' ); + useEffect( () => { if ( ! hasCompletedFirstLoad && hasLoadedMenus ) { setHasCompletedFirstLoad( true ); } - }, [ hasLoadedMenus ] ); + }, [ menus, hasLoadedMenus ] ); const [ menuId, setMenuId ] = useState(); - const [ stateMenus, setStateMenus ] = useState(); const [ showCreateMenuPanel, setShowCreateMenuPanel ] = useState( false ); useEffect( () => { if ( menus?.length ) { - setStateMenus( menus ); - // Only set menuId if it's currently unset. if ( ! menuId ) { setMenuId( menus[ 0 ].id ); @@ -57,7 +56,7 @@ export default function MenusEditor( { blockEditorSettings } ) { return ; } - const hasMenus = !! stateMenus?.length; + const hasMenus = !! menus?.length; const isCreateMenuPanelVisible = hasCompletedFirstLoad && ( ! hasMenus || showCreateMenuPanel ); @@ -75,7 +74,7 @@ export default function MenusEditor( { blockEditorSettings } ) { ( { + options={ menus?.map( ( menu ) => ( { value: menu.id, label: menu.name, } ) ) } @@ -96,7 +95,7 @@ export default function MenusEditor( { blockEditorSettings } ) { { isCreateMenuPanelVisible && ( { - const newStateMenus = stateMenus.filter( ( menu ) => { - return menu.id !== deletedMenu; - } ); - setStateMenus( newStateMenus ); - if ( newStateMenus.length ) { - setMenuId( newStateMenus[ 0 ].id ); - } else { - setMenuId(); - } + onDeleteMenu={ async () => { + await deleteMenu( menuId, 'force=true' ); + setMenuId( false ); } } /> ) }