{"size": 1055, "ext": "js", "max_stars_repo_path": "examples/pagination/src/ListPaginators.js", "max_stars_repo_name": "jbaldassari/firestorter", "max_stars_repo_stars_event_min_datetime": "2017-11-15T16:42:13.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-25T18:01:34.000Z", "max_issues_repo_path": "examples/pagination/src/ListPaginators.js", "max_issues_repo_name": "jbaldassari/firestorter", "max_issues_repo_issues_event_min_datetime": "2017-11-26T02:47:38.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-17T13:38:25.000Z", "max_forks_repo_path": "examples/pagination/src/ListPaginators.js", "max_forks_repo_name": "jbaldassari/firestorter", "max_forks_repo_forks_event_min_datetime": "2017-11-26T15:54:56.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-19T04:46:31.000Z"}
{"max_stars_count": 378, "max_issues_count": 151, "max_forks_count": 45, "avg_line_length": 24.5348837209, "max_line_length": 96, "alphanum_fraction": 0.6976303318}
import React, { Component } from 'react';
import Left from 'material-ui/svg-icons/navigation/chevron-left';
import Right from 'material-ui/svg-icons/navigation/chevron-right';
import IconButton from 'material-ui/IconButton';
import { chocolateBars } from './store';
import { observer } from 'mobx-react';

const styles = {
	container: {
		display: 'flex',
		flexDirection: 'row'
	},
};

class ListPaginator extends Component {
	render() {
		const { canPaginateNext, canPaginatePrevious } = chocolateBars;

		return (
			<div style={styles.container}>
				<IconButton onClick={this.onClickPrevious} label="Previous" disabled={!canPaginatePrevious}>
					<Left />
				</IconButton>
				<IconButton onClick={this.onClickNext} label="Next" disabled={!canPaginateNext}>
					<Right />
				</IconButton>
			</div>
		);
	}

	onClickPrevious = () => {
		console.debug('onClickPrevious');
		chocolateBars.paginatePrevious();
	};

	onClickNext = () => {
		console.debug('onClickNext');
		chocolateBars.paginateNext();
	};
}

export default observer(ListPaginator);
