woocommerce/plugins/woocommerce-admin/client/dashboard/leaderboards/index.js

/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { Fragment, useState } from '@wordpress/element';
import { compose } from '@wordpress/compose';
import PropTypes from 'prop-types';
import { SelectControl } from '@wordpress/components';
import { withSelect } from '@wordpress/data';
import {
	EllipsisMenu,
	MenuItem,
	MenuTitle,
	SectionHeader,
} from '@woocommerce/components';
import { useUserPreferences, ITEMS_STORE_NAME } from '@woocommerce/data';
import { getSetting } from '@woocommerce/wc-admin-settings';
import { recordEvent } from '@woocommerce/tracks';

/**
 * Internal dependencies
 */
import Leaderboard from '../../analytics/components/leaderboard';
import './style.scss';

const renderLeaderboardToggles = ( {
	allLeaderboards,
	hiddenBlocks,
	onToggleHiddenBlock,
} ) => {
	return allLeaderboards.map( ( leaderboard ) => {
		const checked = ! hiddenBlocks.includes( leaderboard.id );
		return (
			<MenuItem
				checked={ checked }
				isCheckbox
				isClickable
				key={ leaderboard.id }
				onInvoke={ () => {
					onToggleHiddenBlock( leaderboard.id )();
					recordEvent( 'dash_leaderboards_toggle', {
						status: checked ? 'off' : 'on',
						key: leaderboard.id,
					} );
				} }
			>
				{ leaderboard.label }
			</MenuItem>
		);
	} );
};

const renderLeaderboards = ( {
	allLeaderboards,
	hiddenBlocks,
	query,
	rowsPerTable,
	filters,
} ) => {
	return allLeaderboards.map( ( leaderboard ) => {
		if ( hiddenBlocks.includes( leaderboard.id ) ) {
			return undefined;
		}

		return (
			<Leaderboard
				headers={ leaderboard.headers }
				id={ leaderboard.id }
				key={ leaderboard.id }
				query={ query }
				title={ leaderboard.label }
				totalRows={ rowsPerTable }
				filters={ filters }
			/>
		);
	} );
};

const Leaderboards = ( props ) => {
	const {
		allLeaderboards,
		controls: Controls,
		isFirst,
		isLast,
		hiddenBlocks,
		onMove,
		onRemove,
		onTitleBlur,
		onTitleChange,
		onToggleHiddenBlock,
		query,
		title,
		titleInput,
		filters,
	} = props;
	const { updateUserPreferences, ...userPrefs } = useUserPreferences();
	const [ rowsPerTable, setRowsPerTableState ] = useState(
		parseInt( userPrefs.dashboard_leaderboard_rows || 5, 10 )
	);

	const setRowsPerTable = ( rows ) => {
		setRowsPerTableState( parseInt( rows, 10 ) );
		const userDataFields = {
			dashboard_leaderboard_rows: parseInt( rows, 10 ),
		};
		updateUserPreferences( userDataFields );
	};

	const renderMenu = () => (
		<EllipsisMenu
			label={ __(
				'Choose which leaderboards to display and other settings',
				'woocommerce-admin'
			) }
			renderContent={ ( { onToggle } ) => (
				<Fragment>
					<MenuTitle>
						{ __( 'Leaderboards', 'woocommerce-admin' ) }
					</MenuTitle>
					{ renderLeaderboardToggles( {
						allLeaderboards,
						hiddenBlocks,
						onToggleHiddenBlock,
					} ) }
					<SelectControl
						className="woocommerce-dashboard__dashboard-leaderboards__select"
						label={ __( 'Rows Per Table', 'woocommerce-admin' ) }
						value={ rowsPerTable }
						options={ Array.from( { length: 20 }, ( v, key ) => ( {
							v: key + 1,
							label: key + 1,
						} ) ) }
						onChange={ setRowsPerTable }
					/>
					<Controls
						onToggle={ onToggle }
						onMove={ onMove }
						onRemove={ onRemove }
						isFirst={ isFirst }
						isLast={ isLast }
						onTitleBlur={ onTitleBlur }
						onTitleChange={ onTitleChange }
						titleInput={ titleInput }
					/>
				</Fragment>
			) }
		/>
	);

	return (
		<Fragment>
			<div className="woocommerce-dashboard__dashboard-leaderboards">
				<SectionHeader
					title={ title || __( 'Leaderboards', 'woocommerce-admin' ) }
					menu={ renderMenu() }
				/>
				<div className="woocommerce-dashboard__columns">
					{ renderLeaderboards( {
						allLeaderboards,
						hiddenBlocks,
						query,
						rowsPerTable,
						filters,
					} ) }
				</div>
			</div>
		</Fragment>
	);
};

Leaderboards.propTypes = {
	query: PropTypes.object.isRequired,
};

export default compose(
	withSelect( ( select ) => {
		const { getItems, getItemsError } = select( ITEMS_STORE_NAME );
		const { leaderboards: allLeaderboards } = getSetting( 'dataEndpoints', {
			leaderboards: [],
		} );

		return {
			allLeaderboards,
			getItems,
			getItemsError,
		};
	} )
)( Leaderboards );