From 8dfa175f1818a604fa830950eaa3056100f0953d Mon Sep 17 00:00:00 2001
From: Nik Tsekouras <ntsekouras@outlook.com>
Date: Tue, 17 Oct 2023 19:58:21 +0300
Subject: [PATCH] [Data views]: Normalize `render` fields function (#55411)

* [Data views]: Normalize `render` fields function

* Update packages/edit-site/src/components/dataviews/view-list.js

Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>

---------

Co-authored-by: Miguel Fonseca <150562+mcsf@users.noreply.github.com>
---
 .../src/components/dataviews/dataviews.js       |  9 ++++++++-
 .../src/components/dataviews/view-grid.js       |  7 ++-----
 .../src/components/dataviews/view-list.js       | 17 +++++------------
 .../src/components/page-pages/index.js          |  8 ++++----
 4 files changed, 19 insertions(+), 22 deletions(-)

diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
index 755ce8a2ea348d..da0d1735b6a3a6 100644
--- a/packages/edit-site/src/components/dataviews/dataviews.js
+++ b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -5,6 +5,7 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -25,6 +26,12 @@ export default function DataViews( {
 	paginationInfo,
 } ) {
 	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
+	const _fields = useMemo( () => {
+		return fields.map( ( field ) => ( {
+			...field,
+			render: field.render || field.accessorFn,
+		} ) );
+	}, [ fields ] );
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>
@@ -37,7 +44,7 @@ export default function DataViews( {
 					/>
 				</HStack>
 				<ViewComponent
-					fields={ fields }
+					fields={ _fields }
 					view={ view }
 					onChangeView={ onChangeView }
 					paginationInfo={ paginationInfo }
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
index f115b9c002a376..353c2de39a1d9e 100644
--- a/packages/edit-site/src/components/dataviews/view-grid.js
+++ b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -29,8 +29,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 				return (
 					<VStack key={ index }>
 						<div className="dataviews-view-grid__media">
-							{ ( mediaField &&
-								mediaField.render( { item, view } ) ) || (
+							{ mediaField?.render( item, view ) || (
 								<Placeholder
 									withIllustration
 									style={ {
@@ -46,9 +45,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 								<VStack>
 									{ visibleFields.map( ( field ) => (
 										<div key={ field.id }>
-											{ field.render
-												? field.render( { item, view } )
-												: field.accessorFn( item ) }
+											{ field.render( item, view ) }
 										</div>
 									) ) }
 								</VStack>
diff --git a/packages/edit-site/src/components/dataviews/view-list.js b/packages/edit-site/src/components/dataviews/view-list.js
index d675720c86f83f..ba7e6e30328891 100644
--- a/packages/edit-site/src/components/dataviews/view-list.js
+++ b/packages/edit-site/src/components/dataviews/view-list.js
@@ -145,18 +145,11 @@ function ViewList( {
 	paginationInfo,
 } ) {
 	const columns = useMemo( () => {
-		const _columns = [
-			...fields.map( ( field ) => {
-				const column = { ...field };
-				delete column.render;
-				column.cell = ( props ) => {
-					return field.render
-						? field.render( { item: props.row.original, view } )
-						: field.accessorFn( props.row.original );
-				};
-				return column;
-			} ),
-		];
+		const _columns = fields.map( ( field ) => {
+			const { render, ...column } = field;
+			column.cell = ( props ) => render( props.row.original, view );
+			return column;
+		} );
 		if ( actions?.length ) {
 			_columns.push( {
 				header: <VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>,
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 602d14b8ad2e3b..502e03f49b3e88 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -89,7 +89,7 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				accessorFn: ( page ) => page.featured_media,
-				render: ( { item, view: currentView } ) =>
+				render: ( item, currentView ) =>
 					!! item.featured_media ? (
 						<Media
 							className="edit-site-page-pages__featured-image"
@@ -107,7 +107,7 @@ export default function PagePages() {
 				header: __( 'Title' ),
 				id: 'title',
 				accessorFn: ( page ) => page.title?.rendered || page.slug,
-				render: ( { item: page } ) => {
+				render: ( page ) => {
 					return (
 						<VStack spacing={ 1 }>
 							<Heading as="h3" level={ 5 }>
@@ -134,7 +134,7 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				accessorFn: ( page ) => page._embedded?.author[ 0 ]?.name,
-				render: ( { item } ) => {
+				render: ( item ) => {
 					const author = item._embedded?.author[ 0 ];
 					return (
 						<a href={ `user-edit.php?user_id=${ author.id }` }>
@@ -153,7 +153,7 @@ export default function PagePages() {
 			{
 				header: 'Date',
 				id: 'date',
-				render: ( { item } ) => {
+				render: ( item ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
 						getDate( item.date )