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

Navigation Editor: Move selected menu ID to the store #31320

Merged
merged 4 commits into from
May 5, 2021
Merged

Navigation Editor: Move selected menu ID to the store #31320

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5987efa
Move selected menu id to the store
Mamaduka Apr 28, 2021
e4b5d8a
Add useSelectedMenuId hook
Mamaduka Apr 29, 2021
aaf414e
Use selected menu ID from storage
Mamaduka Apr 29, 2021
903cf96
Add useEffect dependencies
Mamaduka May 4, 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
183 changes: 78 additions & 105 deletions packages/edit-navigation/src/components/layout/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ import { __ } from '@wordpress/i18n';
import UnselectedMenuState from './unselected-menu-state';
import {
IsMenuNameControlFocusedContext,
MenuIdContext,
useNavigationEditor,
useNavigationBlockEditor,
useMenuNotifications,
Expand Down Expand Up @@ -80,15 +79,6 @@ export default function Layout( { blockEditorSettings } ) {
navigationPost
);

const [ isMenuLoaded, setIsMenuLoaded ] = useState( false );

useEffect( () => {
if ( ! isMenuLoaded && menus?.length ) {
setIsMenuLoaded( true );
selectMenu( menus[ 0 ].id );
}
}, [ menus ] );

const { hasSidebarEnabled } = useSelect(
( select ) => ( {
hasSidebarEnabled: !! select(
Expand Down Expand Up @@ -136,106 +126,89 @@ export default function Layout( { blockEditorSettings } ) {
} }
useSubRegistry={ false }
>
<MenuIdContext.Provider value={ selectedMenuId }>
<IsMenuNameControlFocusedContext.Provider
value={ useMemo(
() => [
isMenuNameControlFocused,
setIsMenuNameControlFocused,
],
[ isMenuNameControlFocused ]
) }
>
<InterfaceSkeleton
className={ classnames(
'edit-navigation-layout',
{
'has-permanent-sidebar': hasPermanentSidebar,
}
) }
labels={ interfaceLabels }
header={
<Header
isMenuSelected={ isMenuSelected }
isPending={ ! hasLoadedMenus }
menus={ menus }
selectedMenuId={ selectedMenuId }
onSelectMenu={ selectMenu }
navigationPost={ navigationPost }
/>
}
content={
<>
{ ! hasFinishedInitialLoad && (
<Spinner />
) }
<IsMenuNameControlFocusedContext.Provider
value={ useMemo(
() => [
isMenuNameControlFocused,
setIsMenuNameControlFocused,
],
[ isMenuNameControlFocused ]
) }
>
<InterfaceSkeleton
className={ classnames( 'edit-navigation-layout', {
'has-permanent-sidebar': hasPermanentSidebar,
} ) }
labels={ interfaceLabels }
header={
<Header
isMenuSelected={ isMenuSelected }
isPending={ ! hasLoadedMenus }
menus={ menus }
selectedMenuId={ selectedMenuId }
onSelectMenu={ selectMenu }
navigationPost={ navigationPost }
/>
}
content={
<>
{ ! hasFinishedInitialLoad && <Spinner /> }

{ ! isMenuSelected &&
hasFinishedInitialLoad && (
<UnselectedMenuState
{ ! isMenuSelected &&
hasFinishedInitialLoad && (
<UnselectedMenuState
onSelectMenu={ selectMenu }
onCreate={ selectMenu }
menus={ menus }
/>
) }
{ isBlockEditorReady && (
<>
<BlockToolbar
isFixed={ ! isLargeViewport }
/>
<div
className="edit-navigation-layout__content-area"
ref={ contentAreaRef }
>
<Editor
isPending={
! hasLoadedMenus
}
blocks={ blocks }
/>
<InspectorAdditions
isManageLocationsModalOpen={
isManageLocationsModalOpen
}
openManageLocationsModal={
openManageLocationsModal
}
closeManageLocationsModal={
closeManageLocationsModal
}
onSelectMenu={ selectMenu }
onCreate={ selectMenu }
menus={ menus }
/>
) }
{ isBlockEditorReady && (
<>
<BlockToolbar
isFixed={
! isLargeViewport
menuId={ selectedMenuId }
onDeleteMenu={ deleteMenu }
isMenuBeingDeleted={
isMenuBeingDeleted
}
/>
<div
className="edit-navigation-layout__content-area"
ref={ contentAreaRef }
>
<Editor
isPending={
! hasLoadedMenus
}
blocks={ blocks }
/>
<InspectorAdditions
isManageLocationsModalOpen={
isManageLocationsModalOpen
}
openManageLocationsModal={
openManageLocationsModal
}
closeManageLocationsModal={
closeManageLocationsModal
}
onSelectMenu={
selectMenu
}
menus={ menus }
menuId={
selectedMenuId
}
onDeleteMenu={
deleteMenu
}
isMenuBeingDeleted={
isMenuBeingDeleted
}
/>
</div>
</>
) }
</>
}
sidebar={
( hasPermanentSidebar ||
hasSidebarEnabled ) && (
<ComplementaryArea.Slot scope="core/edit-navigation" />
)
}
/>
<Sidebar
hasPermanentSidebar={ hasPermanentSidebar }
/>
</IsMenuNameControlFocusedContext.Provider>
</MenuIdContext.Provider>
</div>
</>
) }
</>
}
sidebar={
( hasPermanentSidebar ||
hasSidebarEnabled ) && (
<ComplementaryArea.Slot scope="core/edit-navigation" />
)
}
/>
<Sidebar hasPermanentSidebar={ hasPermanentSidebar } />
</IsMenuNameControlFocusedContext.Provider>
</BlockEditorProvider>
<Popover.Slot />
</SlotFillProvider>
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-navigation/src/components/name-display/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { BlockControls } from '@wordpress/block-editor';
import {
untitledMenu,
useMenuEntity,
useSelectedMenuData,
useSelectedMenuId,
IsMenuNameControlFocusedContext,
} from '../../hooks';

import { sprintf, __ } from '@wordpress/i18n';
export default function NameDisplay() {
const { menuId } = useSelectedMenuData();
const [ menuId ] = useSelectedMenuId();
const { editedMenu } = useMenuEntity( menuId );
const [ , setIsMenuNameEditFocused ] = useContext(
IsMenuNameControlFocusedContext
Expand Down
4 changes: 2 additions & 2 deletions packages/edit-navigation/src/components/name-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,15 +11,15 @@ import {
IsMenuNameControlFocusedContext,
untitledMenu,
useMenuEntity,
useSelectedMenuData,
useSelectedMenuId,
} from '../../hooks';

export function NameEditor() {
const [ isMenuNameEditFocused, setIsMenuNameEditFocused ] = useContext(
IsMenuNameControlFocusedContext
);

const { menuId } = useSelectedMenuData();
const [ menuId ] = useSelectedMenuId();
const { editedMenu, editMenuEntityRecord, menuEntityData } = useMenuEntity(
menuId
);
Expand Down
3 changes: 1 addition & 2 deletions packages/edit-navigation/src/hooks/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,11 @@ import { __ } from '@wordpress/i18n';
import { createContext } from '@wordpress/element';

export const untitledMenu = __( '(untitled menu)' );
export const MenuIdContext = createContext();
export const IsMenuNameControlFocusedContext = createContext();

export { default as useMenuEntity } from './use-menu-entity';
export { default as useNavigationEditor } from './use-navigation-editor';
export { default as useNavigationBlockEditor } from './use-navigation-block-editor';
export { default as useMenuNotifications } from './use-menu-notifications';
export { default as useSelectedMenuData } from './use-selected-menu-data';
export { default as useSelectedMenuId } from './use-selected-menu-id';
export { default as useMenuLocations } from './use-menu-locations';
4 changes: 2 additions & 2 deletions packages/edit-navigation/src/hooks/use-menu-locations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { merge } from 'lodash';
/**
* Internal dependencies
*/
import { useMenuEntity, useSelectedMenuData } from './index';
import { useMenuEntity, useSelectedMenuId } from './index';

const locationsForMenuId = ( menuLocationsByName, id ) =>
Object.values( menuLocationsByName )
Expand All @@ -21,7 +21,7 @@ const locationsForMenuId = ( menuLocationsByName, id ) =>
export default function useMenuLocations() {
const [ menuLocationsByName, setMenuLocationsByName ] = useState( null );

const { menuId } = useSelectedMenuData();
const [ menuId ] = useSelectedMenuId();
const { editMenuEntityRecord, menuEntityData } = useMenuEntity( menuId );
useEffect( () => {
let isMounted = true;
Expand Down
21 changes: 10 additions & 11 deletions packages/edit-navigation/src/hooks/use-navigation-editor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import { useSelect, useDispatch } from '@wordpress/data';
import { useState, useEffect } from '@wordpress/element';
import { store as noticesStore } from '@wordpress/notices';
import { store as coreStore } from '@wordpress/core-data';

/**
* Internal dependencies
*/
import { store as editNavigationStore } from '../store';
import { store as noticesStore } from '@wordpress/notices';
import { __, sprintf } from '@wordpress/i18n';
import { useSelectedMenuId } from './index';

const getMenusData = ( select ) => {
const selectors = select( 'core' );
Expand All @@ -29,18 +32,17 @@ export default function useNavigationEditor() {
true,
false,
].map( ( bool ) => () => setIsManageLocationsModalOpen( bool ) );
const { deleteMenu: _deleteMenu } = useDispatch( 'core' );
const [ selectedMenuId, setSelectedMenuId ] = useState( null );
const { deleteMenu: _deleteMenu } = useDispatch( coreStore );
const [ selectedMenuId, setSelectedMenuId ] = useSelectedMenuId();
const [ hasFinishedInitialLoad, setHasFinishedInitialLoad ] = useState(
false
);
const { menus, hasLoadedMenus } = useSelect( getMenusData, [] );
const [ isMenuSelected, setIsMenuSelected ] = useState( true );

const { createErrorNotice, createInfoNotice } = useDispatch( noticesStore );
const isMenuBeingDeleted = useSelect(
( select ) =>
select( 'core' ).isDeletingEntityRecord(
select( coreStore ).isDeletingEntityRecord(
'root',
'menu',
selectedMenuId
Expand Down Expand Up @@ -73,7 +75,7 @@ export default function useNavigationEditor() {
force: true,
} );
if ( didDeleteMenu ) {
setSelectedMenuId( null );
setSelectedMenuId( 0 );
Copy link
Contributor

Choose a reason for hiding this comment

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

Just checking...is it safe to set this to 0? What if there are no menus left?

Copy link
Member Author

Choose a reason for hiding this comment

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

If there are no menus left, the screen will display create menu placeholder. I'm using 0 here so we can have a single type for selectedMenuId. But having null as in no menu was selected also makes sense to me.

createInfoNotice(
sprintf(
// translators: %s: the name of a menu.
Expand All @@ -90,9 +92,6 @@ export default function useNavigationEditor() {
}
};

useEffect( () => setIsMenuSelected( selectedMenuId !== null ), [
selectedMenuId,
] );
return {
menus,
hasLoadedMenus,
Expand All @@ -105,6 +104,6 @@ export default function useNavigationEditor() {
openManageLocationsModal,
closeManageLocationsModal,
isManageLocationsModalOpen,
isMenuSelected,
isMenuSelected: !! selectedMenuId,
};
}
22 changes: 0 additions & 22 deletions packages/edit-navigation/src/hooks/use-selected-menu-data.js
View file
Open in desktop

This file was deleted.

26 changes: 26 additions & 0 deletions packages/edit-navigation/src/hooks/use-selected-menu-id.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* WordPress dependencies
*/
import { useSelect, useDispatch } from '@wordpress/data';

/**
* Internal dependencies
*/
import { store as editNavigationStore } from '../store';

/**
* Returns selected menu ID and the setter.
*
* @return {[number, Function]} A tuple where first item is the
* selected menu ID and second is
* the setter.
*/
export default function useSelectedMenuId() {
const selectedMenuId = useSelect(
( select ) => select( editNavigationStore ).getSelectedMenuId(),
[]
);
const { setSelectedMenuId } = useDispatch( editNavigationStore );

return [ selectedMenuId, setSelectedMenuId ];
}
Loading