import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters'; const FILTER_TITLES = { [SHOW_ALL]: 'All', [SHOW_UNMARKED]: 'Active', [SHOW_MARKED]: 'Completed' }; export default class Footer extends Component { static propTypes = { markedCount: PropTypes.number.isRequired, unmarkedCount: PropTypes.number.isRequired, filter: PropTypes.string.isRequired, onClearMarked: PropTypes.func.isRequired, onShow: PropTypes.func.isRequired }; render() { return ( <footer className="footer"> {this.renderTodoCount()} <ul className="filters"> {[SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED].map(filter => ( <li key={filter}>{this.renderFilterLink(filter)}</li> ))} </ul> {this.renderClearButton()} </footer> ); } renderTodoCount() { const { unmarkedCount } = this.props; const itemWord = unmarkedCount === 1 ? 'item' : 'items'; return ( <span className="todo-count"> <strong>{unmarkedCount || 'No'}</strong> {itemWord} left </span> ); } renderFilterLink(filter) { const title = FILTER_TITLES[filter]; const { filter: selectedFilter, onShow } = this.props; return ( <a className={classnames({ selected: filter === selectedFilter })} style={{ cursor: 'hand' }} onClick={() => onShow(filter)} > {title} </a> ); } renderClearButton() { const { markedCount, onClearMarked } = this.props; if (markedCount > 0) { return ( <button className="clear-completed" onClick={onClearMarked}> Clear completed </button> ); } return null; } }