Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Extract Navigation Block data fetching and management to hook(s) #31825

Merged
merged 7 commits into from
May 14, 2021
Merged

Extract Navigation Block data fetching and management to hook(s) #31825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6637b54
Moving managing data for Navigation entities into hook
getdave May 14, 2021
86c4f7d
Refactor to individual hooks for pages and menus entities
getdave May 14, 2021
31b2ffb
Refactor menuItem to seperate entity
getdave May 14, 2021
924a537
Perf optimise with empty dep array on useSelect
getdave May 14, 2021
7a1af8d
Move has* into the select
getdave May 14, 2021
c8997e7
Tidy up menu items from menus hook
getdave May 14, 2021
2c88d09
Fix error caused by moving has* within the useSelect
getdave May 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 5 additions & 67 deletions packages/block-library/src/navigation/placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import {
MenuItem,
Spinner,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';

import {
forwardRef,
useCallback,
Expand All @@ -19,12 +19,11 @@ import {
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { navigation, chevronDown, Icon } from '@wordpress/icons';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/

import useNavigationEntities from './use-navigation-entities';
import PlaceholderPreview from './placeholder-preview';
import menuItemsToBlocks from './menu-items-to-blocks';

Expand All @@ -34,76 +33,15 @@ function NavigationPlaceholder( { onCreate }, ref ) {
const [ isCreatingFromMenu, setIsCreatingFromMenu ] = useState( false );

const {
pages,
isResolvingPages,
hasResolvedPages,
menus,
isResolvingMenus,
hasResolvedMenus,
menuItems,
hasResolvedMenuItems,
} = useSelect(
( select ) => {
const {
getEntityRecords,
getMenus,
getMenuItems,
isResolving,
hasFinishedResolution,
} = select( coreStore );
const pagesParameters = [
'postType',
'page',
{
parent: 0,
order: 'asc',
orderby: 'id',
per_page: -1,
},
];
const menusParameters = [ { per_page: -1 } ];
const hasSelectedMenu = selectedMenu !== undefined;
const menuItemsParameters = hasSelectedMenu
? [
{
menus: selectedMenu,
per_page: -1,
},
]
: undefined;

return {
pages: getEntityRecords( ...pagesParameters ),
isResolvingPages: isResolving(
'getEntityRecords',
pagesParameters
),
hasResolvedPages: hasFinishedResolution(
'getEntityRecords',
pagesParameters
),
menus: getMenus( ...menusParameters ),
isResolvingMenus: isResolving( 'getMenus', menusParameters ),
hasResolvedMenus: hasFinishedResolution(
'getMenus',
menusParameters
),
menuItems: hasSelectedMenu
? getMenuItems( ...menuItemsParameters )
: undefined,
hasResolvedMenuItems: hasSelectedMenu
? hasFinishedResolution(
'getMenuItems',
menuItemsParameters
)
: false,
};
},
[ selectedMenu ]
);
hasPages,
hasMenus,
} = useNavigationEntities( selectedMenu );

const hasPages = !! ( hasResolvedPages && pages?.length );
const hasMenus = !! ( hasResolvedMenus && menus?.length );
const isLoading = isResolvingPages || isResolvingMenus;

const createFromMenu = useCallback( () => {
Expand Down
142 changes: 142 additions & 0 deletions packages/block-library/src/navigation/use-navigation-entities.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';

/**
* @typedef {Object} NavigationEntitiesData
* @property {Array|undefined} pages - a collection of WP Post entity objects of post type "Page".
* @property {boolean} isResolvingPages - indicates whether the request to fetch pages is currently resolving.
* @property {boolean} hasResolvedPages - indicates whether the request to fetch pages has finished resolving.
* @property {Array|undefined} menus - a collection of Menu entity objects.
* @property {boolean} isResolvingMenus - indicates whether the request to fetch menus is currently resolving.
* @property {boolean} hasResolvedMenus - indicates whether the request to fetch menus has finished resolving.
* @property {Array|undefined} menusItems - a collection of Menu Item entity objects for the current menuId.
* @property {boolean} hasResolvedMenuItems - indicates whether the request to fetch menuItems has finished resolving.
* @property {boolean} hasPages - indicates whether there is currently any data for pages.
* @property {boolean} hasMenus - indicates whether there is currently any data for menus.
*/

/**
* Manages fetching and resolution state for all entities required
* for the Navigation block.
*
* @param {number} menuId the menu for which to retrieve menuItem data.
* @return { NavigationEntitiesData } the entity data.
*/
export default function useNavigationEntities( menuId ) {
return {
...usePageEntities(),
...useMenuEntities(),
...useMenuItemEntities( menuId ),
};
}

function useMenuEntities() {
const { menus, isResolvingMenus, hasResolvedMenus } = useSelect(
( select ) => {
const { getMenus, isResolving, hasFinishedResolution } = select(
coreStore
);

const menusParameters = [ { per_page: -1 } ];

return {
menus: getMenus( ...menusParameters ),
isResolvingMenus: isResolving( 'getMenus', menusParameters ),
hasResolvedMenus: hasFinishedResolution(
'getMenus',
menusParameters
),
};
},
[]
);

return {
menus,
isResolvingMenus,
hasResolvedMenus,
hasMenus: !! ( hasResolvedMenus && menus?.length ),
getdave marked this conversation as resolved.
Show resolved Hide resolved
};
}

function useMenuItemEntities( menuId ) {
const { menuItems, hasResolvedMenuItems } = useSelect(
( select ) => {
const { getMenuItems, hasFinishedResolution } = select( coreStore );

const hasSelectedMenu = menuId !== undefined;
const menuItemsParameters = hasSelectedMenu
? [
{
menus: menuId,
per_page: -1,
},
]
: undefined;

return {
menuItems: hasSelectedMenu
? getMenuItems( ...menuItemsParameters )
: undefined,
hasResolvedMenuItems: hasSelectedMenu
? hasFinishedResolution(
'getMenuItems',
menuItemsParameters
)
: false,
};
},
[ menuId ]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: will this selector be retriggered when the selected menu ID (passed from placeholder.js) changes?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think so. This should be similar to useEffect dependencies.

);

return {
menuItems,
hasResolvedMenuItems,
};
}

function usePageEntities() {
const { pages, isResolvingPages, hasResolvedPages } = useSelect(
( select ) => {
const {
getEntityRecords,
isResolving,
hasFinishedResolution,
} = select( coreStore );

const pagesParameters = [
'postType',
'page',
{
parent: 0,
order: 'asc',
orderby: 'id',
per_page: -1,
},
];

return {
pages: getEntityRecords( ...pagesParameters ) || null,
isResolvingPages: isResolving(
'getEntityRecords',
pagesParameters
),
hasResolvedPages: hasFinishedResolution(
'getEntityRecords',
pagesParameters
),
};
},
[]
);
getdave marked this conversation as resolved.
Show resolved Hide resolved

return {
pages,
isResolvingPages,
hasResolvedPages,
hasPages: !! ( hasResolvedPages && pages?.length ),
getdave marked this conversation as resolved.
Show resolved Hide resolved
};
}