component.js

/**
 * External dependencies
 */
import { map, isUndefined } from 'lodash'
import { withRouter } from 'react-router-dom'
import { TableCard } from '@woocommerce/components'

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n'
import { Fragment } from '@wordpress/element'
import { withSelect } from '@wordpress/data'

/**
 * Internal dependencies
 */
import ScoreProgress from '@scShared/ScoreProgress'
import SchemaListing from '@scShared/SchemaListing'
import humanNumber from '@helpers/humanNumber'
import ItemStat from '@scShared/ItemStat'

const processRows = ( rows ) => {
	const columns = [
		'postType',
		'title',
		'score',
		'schema',
		'pageviews',
		'position',
	]

	let counter = 0

	return map( rows, ( row ) =>
		map( columns, ( column ) => {
			let value = row[ column ]
			let display = ''

			if ( 'postType' === column ) {
				value = row.object_subtype
				display = (
					<Fragment>
						{ ++counter } <i className={ 'icon icon-' + value }></i>
					</Fragment>
				)
			} else if ( 'title' === column ) {
				display = (
					<Fragment>
						<h4>
							{ value }
							<small>{ row.page }</small>
						</h4>
					</Fragment>
				)
			} else if ( 'score' === column ) {
				display = <ScoreProgress score={ value } />
			} else if ( 'schema' === column ) {
				display = <SchemaListing schemas={ value } />
			} else if (
				'impressions' === column ||
				'pageviews' === column ||
				'position' === column
			) {
				display = <ItemStat { ...value } />
			}

			return { display, value }
		} )
	)
}

const PostsTable = ( props ) => {
	const { rows, summary, query, history } = props
	if ( isUndefined( rows ) || isUndefined( summary ) ) {
		return 'Loading'
	}

	const headers = [
		{
			key: 'sequence',
			label: __( '#', 'rank-math' ),
			cellClassName: 'rank-math-col-index',
		},
		{
			key: 'title',
			label: __( 'Posts', 'rank-math' ),
			required: true,
			cellClassName: 'rank-math-col-title',
		},
		{
			key: 'score',
			label: __( 'SEO Score', 'rank-math' ),
			cellClassName: 'rank-math-col-score',
		},
		{
			key: 'schema',
			label: __( 'Schema', 'rank-math' ),
			cellClassName: 'rank-math-col-schema',
		},
		{
			key: 'pageviews',
			label: __( 'Pageviews', 'rank-math' ),
			cellClassName: 'rank-math-col-pageviews',
		},
		{
			key: 'position',
			label: __( 'Position', 'rank-math' ),
			cellClassName: 'rank-math-col-position',
		},
	]

	const tableSummary = [
		{ label: __( 'Posts', 'rank-math' ), value: summary.posts },
		{
			label: __( 'Impressions', 'rank-math' ),
			value: humanNumber( summary.impressions ),
		},
		{
			label: __( 'Pageviews', 'rank-math' ),
			value: humanNumber( summary.pageviews ),
		},
		{
			label: __( 'Click', 'rank-math' ),
			value: humanNumber( summary.clicks ),
		},
	]

	return (
		<div className="rank-math-top-posts-actionable">
			<TableCard
				className="rank-math-table"
				title={ __( 'Content', 'rank-math' ) }
				headers={ headers }
				downloadable={ true }
				rows={ processRows( rows ) }
				query={ query }
				rowsPerPage={ 10 }
				totalRows={ summary.total }
				summary={ tableSummary }
				showPageArrowsLabel={ false }
				onPageChange={ ( newPage ) => {
					history.push( '/analytics/' + newPage )
				} }
			/>
		</div>
	)
}

export default withRouter(
	withSelect( ( select, props ) => {
		const query = props.match.params
		const { paged = 1 } = query

		return {
			query,
			history: props.history,
			rows: select( 'rank-math' ).getPostsRows( paged ),
			summary: select( 'rank-math' ).getPostsSummary(),
		}
	} )( PostsTable )
)