@elementor/editor-site-navigation 0.19.9 → 0.19.10

package/src/components/panel/posts-list/list-items/list-item-view.tsx

@@ -3,12 +3,11 @@ import {
 	bindMenu,
 	bindTrigger,
 	Divider,
+	IconButton,
 	ListItem,
 	ListItemButton,
-	ListItemIcon,
 	ListItemText,
 	Menu,
-	ToggleButton,
 	usePopupState,
 } from '@elementor/ui';
 import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
@@ -39,15 +38,13 @@ export default function ListItemView( { post }: { post: Post } ) {
 			<ListItem
 				disablePadding
 				secondaryAction={
-					<ToggleButton
+					<IconButton
 						value
-						color="secondary"
 						size="small"
-						selected={ popupState.isOpen }
 						{ ...bindTrigger( popupState ) }
 					>
 						<DotsVerticalIcon fontSize="small" />
-					</ToggleButton>
+					</IconButton>
 				}
 			>
 				<ListItemButton
@@ -58,18 +55,14 @@ export default function ListItemView( { post }: { post: Post } ) {
 						}
 					} }
 					dense
-					disableGutters
 				>
-					<ListItemIcon />
 					<ListItemText
 						disableTypography={ true }
 					>
 						<PageTitleAndStatus page={ post } />
 					</ListItemText>
 					{ post.isHome &&
-						<ListItemIcon>
-							<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
-						</ListItemIcon>
+					<HomeIcon titleAccess={ __( 'Homepage', 'elementor' ) } color="disabled" />
 					}
 				</ListItemButton>
 			</ListItem>
@@ -83,7 +76,7 @@ export default function ListItemView( { post }: { post: Post } ) {
 				<Delete post={ post } />
 				<View post={ post } />
 				<Divider />
-				<SetHome post={ post } />
+				<SetHome post={ post } closeMenu={ () => popupState.close() } />
 			</Menu>
 		</>
 	);

package/src/components/panel/posts-list/posts-collapsible-list.tsx

@@ -8,6 +8,7 @@ import CollapsibleList from './collapsible-list';
 import PostListItem from './post-list-item';
 import { useHomepage } from '../../../hooks/use-homepage';
 import AddNewButton from '../add-new-button';
+import ErrorState from './error-state';
 
 type Props = {
 	isOpenByDefault?: boolean,
@@ -15,9 +16,13 @@ type Props = {
 
 export default function PostsCollapsibleList( { isOpenByDefault = false }: Props ) {
 	const { type, editMode } = usePostListContext();
-	const { data: posts, isLoading: postsLoading } = usePosts( type );
+	const { data: posts, isLoading: postsLoading, isError: postsError } = usePosts( type );
 	const { data: homepageSettings } = useHomepage();
 
+	if ( postsError ) {
+		return <ErrorState />;
+	}
+
 	if ( ! posts || postsLoading ) {
 		return (
 			<Box sx={ { px: 5 } }>
@@ -43,12 +48,36 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 	const isHomepageSet = homepageSettings?.show_on_front === 'page' && !! homepageSettings?.page_on_front;
 	const homepageId = isHomepageSet ? homepageSettings.page_on_front : null;
 
+	const mappedPosts = posts.map( ( post ) => {
+		if ( post.id === homepageId ) {
+			return { ...post, isHome: true };
+		}
+
+		return post;
+	} );
+
+	const sortedPosts = mappedPosts.sort( ( a, b ) => {
+		if ( a.id === homepageId ) {
+			return -1;
+		}
+
+		if ( b.id === homepageId ) {
+			return 1;
+		}
+
+		return 0;
+	} );
+
 	return (
 		<>
 			<Box
 				display="flex"
 				justifyContent="flex-end"
 				alignItems="center"
+				sx={ {
+					py: 1,
+					px: 2,
+				} }
 			>
 				<AddNewButton />
 			</Box>
@@ -58,8 +87,7 @@ export default function PostsCollapsibleList( { isOpenByDefault = false }: Props
 					Icon={ PageTypeIcon }
 					isOpenByDefault={ isOpenByDefault || false }
 				>
-					{ posts.map( ( post ) => {
-						post = { ...post, isHome: post.id === homepageId };
+					{ sortedPosts.map( ( post ) => {
 						return <PostListItem key={ post.id } post={ post } />;
 					} ) }
 					{

package/src/components/panel/shell.tsx

@@ -3,17 +3,21 @@ import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/edit
 import { __ } from '@wordpress/i18n';
 import PostsCollapsibleList from './posts-list/posts-collapsible-list';
 import { PostListContextProvider } from '../../contexts/post-list-context';
+import ErrorSnackbar from './error-snackbar';
 
 const Shell = () => {
+	const [ isErrorSnackbarOpen, setIsErrorSnackbarOpen ] = React.useState( false );
+
 	return (
 		<Panel>
 			<PanelHeader>
 				<PanelHeaderTitle>{ __( 'Pages', 'elementor' ) }</PanelHeaderTitle>
 			</PanelHeader>
 			<PanelBody>
-				<PostListContextProvider type={ 'page' }>
+				<PostListContextProvider type={ 'page' } setError={ () => setIsErrorSnackbarOpen( true ) }>
 					<PostsCollapsibleList isOpenByDefault={ true } />
 				</PostListContextProvider>
+				<ErrorSnackbar open={ isErrorSnackbarOpen } onClose={ () => setIsErrorSnackbarOpen( false ) } />
 			</PanelBody>
 		</Panel>
 	);

package/src/components/shared/page-title-and-status.tsx

@@ -12,6 +12,7 @@ const PageStatus = ( { status }: { status: string } ) => {
 		<Typography
 			component="span"
 			variant="body2"
+			color="text.secondary"
 			sx={ {
 				textTransform: 'capitalize',
 				fontStyle: 'italic',
@@ -31,6 +32,7 @@ const PageTitle = ( { title }: { title: string } ) => {
 		<Typography
 			component="span"
 			variant="body2"
+			color="text.secondary"
 			noWrap
 			sx={ {
 				flexBasis: 'auto',

package/src/components/top-bar/__tests__/add-new-page.test.tsx

@@ -3,8 +3,9 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { __useActiveDocument as useActiveDocument, __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
-import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
+import useRecentPosts from '../../../hooks/use-recent-posts';
 import useCreatePage from '../../../hooks/use-create-page';
+import { RecentPost } from '../../../types';
 
 jest.mock( '@elementor/editor-documents', () => ( {
 	__useActiveDocument: jest.fn(),
@@ -30,9 +31,9 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 	it( 'should render add new page button', () => {
 		// Arrange.
 		const isLoading = false;
-		const recentPosts: Post[] = [];
+		const recentPosts: RecentPost[] = [];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
 
 		render( <RecentlyEdited /> );
 
@@ -48,11 +49,11 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 	it( 'should trigger create page hook on click', async () => {
 		// Arrange.
 		const isLoading = false;
-		const recentPosts: Post[] = [];
+		const recentPosts: RecentPost[] = [];
 		const create = jest.fn().mockReturnValue( Promise.resolve( { id: 123 } ) );
 		const navigateToDocument = jest.fn();
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
 		jest.mocked( useCreatePage ).mockReturnValue( { isLoading, create } );
 		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
 

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -3,7 +3,8 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { __useHostDocument as useHostDocument, __useActiveDocument as useActiveDocument, __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
-import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
+import useRecentPosts from '../../../hooks/use-recent-posts';
+import { RecentPost } from '../../../types';
 
 jest.mock( '@elementor/editor-documents', () => ( {
 	__useActiveDocument: jest.fn(),
@@ -13,7 +14,7 @@ jest.mock( '@elementor/editor-documents', () => ( {
 
 jest.mock( '../../../hooks/use-recent-posts', () => (
 	{
-		default: jest.fn( () => ( { isLoading: false, recentPosts: [] } ) ),
+		default: jest.fn( () => ( { isLoading: false, data: [] } ) ),
 		__esModule: true,
 	}
 ) );
@@ -117,9 +118,9 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		} ) );
 
 		const isLoading = false;
-		const recentPosts: Post[] = [];
+		const recentPosts: RecentPost[] = [];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
 
 		render( <RecentlyEdited /> );
 
@@ -144,7 +145,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		} ) );
 
 		const isLoading = false;
-		const recentPosts: Post[] = [ {
+		const recentPosts: RecentPost[] = [ {
 			id: 1,
 			title: 'Test post',
 			edit_url: 'some_url',
@@ -156,7 +157,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 			date_modified: 123,
 		} ];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
 
 		render( <RecentlyEdited /> );
 
@@ -186,9 +187,20 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		} ) );
 
 		const isLoading = false;
-		const recentPosts: Post[] = [
+		const recentPosts: RecentPost[] = [
 			{
 				id: 1,
+				title: 'Header title with special char &#165;',
+				edit_url: 'some_url',
+				type: {
+					post_type: 'post',
+					doc_type: 'wp-post',
+					label: 'Post',
+				},
+				date_modified: 123,
+			},
+			{
+				id: 3,
 				title: 'Post title with <h1>HTML</h1>',
 				edit_url: 'some_url',
 				type: {
@@ -211,7 +223,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 			},
 		];
 
-		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
+		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, data: recentPosts } as ReturnType<typeof useRecentPosts> );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -235,7 +247,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( {
 			isLoading: false,
-			recentPosts: [ {
+			data: [ {
 				id: 123,
 				title: 'Test post',
 				edit_url: 'some_url',
@@ -246,7 +258,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 				},
 				date_modified: 123,
 			} ],
-		} );
+		} as ReturnType<typeof useRecentPosts> );
 
 		render( <RecentlyEdited /> );
 

package/src/components/top-bar/post-list-item.tsx

@@ -1,12 +1,12 @@
 import DocTypeChip from './chip-doc-type';
 import { MenuItem, MenuItemProps, ListItemText } from '@elementor/ui';
 import * as React from 'react';
-import { Post } from '../../hooks/use-recent-posts';
 import { __useNavigateToDocument as useNavigateToDocument } from '@elementor/editor-documents';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
+import { RecentPost } from '../../types';
 
 type Props = MenuItemProps & {
-	post: Post;
+	post: RecentPost;
 	closePopup: () => void;
 }
 

package/src/components/top-bar/recently-edited.tsx

@@ -18,6 +18,7 @@ import { __ } from '@wordpress/i18n';
 import { PostListItem } from './post-list-item';
 import { CreatePostListItem } from './create-post-list-item';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
+import { NUMBER_OF_RECENT_POSTS } from '../../api/recent-posts';
 
 export default function RecentlyEdited() {
 	const activeDocument = useActiveDocument();
@@ -26,14 +27,32 @@ export default function RecentlyEdited() {
 		? activeDocument
 		: hostDocument;
 
-	const { recentPosts } = useRecentPosts( document?.id );
+	const { data } = useRecentPosts();
+
+	const getRecentPosts = () => {
+		if ( ! data ) {
+			return [];
+		}
+
+		return data.filter( ( post ) => post.id !== document?.id ).splice( 0, NUMBER_OF_RECENT_POSTS - 1 );
+	};
+	const recentPosts = getRecentPosts();
 
 	const popupState = usePopupState( {
 		variant: 'popover',
 		popupId: 'elementor-v2-top-bar-recently-edited',
 	} );
 
-	const documentTitle = useReverseHtmlEntities( document?.title );
+	const getCurrentDocumentFromRecentPosts = () => {
+		if ( ! document ) {
+			return null;
+		}
+
+		return data?.find( ( post ) => post.id === document.id );
+	};
+	const currentDocumentFromRecentPosts = getCurrentDocumentFromRecentPosts();
+
+	const documentTitle = useReverseHtmlEntities( currentDocumentFromRecentPosts ? currentDocumentFromRecentPosts.title : document?.title );
 
 	if ( ! document ) {
 		return null;

package/src/contexts/post-list-context.tsx

@@ -26,6 +26,7 @@ type ContextType = {
 	editMode: EditMode,
 	setEditMode: Dispatch<SetStateAction<EditMode>>,
 	resetEditMode: () => void,
+	setError: () => void,
 };
 
 const defaultValues: ContextType = {
@@ -33,15 +34,18 @@ const defaultValues: ContextType = {
 	editMode: { mode: 'none', details: {} },
 	setEditMode: () => null,
 	resetEditMode: () => null,
+	setError: () => null,
 };
 
 export const PostListContext = createContext<ContextType>( defaultValues );
 
 export const PostListContextProvider = ( {
 	type,
+	setError,
 	children,
 }: {
 	type: ContextType[ 'type' ],
+	setError: ContextType[ 'setError' ],
 	children: ReactNode,
 } ) => {
 	const [ editMode, setEditMode ] = useState( defaultValues.editMode );
@@ -56,6 +60,7 @@ export const PostListContextProvider = ( {
 			editMode,
 			setEditMode,
 			resetEditMode,
+			setError,
 		} }>
 			{ children }
 		</PostListContext.Provider>

package/src/hooks/__tests__/use-recent-posts.test.ts

@@ -1,15 +1,13 @@
-import { waitFor, renderHook } from '@testing-library/react';
+import { waitFor } from '@testing-library/react';
 import apiFetch from '@wordpress/api-fetch';
-import useRecentPosts, { endpointPath } from '../use-recent-posts';
+import useRecentPosts from '../use-recent-posts';
+import { renderHookWithQuery } from 'test-utils';
+import { baseUrl } from '../../api/recent-posts';
 
 // Mock apiFetch to return a promise that resolves to an empty array.
 jest.mock( '@wordpress/api-fetch' );
 
 describe( 'useRecentPosts', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
-	} );
-
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
@@ -28,14 +26,15 @@ describe( 'useRecentPosts', () => {
 
 		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( posts ) );
 
-		const { result } = renderHook( () => useRecentPosts( 1 ) );
+		// Act.
+		const { component } = renderHookWithQuery( () => useRecentPosts() );
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
-			path: endpointPath + '?posts_per_page=5&post__not_in=1',
+			path: `${ baseUrl }?posts_per_page=6`,
 		} );
 
 		await waitFor( () => {
-			expect( result.current.recentPosts ).toBe( posts );
+			expect( component.result.current.data ).toBe( posts );
 		} );
 	} );
 } );

package/src/hooks/use-posts-actions.ts

@@ -1,6 +1,7 @@
 import { useQueryClient, useMutation } from '@elementor/query';
 import { createRequest, deleteRequest, updateRequest, duplicateRequest, NewPost, Slug, UpdatePost } from '../api/post';
 import { postsQueryKey } from './use-posts';
+import { recentPostsQueryKey } from './use-recent-posts';
 
 export function usePostActions( postTypeSlug: Slug ) {
 	const invalidatePosts = useInvalidatePosts( postTypeSlug );
@@ -40,7 +41,7 @@ function useInvalidatePosts( postTypeSlug: string ) {
 
 	return ( options = {} ) => {
 		const queryKey = postsQueryKey( postTypeSlug );
-
+		queryClient.invalidateQueries( { queryKey: recentPostsQueryKey }, options );
 		return queryClient.invalidateQueries( { queryKey }, options );
 	};
 }

package/src/hooks/use-recent-posts.ts

@@ -1,50 +1,11 @@
-import { useEffect, useState } from 'react';
-import apiFetch from '@wordpress/api-fetch';
-import { addQueryArgs } from '@wordpress/url';
+import { useQuery } from '@elementor/query';
+import { getRequest } from '../api/recent-posts';
 
-export interface Post {
-	id: number,
-	title: string,
-	edit_url: string,
-	type: {
-		post_type: string,
-		doc_type: string,
-		label: string,
-	},
-	date_modified: number,
-}
-
-export const endpointPath = '/elementor/v1/site-navigation/recent-posts';
-
-export default function useRecentPosts( documentId?: number ) {
-	const [ recentPosts, setRecentPosts ] = useState<Post[]>( [] );
-	const [ isLoading, setIsLoading ] = useState( false );
-
-	useEffect( () => {
-		if ( documentId ) {
-			setIsLoading( true );
-
-			fetchRecentlyEditedPosts( documentId ).then( ( posts ) => {
-				setRecentPosts( posts );
-				setIsLoading( false );
-			} );
-		}
-	}, [ documentId ] );
-
-	return {
-		isLoading,
-		recentPosts,
-	};
-}
-
-async function fetchRecentlyEditedPosts( documentId: number ) {
-	const queryParams = {
-		posts_per_page: 5,
-		post__not_in: documentId,
-	};
+export const recentPostsQueryKey = [ 'site-navigation', 'recent-posts' ];
 
-	return await apiFetch( {
-		path: addQueryArgs( endpointPath, queryParams ),
-	} ).then( ( response ) => response as Post[] )
-		.catch( () => [] );
+export default function useRecentPosts() {
+	return useQuery( {
+		queryKey: recentPostsQueryKey,
+		queryFn: () => getRequest(),
+	} );
 }

package/src/types.ts

@@ -8,3 +8,15 @@ export type Post = {
 		rendered: string;
 	}
 };
+
+export type RecentPost = {
+	id: number,
+	title: string,
+	edit_url: string,
+	type: {
+		post_type: string,
+		doc_type: string,
+		label: string,
+	},
+	date_modified: number,
+}