[Data views]: Refactor to allow the rendering to be generated using a…

… fields description
WordPress · Oct 18, 2023 · 8c8debe · 8c8debe
1 parent 19c8d6f
commit 8c8debe
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 49 deletions.
diff --git a/packages/edit-site/src/components/dataviews/dataviews.js b/packages/edit-site/src/components/dataviews/dataviews.js
@@ -22,16 +22,19 @@ export default function DataViews( {
 	fields,
 	actions,
 	data,
+	dataConfig,
 	isLoading = false,
 	paginationInfo,
 } ) {
 	const ViewComponent = view.type === 'list' ? ViewList : ViewGrid;
 	const _fields = useMemo( () => {
 		return fields.map( ( field ) => ( {
 			...field,
-			render: field.render || field.getValue,
+			render:
+				dataConfig[ field.id ]?.view?.( field.getValue ) ||
+				field.getValue,
 		} ) );
-	}, [ fields ] );
+	}, [ fields, dataConfig ] );
 	return (
 		<div className="dataviews-wrapper">
 			<VStack spacing={ 4 }>

diff --git a/packages/edit-site/src/components/dataviews/field-types.js b/packages/edit-site/src/components/dataviews/field-types.js
@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import Media from '../../components/media';
+
+export const coreFieldTypes = {
+	string: {
+		view:
+			( getValue ) =>
+			( { item } ) =>
+				getValue( { item } ),
+	},
+	date: {
+		view: ( { item, getValue } ) => <time>{ getValue( { item } ) }</time>,
+	},
+	image: {
+		view:
+			( getValue ) =>
+			( { item } ) => (
+				<Media id={ getValue( { item } ) } size={ [ 'thumbnail' ] } />
+			),
+	},
+};
diff --git a/packages/edit-site/src/components/dataviews/index.js b/packages/edit-site/src/components/dataviews/index.js
@@ -1 +1,2 @@
 export { default as DataViews } from './dataviews';
+export { coreFieldTypes } from './field-types';
diff --git a/packages/edit-site/src/components/dataviews/view-grid.js b/packages/edit-site/src/components/dataviews/view-grid.js
@@ -20,7 +20,7 @@ export function ViewGrid( { data, fields, view, actions } ) {
 	);
 	const visibleFields = fields.filter(
 		( field ) =>
-			! view.hiddenFields.includes( field.id ) &&
+			! view.hiddenFields?.includes( field.id ) &&
 			field.id !== view.layout.mediaField
 	);
 	return (

diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
@@ -16,7 +16,7 @@ import { dateI18n, getDate, getSettings } from '@wordpress/date';
  */
 import Page from '../page';
 import Link from '../routes/link';
-import { DataViews } from '../dataviews';
+import { DataViews, coreFieldTypes } from '../dataviews';
 import useTrashPostAction from '../actions/trash-post';
 import Media from '../media';
 
@@ -96,43 +96,12 @@ export default function PagePages() {
 				id: 'featured-image',
 				header: __( 'Featured Image' ),
 				getValue: ( { item } ) => item.featured_media,
-				render: ( { item, view: currentView } ) =>
-					!! item.featured_media ? (
-						<Media
-							className="edit-site-page-pages__featured-image"
-							id={ item.featured_media }
-							size={
-								currentView.type === 'list'
-									? [ 'thumbnail', 'medium', 'large', 'full' ]
-									: [ 'large', 'full', 'medium', 'thumbnail' ]
-							}
-						/>
-					) : null,
 				enableSorting: false,
 			},
 			{
 				header: __( 'Title' ),
 				id: 'title',
 				getValue: ( { item } ) => item.title?.rendered || item.slug,
-				render: ( { item } ) => {
-					return (
-						<VStack spacing={ 1 }>
-							<Heading as="h3" level={ 5 }>
-								<Link
-									params={ {
-										postId: item.id,
-										postType: item.type,
-										canvas: 'edit',
-									} }
-								>
-									{ decodeEntities(
-										item.title?.rendered || item.slug
-									) || __( '(no title)' ) }
-								</Link>
-							</Heading>
-						</VStack>
-					);
-				},
 				filters: [ { id: 'search', type: 'search' } ],
 				maxWidth: 400,
 				sortingFn: 'alphanumeric',
@@ -142,14 +111,6 @@ export default function PagePages() {
 				header: __( 'Author' ),
 				id: 'author',
 				getValue: ( { item } ) => item._embedded?.author[ 0 ]?.name,
-				render: ( { item } ) => {
-					const author = item._embedded?.author[ 0 ];
-					return (
-						<a href={ `user-edit.php?user_id=${ author.id }` }>
-							{ author.name }
-						</a>
-					);
-				},
 				filters: [ { id: 'author', type: 'enumeration' } ],
 				elements: [
 					{
@@ -187,17 +148,89 @@ export default function PagePages() {
 				header: __( 'Date' ),
 				id: 'date',
 				getValue: ( { item } ) => item.date,
-				render: ( { item } ) => {
+				enableSorting: false,
+			},
+		],
+		[ postStatuses, authors ]
+	);
+
+	const dataConfig = {
+		'featured-image': {
+			...coreFieldTypes.image,
+			view:
+				( getValue ) =>
+				( { item, view: currentView } ) => {
+					const value = getValue( { item } );
+					if ( ! value ) {
+						return null;
+					}
+					return (
+						<Media
+							className="edit-site-page-pages__featured-image"
+							id={ value }
+							size={
+								currentView.type === 'list'
+									? [ 'thumbnail', 'medium', 'large', 'full' ]
+									: [ 'large', 'full', 'medium', 'thumbnail' ]
+							}
+						/>
+					);
+				},
+		},
+		title: {
+			...coreFieldTypes.string,
+			view:
+				( getValue ) =>
+				( { item } ) => {
+					return (
+						<VStack spacing={ 1 }>
+							<Heading as="h3" level={ 5 }>
+								<Link
+									params={ {
+										postId: item.id,
+										postType: item.type,
+										canvas: 'edit',
+									} }
+								>
+									{ decodeEntities( getValue( { item } ) ) ||
+										__( '(no title)' ) }
+								</Link>
+							</Heading>
+						</VStack>
+					);
+				},
+		},
+		// For now we treat author as a string, but we should have a way
+		// to create a relation field type.
+		author: {
+			...coreFieldTypes.string,
+			view:
+				( getValue ) =>
+				( { item } ) => {
+					const author = item._embedded?.author[ 0 ];
+					return (
+						<a href={ `user-edit.php?user_id=${ author.id }` }>
+							{ getValue( { item } ) }
+						</a>
+					);
+				},
+		},
+		status: {
+			...coreFieldTypes.string,
+		},
+		date: {
+			...coreFieldTypes.date,
+			view:
+				( getValue ) =>
+				( { item } ) => {
 					const formattedDate = dateI18n(
 						getSettings().formats.datetimeAbbreviated,
-						getDate( item.date )
+						getDate( getValue( { item } ) )
 					);
 					return <time>{ formattedDate }</time>;
 				},
-			},
-		],
-		[ postStatuses, authors ]
-	);
+		},
+	};
 
 	const trashPostAction = useTrashPostAction();
 	const actions = useMemo( () => [ trashPostAction ], [ trashPostAction ] );
@@ -229,6 +262,7 @@ export default function PagePages() {
 				fields={ fields }
 				actions={ actions }
 				data={ pages || EMPTY_ARRAY }
+				dataConfig={ dataConfig }
 				isLoading={ isLoadingPages }
 				view={ view }
 				onChangeView={ onChangeView }