DataViews: sort author by name + allow custom sort function

packages/dataviews/src/components/dataviews/stories/fixtures.js

@@ -23,6 +23,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'Space', 'NASA' ],
 		satellites: 0,
+		satellites_no_type: 0,
 	},
 	{
 		id: 2,
@@ -32,6 +33,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'Space' ],
 		satellites: 0,
+		satellites_no_type: 0,
 	},
 	{
 		id: 3,
@@ -41,6 +43,7 @@ export const data = [
 		type: 'Not a planet',
 		categories: [ 'NASA' ],
 		satellites: 0,
+		satellites_no_type: 0,
 	},
 	{
 		id: 4,
@@ -50,6 +53,7 @@ export const data = [
 		type: 'Ice giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 14,
+		satellites_no_type: 14,
 	},
 	{
 		id: 5,
@@ -59,6 +63,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
+		satellites_no_type: 0,
 	},
 	{
 		id: 6,
@@ -68,6 +73,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 0,
+		satellites_no_type: 0,
 	},
 	{
 		id: 7,
@@ -77,6 +83,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 1,
+		satellites_no_type: 1,
 	},
 	{
 		id: 8,
@@ -86,6 +93,7 @@ export const data = [
 		type: 'Terrestrial',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 2,
+		satellites_no_type: 2,
 	},
 	{
 		id: 9,
@@ -95,6 +103,7 @@ export const data = [
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 95,
+		satellites_no_type: 95,
 	},
 	{
 		id: 10,
@@ -104,6 +113,7 @@ export const data = [
 		type: 'Gas giant',
 		categories: [ 'Space', 'Planet', 'Solar system' ],
 		satellites: 146,
+		satellites_no_type: 146,
 	},
 	{
 		id: 11,
@@ -113,6 +123,7 @@ export const data = [
 		type: 'Ice giant',
 		categories: [ 'Space', 'Ice giant', 'Solar system' ],
 		satellites: 28,
+		satellites_no_type: 28,
 	},
 ];
 
@@ -189,6 +200,12 @@ export const fields = [
 	{
 		label: 'Satellites',
 		id: 'satellites',
+		type: 'integer',
+		enableSorting: true,
+	},
+	{
+		label: 'Satellites (no type)',
+		id: 'satellites_no_type',
 		enableSorting: true,
 	},
 	{

packages/dataviews/src/field-types/index.tsx

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import { default as integer } from './integer';
+import type { FieldType } from '../types';
+
+/**
+ *
+ * @param {FieldType} type The field type definition to get.
+ *
+ * @return A field type definition.
+ */
+export default function getFieldTypeDefinition( type?: FieldType ) {
+	if ( 'integer' === type ) {
+		return integer;
+	}
+
+	// If no type found, the sort function doesn't do anything.
+	return {
+		sort: () => 0,
+	};
+}

packages/dataviews/src/field-types/integer.tsx

@@ -0,0 +1,22 @@
+/**
+ * Internal dependencies
+ */
+import type { SortDirection } from '../types';
+
+function sort< Item >(
+	a: {
+		item: Item;
+		value: any;
+	},
+	b: {
+		item: Item;
+		value: any;
+	},
+	direction: SortDirection
+) {
+	return direction === 'asc' ? a.value - b.value : b.value - a.value;
+}
+
+export default {
+	sort,
+};

packages/dataviews/src/filter-and-sort-data-view.ts

@@ -143,6 +143,21 @@ export function filterSortAndPaginate< Item >(
 				const valueA = fieldToSort.getValue( { item: a } ) ?? '';
 				const valueB = fieldToSort.getValue( { item: b } ) ?? '';
 
+				if ( fieldToSort.type === 'integer' ) {
+					return fieldToSort.sort(
+						{
+							item: a,
+							value: valueA,
+						},
+						{
+							item: b,
+							value: valueB,
+						},
+						view.sort?.direction ?? 'desc'
+					);
+				}
+
+				// When/if types become required, we can remove the following logic.
 				if (
 					typeof valueA === 'number' &&
 					typeof valueB === 'number'

packages/dataviews/src/normalize-fields.ts

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import getFieldTypeDefinition from './field-types';
 import type { Field, NormalizedField, ItemRecord } from './types';
 
 /**
@@ -13,15 +14,20 @@ export function normalizeFields< Item >(
 	fields: Field< Item >[]
 ): NormalizedField< Item >[] {
 	return fields.map( ( field ) => {
+		const fieldTypeDefinition = getFieldTypeDefinition( field.type );
+
 		const getValue =
 			field.getValue ||
 			( ( { item }: { item: ItemRecord } ) => item[ field.id ] );
 
+		const sort = field.sort || fieldTypeDefinition.sort;
+
 		return {
 			...field,
 			label: field.label || field.id,
 			getValue,
 			render: field.render || getValue,
+			sort,
 		};
 	} );
 }

packages/dataviews/src/test/filter-and-sort-data-view.js

@@ -254,6 +254,21 @@ describe( 'sorting', () => {
 	} );
 
 	it( 'should sort by number', () => {
+		const { data: result } = filterSortAndPaginate(
+			data,
+			{
+				sort: { field: 'satellites_no_type', direction: 'desc' },
+			},
+			fields
+		);
+
+		expect( result ).toHaveLength( 11 );
+		expect( result[ 0 ].title ).toBe( 'Saturn' );
+		expect( result[ 1 ].title ).toBe( 'Jupiter' );
+		expect( result[ 2 ].title ).toBe( 'Uranus' );
+	} );
+
+	it( 'should sort by type integer', () => {
 		const { data: result } = filterSortAndPaginate(
 			data,
 			{

packages/dataviews/src/types.ts

@@ -80,6 +80,21 @@ export type Field< Item > = {
 	 */
 	render?: ComponentType< { item: Item } >;
 
+	/**
+	 * Callback used to sort the field.
+	 */
+	sort?: (
+		a: {
+			item: Item;
+			value: any;
+		},
+		b: {
+			item: Item;
+			value: any;
+		},
+		direction: SortDirection
+	) => number;
+
 	/**
 	 * Whether the field is sortable.
 	 */
@@ -124,6 +139,17 @@ export type NormalizedField< Item > = Field< Item > & {
 	label: string;
 	getValue: ( args: { item: Item } ) => any;
 	render: ComponentType< { item: Item } >;
+	sort: (
+		a: {
+			item: Item;
+			value: any;
+		},
+		b: {
+			item: Item;
+			value: any;
+		},
+		direction: SortDirection
+	) => number;
 };
 
 /**

packages/edit-site/src/components/post-fields/index.js

@@ -242,6 +242,14 @@ function usePostFields( viewType ) {
 						label: name,
 					} ) ) || [],
 				render: PostAuthorField,
+				sort: ( { item: a }, { item: b }, direction ) => {
+					const nameA = a._embedded?.author?.[ 0 ]?.name || '';
+					const nameB = b._embedded?.author?.[ 0 ]?.name || '';
+
+					return direction === 'asc'
+						? nameA.localeCompare( nameB )
+						: nameB.localeCompare( nameA );
+				},
 			},
 			{
 				label: __( 'Status' ),

packages/edit-site/src/components/post-list/index.js

@@ -9,7 +9,7 @@ import {
 import { useState, useMemo, useCallback, useEffect } from '@wordpress/element';
 import { privateApis as routerPrivateApis } from '@wordpress/router';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { DataViews } from '@wordpress/dataviews';
+import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews';
 import { privateApis as editorPrivateApis } from '@wordpress/editor';
 import { __ } from '@wordpress/i18n';
 import { drawerRight } from '@wordpress/icons';
@@ -161,6 +161,8 @@ export default function PostList( { postType } ) {
 		[ history ]
 	);
 
+	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+
 	const queryArgs = useMemo( () => {
 		const filters = {};
 		view.filters.forEach( ( filter ) => {
@@ -200,12 +202,25 @@ export default function PostList( { postType } ) {
 	}, [ view ] );
 	const {
 		records,
-		isResolving: isLoadingMainEntities,
+		isResolving: isLoadingData,
 		totalItems,
 		totalPages,
 	} = useEntityRecordsWithPermissions( 'postType', postType, queryArgs );
 
-	const ids = records?.map( ( record ) => getItemId( record ) ) ?? [];
+	// The REST API sort the authors by ID, but we want to sort them by name.
+	const data = useMemo( () => {
+		if ( ! isLoadingFields && view?.sort?.field === 'author' ) {
+			return filterSortAndPaginate(
+				records,
+				{ sort: { ...view.sort } },
+				fields
+			).data;
+		}
+
+		return records;
+	}, [ records, fields, isLoadingFields, view?.sort ] );
+
+	const ids = data?.map( ( record ) => getItemId( record ) ) ?? [];
 	const prevIds = usePrevious( ids ) ?? [];
 	const deletedIds = prevIds.filter( ( id ) => ! ids.includes( id ) );
 	const postIdWasDeleted = deletedIds.includes( postId );
@@ -263,7 +278,6 @@ export default function PostList( { postType } ) {
 		} );
 		closeModal();
 	};
-	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
 
 	return (
 		<Page
@@ -294,8 +308,8 @@ export default function PostList( { postType } ) {
 				paginationInfo={ paginationInfo }
 				fields={ fields }
 				actions={ actions }
-				data={ records || EMPTY_ARRAY }
-				isLoading={ isLoadingMainEntities || isLoadingFields }
+				data={ data || EMPTY_ARRAY }
+				isLoading={ isLoadingData || isLoadingFields }
 				view={ view }
 				onChangeView={ setView }
 				selection={ selection }