Update components to use 'useMenuEntityProp' for convenience

WordPress · Apr 23, 2021 · 32c0c39 · 32c0c39
1 parent b790a14
commit 32c0c39
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 28 deletions.
diff --git a/packages/edit-navigation/src/components/header/index.js b/packages/edit-navigation/src/components/header/index.js
@@ -10,7 +10,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import SaveButton from './save-button';
 import MenuSwitcher from '../menu-switcher';
-import { useMenuEntity } from '../../hooks';
+import { useMenuEntityProp } from '../../hooks';
 
 export default function Header( {
 	isMenuSelected,
@@ -20,8 +20,7 @@ export default function Header( {
 	isPending,
 	navigationPost,
 } ) {
-	const { editedMenu: selectedMenu } = useMenuEntity( selectedMenuId );
-	const menuName = selectedMenu ? selectedMenu.name : undefined;
+	const [ menuName ] = useMenuEntityProp( 'name', selectedMenuId );
 	let actionHeaderText;
 
 	if ( menuName ) {

diff --git a/packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js b/packages/edit-navigation/src/components/inspector-additions/auto-add-pages.js
@@ -1,25 +1,19 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useState, useEffect } from '@wordpress/element';
 import { ToggleControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
-export default function AutoAddPages( { menuId } ) {
-	const menu = useSelect( ( select ) => select( 'core' ).getMenu( menuId ), [
-		menuId,
-	] );
-
-	const [ autoAddPages, setAutoAddPages ] = useState( null );
-
-	useEffect( () => {
-		if ( autoAddPages === null && menu ) {
-			setAutoAddPages( menu.auto_add );
-		}
-	}, [ autoAddPages, menu ] );
+/**
+ * Internal dependencies
+ */
+import { useMenuEntityProp } from '../../hooks';
 
-	const { saveMenu } = useDispatch( 'core' );
+export default function AutoAddPages( { menuId } ) {
+	const [ autoAddPages, setAutoAddPages ] = useMenuEntityProp(
+		'auto_add',
+		menuId
+	);
 
 	return (
 		<ToggleControl
@@ -28,13 +22,7 @@ export default function AutoAddPages( { menuId } ) {
 				'Automatically add published top-level pages to this menu.'
 			) }
 			checked={ autoAddPages ?? false }
-			onChange={ ( newAutoAddPages ) => {
-				setAutoAddPages( newAutoAddPages );
-				saveMenu( {
-					...menu,
-					auto_add: newAutoAddPages,
-				} );
-			} }
+			onChange={ setAutoAddPages }
 		/>
 	);
 }
diff --git a/packages/edit-navigation/src/components/name-display/index.js b/packages/edit-navigation/src/components/name-display/index.js
@@ -9,20 +9,20 @@ import { BlockControls } from '@wordpress/block-editor';
  */
 import {
 	untitledMenu,
-	useMenuEntity,
+	useMenuEntityProp,
 	useSelectedMenuData,
 	IsMenuNameControlFocusedContext,
 } from '../../hooks';
 
 import { sprintf, __ } from '@wordpress/i18n';
 export default function NameDisplay() {
 	const { menuId } = useSelectedMenuData();
-	const { editedMenu } = useMenuEntity( menuId );
+	const [ name ] = useMenuEntityProp( 'name', menuId );
 	const [ , setIsMenuNameEditFocused ] = useContext(
 		IsMenuNameControlFocusedContext
 	);
 
-	const menuName = editedMenu?.name ?? untitledMenu;
+	const menuName = name ?? untitledMenu;
 
 	return (
 		<BlockControls>

diff --git a/packages/edit-navigation/src/components/name-editor/index.js b/packages/edit-navigation/src/components/name-editor/index.js
@@ -4,6 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import { TextControl } from '@wordpress/components';
 import { useEffect, useRef, useContext } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */