Use the new deleteEntityRecord to delete menus (#22428)

* adds delete menu with entity delete * updates the delete and removes the stateMenus * passes the new force query param * fix bug with resetting current menu after delete
WordPress · Jun 30, 2020 · d55f893 · d55f893
1 parent 98ea4a8
commit d55f893
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 31 deletions.
diff --git a/packages/edit-navigation/src/components/delete-menu-button/index.js b/packages/edit-navigation/src/components/delete-menu-button/index.js
@@ -1,29 +1,18 @@
 /**
  * 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
 			window.confirm(
 				__( '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
@@ -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 <Spinner />;
 	}
 
-	const hasMenus = !! stateMenus?.length;
+	const hasMenus = !! menus?.length;
 	const isCreateMenuPanelVisible =
 		hasCompletedFirstLoad && ( ! hasMenus || showCreateMenuPanel );
 
@@ -75,7 +74,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
 							<SelectControl
 								className="edit-navigation-menus-editor__menu-select-control"
 								label={ __( 'Select navigation to edit:' ) }
-								options={ stateMenus?.map( ( menu ) => ( {
+								options={ menus?.map( ( menu ) => ( {
 									value: menu.id,
 									label: menu.name,
 								} ) ) }
@@ -96,7 +95,7 @@ export default function MenusEditor( { blockEditorSettings } ) {
 			</Card>
 			{ isCreateMenuPanelVisible && (
 				<CreateMenuArea
-					menus={ stateMenus }
+					menus={ menus }
 					onCancel={
 						// User can only cancel out of menu creation if there
 						// are other menus to fall back to showing.
@@ -114,16 +113,9 @@ export default function MenusEditor( { blockEditorSettings } ) {
 				<NavigationEditor
 					menuId={ menuId }
 					blockEditorSettings={ blockEditorSettings }
-					onDeleteMenu={ ( deletedMenu ) => {
-						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 );
 					} }
 				/>
 			) }