DataViews's filterSortAndPaginate utility: support sorting by number (#…

…63187) Co-authored-by: oandregal <[email protected]> Co-authored-by: ntsekouras <[email protected]>
WordPress · Jul 5, 2024 · 6034e90 · 6034e90
1 parent 31a3c5d
commit 6034e90
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 2 deletions.
diff --git a/packages/dataviews/src/filter-and-sort-data-view.ts b/packages/dataviews/src/filter-and-sort-data-view.ts
@@ -61,7 +61,7 @@ export function filterSortAndPaginate< Item >(
  } );
  }
 
- if ( view.filters.length > 0 ) {
+ if ( view.filters?.length > 0 ) {
  view.filters.forEach( ( filter ) => {
  const field = _fields.find(
  ( _field ) => _field.id === filter.field
@@ -142,6 +142,16 @@ export function filterSortAndPaginate< Item >(
  filteredData.sort( ( a, b ) => {
  const valueA = fieldToSort.getValue( { item: a } ) ?? '';
  const valueB = fieldToSort.getValue( { item: b } ) ?? '';
+
+ if (
+ typeof valueA === 'number' &&
+ typeof valueB === 'number'
+ ) {
+ return view.sort?.direction === 'asc'
+ ? valueA - valueB
+ : valueB - valueA;
+ }
+
  return view.sort?.direction === 'asc'
  ? valueA.localeCompare( valueB )
  : valueB.localeCompare( valueA );

diff --git a/packages/dataviews/src/stories/fixtures.js b/packages/dataviews/src/stories/fixtures.js
@@ -22,6 +22,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Not a planet',
  categories: [ 'Space', 'NASA' ],
+ satellites: 0,
  },
  {
  id: 2,
@@ -30,6 +31,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5678/21911065441_92e2d44708_b.jpg',
  type: 'Not a planet',
  categories: [ 'Space' ],
+ satellites: 0,
  },
  {
  id: 3,
@@ -38,6 +40,7 @@ export const data = [
  image: 'https://live.staticflickr.com/742/21712365770_8f70a2c91e_b.jpg',
  type: 'Not a planet',
  categories: [ 'NASA' ],
+ satellites: 0,
  },
  {
  id: 4,
@@ -46,6 +49,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Ice giant',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 14,
  },
  {
  id: 5,
@@ -54,6 +58,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 0,
  },
  {
  id: 6,
@@ -62,6 +67,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 0,
  },
  {
  id: 7,
@@ -70,6 +76,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 1,
  },
  {
  id: 8,
@@ -78,6 +85,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Terrestrial',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 2,
  },
  {
  id: 9,
@@ -86,6 +94,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Gas giant',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 95,
  },
  {
  id: 10,
@@ -94,6 +103,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Gas giant',
  categories: [ 'Space', 'Planet', 'Solar system' ],
+ satellites: 146,
  },
  {
  id: 11,
@@ -102,6 +112,7 @@ export const data = [
  image: 'https://live.staticflickr.com/5725/21726228300_51333bd62c_b.jpg',
  type: 'Ice giant',
  categories: [ 'Space', 'Ice giant', 'Solar system' ],
+ satellites: 28,
  },
 ];
 
@@ -178,6 +189,11 @@ export const fields = [
  { value: 'Gas giant', label: 'Gas giant' },
  ],
  },
+ {
+ header: 'Satellites',
+ id: 'satellites',
+ enableSorting: true,
+ },
  {
  header: 'Description',
  id: 'description',

diff --git a/packages/dataviews/src/test/filter-and-sort-data-view.js b/packages/dataviews/src/test/filter-and-sort-data-view.js
@@ -233,7 +233,7 @@ describe( 'filters', () => {
 } );
 
 describe( 'sorting', () => {
- it( 'should sort', () => {
+ it( 'should sort by string', () => {
  const { data: result } = filterSortAndPaginate(
  data,
  {
@@ -252,6 +252,21 @@ describe( 'sorting', () => {
  expect( result[ 0 ].title ).toBe( 'Uranus' );
  expect( result[ 1 ].title ).toBe( 'Neptune' );
  } );
+
+ it( 'should sort by number', () => {
+ const { data: result } = filterSortAndPaginate(
+ data,
+ {
+ sort: { field: 'satellites', 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' );
+ } );
 } );
 
 describe( 'pagination', () => {