redux-devtools/packages/redux-slider-monitor/examples/todomvc/components/MainSection.js
Jhen-Jie Hong 476e37a875 Add redux-slider-monitor (#434)
* Add redux-slider-monitor

* Fix example configuration of redux-slider-monitor

* Fix lint errors

* CI: Run build:all before lint
2018-12-22 16:20:04 +02:00

91 lines
2.3 KiB
JavaScript
Executable File

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import TodoItem from './TodoItem';
import Footer from './Footer';
import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
const TODO_FILTERS = {
[SHOW_ALL]: () => true,
[SHOW_UNMARKED]: todo => !todo.marked,
[SHOW_MARKED]: todo => todo.marked
};
export default class MainSection extends Component {
static propTypes = {
todos: PropTypes.array.isRequired,
actions: PropTypes.object.isRequired
};
constructor(props, context) {
super(props, context);
this.handleClearMarked = this.handleClearMarked.bind(this);
this.handleShow = this.handleShow.bind(this);
this.state = { filter: SHOW_ALL };
}
handleClearMarked() {
const atLeastOneMarked = this.props.todos.some(todo => todo.marked);
if (atLeastOneMarked) {
this.props.actions.clearMarked();
}
}
handleShow(filter) {
this.setState({ filter });
}
render() {
const { todos, actions } = this.props;
const { filter } = this.state;
const filteredTodos = todos.filter(TODO_FILTERS[filter]);
const markedCount = todos.reduce((count, todo) => (todo.marked ? count + 1 : count), 0);
return (
<section className='main'>
{this.renderToggleAll(markedCount)}
<ul className='todo-list'>
{filteredTodos.map(todo => (
<TodoItem key={todo.id} todo={todo} {...actions} />
))}
</ul>
{this.renderFooter(markedCount)}
</section>
);
}
renderToggleAll(markedCount) {
const { todos, actions } = this.props;
if (todos.length > 0) {
return (
<input
className='toggle-all'
type='checkbox'
checked={markedCount === todos.length}
onChange={actions.markAll}
/>
);
}
return null;
}
renderFooter(markedCount) {
const { todos } = this.props;
const { filter } = this.state;
const unmarkedCount = todos.length - markedCount;
if (todos.length) {
return (
<Footer
markedCount={markedCount}
unmarkedCount={unmarkedCount}
filter={filter}
onClearMarked={this.handleClearMarked}
onShow={this.handleShow}
/>
);
}
return null;
}
}