mirror of
https://github.com/reduxjs/redux-devtools.git
synced 2024-12-05 07:53:51 +03:00
6782f4ae41
* Move extension * prettier
96 lines
2.2 KiB
JavaScript
96 lines
2.2 KiB
JavaScript
import React, { Component } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import TodoItem from './TodoItem';
|
|
import Footer from './Footer';
|
|
import {
|
|
SHOW_ALL,
|
|
SHOW_COMPLETED,
|
|
SHOW_ACTIVE,
|
|
} from '../constants/TodoFilters';
|
|
|
|
const TODO_FILTERS = {
|
|
[SHOW_ALL]: () => true,
|
|
[SHOW_ACTIVE]: (todo) => !todo.completed,
|
|
[SHOW_COMPLETED]: (todo) => todo.completed,
|
|
};
|
|
|
|
class MainSection extends Component {
|
|
constructor(props, context) {
|
|
super(props, context);
|
|
this.state = { filter: SHOW_ALL };
|
|
}
|
|
|
|
handleClearCompleted() {
|
|
const atLeastOneCompleted = this.props.todos.some((todo) => todo.completed);
|
|
if (atLeastOneCompleted) {
|
|
this.props.actions.clearCompleted();
|
|
}
|
|
}
|
|
|
|
handleShow(filter) {
|
|
this.setState({ filter });
|
|
}
|
|
|
|
renderToggleAll(completedCount) {
|
|
const { todos, actions } = this.props;
|
|
if (todos.length > 0) {
|
|
return (
|
|
<input
|
|
className="toggle-all"
|
|
type="checkbox"
|
|
checked={completedCount === todos.length}
|
|
onChange={actions.completeAll}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
renderFooter(completedCount) {
|
|
const { todos } = this.props;
|
|
const { filter } = this.state;
|
|
const activeCount = todos.length - completedCount;
|
|
|
|
if (todos.length) {
|
|
return (
|
|
<Footer
|
|
completedCount={completedCount}
|
|
activeCount={activeCount}
|
|
filter={filter}
|
|
onClearCompleted={this.handleClearCompleted.bind(this)}
|
|
onShow={this.handleShow.bind(this)}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { todos, actions } = this.props;
|
|
const { filter } = this.state;
|
|
|
|
const filteredTodos = todos.filter(TODO_FILTERS[filter]);
|
|
const completedCount = todos.reduce(
|
|
(count, todo) => (todo.completed ? count + 1 : count),
|
|
0
|
|
);
|
|
|
|
return (
|
|
<section className="main">
|
|
{this.renderToggleAll(completedCount)}
|
|
<ul className="todo-list">
|
|
{filteredTodos.map((todo) => (
|
|
<TodoItem key={todo.id} todo={todo} {...actions} />
|
|
))}
|
|
</ul>
|
|
{this.renderFooter(completedCount)}
|
|
</section>
|
|
);
|
|
}
|
|
}
|
|
|
|
MainSection.propTypes = {
|
|
todos: PropTypes.array.isRequired,
|
|
actions: PropTypes.object.isRequired,
|
|
};
|
|
|
|
export default MainSection;
|