From 207dfe3e24be56f5db1922aea8a8a7315ce5a3cf Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Tue, 10 Dec 2024 10:50:20 +0100
Subject: [PATCH] DataViews: Fix reordering fields in list and grid layouts
 (#67777)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: oandregal <oandregal@git.wordpress.org>
---
 .../src/dataviews-layouts/grid/index.tsx      | 19 ++++++++-----------
 .../src/dataviews-layouts/list/index.tsx      | 16 +++++++---------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
index e10ae7b591af5f..4e274c5b873fc2 100644
--- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx
@@ -214,21 +214,18 @@ export default function ViewGrid< Item >( {
 		( field ) => field.id === view?.descriptionField
 	);
 	const otherFields = view.fields ?? [];
-	const { regularFields, badgeFields } = fields.reduce(
-		( accumulator: Record< string, NormalizedField< Item >[] >, field ) => {
-			if (
-				! otherFields.includes( field.id ) ||
-				[
-					view?.mediaField,
-					view?.titleField,
-					view?.descriptionField,
-				].includes( field.id )
-			) {
+	const { regularFields, badgeFields } = otherFields.reduce(
+		(
+			accumulator: Record< string, NormalizedField< Item >[] >,
+			fieldId
+		) => {
+			const field = fields.find( ( f ) => f.id === fieldId );
+			if ( ! field ) {
 				return accumulator;
 			}
 			// If the field is a badge field, add it to the badgeFields array
 			// otherwise add it to the rest visibleFields array.
-			const key = view.layout?.badgeFields?.includes( field.id )
+			const key = view.layout?.badgeFields?.includes( fieldId )
 				? 'badgeFields'
 				: 'regularFields';
 			accumulator[ key ].push( field );
diff --git a/packages/dataviews/src/dataviews-layouts/list/index.tsx b/packages/dataviews/src/dataviews-layouts/list/index.tsx
index 62d813c1485af8..fd6cdff6dbcdc6 100644
--- a/packages/dataviews/src/dataviews-layouts/list/index.tsx
+++ b/packages/dataviews/src/dataviews-layouts/list/index.tsx
@@ -325,6 +325,10 @@ function ListItem< Item >( {
 	);
 }
 
+function isDefined< T >( item: T | undefined ): item is T {
+	return !! item;
+}
+
 export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const {
 		actions,
@@ -346,15 +350,9 @@ export default function ViewList< Item >( props: ViewListProps< Item > ) {
 	const descriptionField = fields.find(
 		( field ) => field.id === view.descriptionField
 	);
-	const otherFields = fields.filter(
-		( field ) =>
-			( view.fields ?? [] ).includes( field.id ) &&
-			! [
-				view.titleField,
-				view.mediaField,
-				view.descriptionField,
-			].includes( field.id )
-	);
+	const otherFields = ( view?.fields ?? [] )
+		.map( ( fieldId ) => fields.find( ( f ) => fieldId === f.id ) )
+		.filter( isDefined );
 
 	const onSelect = ( item: Item ) =>
 		onChangeSelection( [ getItemId( item ) ] );