@elementor/editor-site-navigation 0.19.11 → 0.21.0

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

@@ -2,42 +2,76 @@ import { waitFor } from '@testing-library/react';
 import apiFetch from '@wordpress/api-fetch';
 import { renderHookWithQuery } from 'test-utils';
 import { usePosts } from '../use-posts';
+import { POST_PER_PAGE } from '../../api/post';
 
-jest.mock( '@wordpress/api-fetch' );
+const MOCK_POST_PER_PAGE = 2;
 
-describe( '@elementor/site-settings/use-posts', () => {
-	beforeEach( () => {
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( [] ) );
-	} );
+jest.mock( '@wordpress/api-fetch', () => ( {
+	default: jest.fn( ( param ) => {
+		const pages = [
+			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
+			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
+			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
+		];
+
+		const url = new URL( 'http:/example.com' + param.path );
+
+		const page = Number( url.searchParams.get( 'page' ) );
 
+		const startIndex = ( page - 1 ) * MOCK_POST_PER_PAGE;
+		const endIndex = startIndex + MOCK_POST_PER_PAGE;
+		const paginatedPages = pages.slice( startIndex, endIndex );
+
+		return {
+			json: () => Promise.resolve( paginatedPages ),
+			headers: {
+				get: ( header: string ) => {
+					switch ( header ) {
+						case 'x-wp-totalpages':
+							return Math.ceil( pages.length / MOCK_POST_PER_PAGE );
+						case 'x-wp-total':
+							return pages.length;
+						default:
+							return null;
+					}
+				},
+			},
+		};
+	} ),
+	__esModule: true,
+} ) );
+
+describe( '@elementor/site-settings/use-posts', () => {
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );
 
 	it( 'usePosts hook should return posts list by type', async () => {
-		// Arrange.
+		//Arrange
 		const pages = [
 			{ id: 1, type: 'page', title: { rendered: 'Home' }, status: 'draft', link: 'www.test.demo' },
 			{ id: 2, type: 'page', title: { rendered: 'About' }, status: 'publish', link: 'www.test.demo' },
 			{ id: 3, type: 'page', title: { rendered: 'Services' }, status: 'publish', link: 'www.test.demo', isHome: true },
 		];
-		jest.mocked( apiFetch ).mockImplementation( () => Promise.resolve( pages ) );
 
 		// Act.
 		const { component } = renderHookWithQuery( () => usePosts( 'page' ) );
 
 		// Assert.
-		const expectedPath = `/wp/v2/pages?status=any&per_page=-1&order=asc&_fields=${ encodeURIComponent( 'id,type,title,link,status' ) }`;
+		const expectedPath = `/wp/v2/pages?status=any&order=asc&page=1&per_page=${ POST_PER_PAGE }&_fields=${ encodeURIComponent( 'id,type,title,link,status,user_can' ) }`;
 
 		expect( apiFetch ).toHaveBeenCalledWith( {
+			parse: false,
 			path: expectedPath,
 		} );
 		expect( apiFetch ).toHaveBeenCalledTimes( 1 );
 
 		await waitFor( () => {
-			return component.result.current.isSuccess;
+			expect( component.result.current.isLoading ).toBeFalsy();
 		} );
 
-		expect( component.result.current.data ).toBe( pages );
+		expect( component.result.current.data.posts ).toContainEqual( pages[ 0 ] );
+		expect( component.result.current.data.posts ).toContainEqual( pages[ 1 ] );
+		expect( component.result.current.data.posts ).not.toContainEqual( pages[ 2 ] );
 	} );
 } );

package/src/hooks/use-posts.ts

@@ -1,11 +1,32 @@
-import { useQuery } from '@elementor/query';
-import { getRequest, Slug } from '../api/post';
+import { useInfiniteQuery } from '@elementor/query';
+import { getRequest, PostsResponse, Slug } from '../api/post';
+import { Post } from '../types';
 
 export const postsQueryKey = ( postTypeSlug: string ) => [ 'site-navigation', 'posts', postTypeSlug ];
 
+const flattenData = ( data?: {pages: PostsResponse[]} ) => {
+	if ( ! data ) {
+		return data;
+	}
+
+	const flattened: Post[] = [];
+
+	data.pages.forEach( ( page ) => {
+		flattened.push( ...page.data );
+	} );
+
+	return flattened;
+};
+
 export function usePosts( postTypeSlug: Slug ) {
-	return useQuery( {
+	const query = useInfiniteQuery( {
 		queryKey: postsQueryKey( postTypeSlug ),
-		queryFn: () => getRequest( postTypeSlug ),
+		queryFn: ( { pageParam = 1 } ) => getRequest( postTypeSlug, pageParam ),
+		initialPageParam: 1,
+		getNextPageParam: ( lastPage ) => {
+			return lastPage.currentPage < lastPage.totalPages ? lastPage.currentPage + 1 : undefined;
+		},
 	} );
+
+	return { ...query, data: { posts: flattenData( query.data ), total: query.data?.pages[ 0 ]?.totalPosts ?? 0 } };
 }

package/src/hooks/use-user.ts

@@ -0,0 +1,11 @@
+import { useQuery } from '@elementor/query';
+import { getUser } from '../api/user';
+
+export const userQueryKey = () => [ 'site-navigation', 'user' ];
+
+export default function useUser( ) {
+	return useQuery( {
+		queryKey: userQueryKey(),
+		queryFn: () => getUser(),
+	} );
+}

package/src/types.ts

@@ -6,7 +6,11 @@ export type Post = {
 	type: string;
 	title: {
 		rendered: string;
-	}
+	};
+	user_can: {
+		edit: boolean;
+		delete: boolean;
+	};
 };
 
 export type RecentPost = {
@@ -19,4 +23,7 @@ export type RecentPost = {
 		label: string,
 	},
 	date_modified: number,
+	user_can: {
+		edit: boolean,
+	},
 }