{"size": 1552, "ext": "js", "max_stars_repo_path": "react-todos-es5-2/src/components/TodoList.js", "max_stars_repo_name": "bosscheng/react-todos-study", "max_stars_repo_stars_event_min_datetime": "2018-12-21T06:19:07.000Z", "max_stars_repo_stars_event_max_datetime": "2018-12-21T06:19:07.000Z", "max_issues_repo_path": "react-todos-es5-2/src/components/TodoList.js", "max_issues_repo_name": "bosscheng/react-todos-study", "max_issues_repo_issues_event_min_datetime": "2021-09-02T16:45:12.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T10:22:08.000Z", "max_forks_repo_path": "react-todos-es5-2/src/components/TodoList.js", "max_forks_repo_name": "bosscheng/react-todos-study", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 25.8666666667, "max_line_length": 87, "alphanum_fraction": 0.6146907216}
/*
* author: wancheng
* date: 2018-12-19
* desc:
*/
import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {toggleTodo} from "../actions";
import Todo from './Todo';
import {VisibilityFilters} from "../actions";

const getVisibleTodos = (todos, filter) => {
    switch (filter) {
        case VisibilityFilters.SHOW_ALL:
            return todos
        case VisibilityFilters.SHOW_COMPLETED:
            return todos.filter(t => t.completed)
        case VisibilityFilters.SHOW_ACTIVE:
            return todos.filter(t => !t.completed)
        default:
            throw new Error('Unknown filter: ' + filter)
    }
};

// 类似于 getter
const mapStateToProps = state => ({
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
});

const mapDispatchToProps = dispatch => ({
    toggleTodo: id => dispatch(toggleTodo(id))
});

const TodoList = ({todos, toggleTodo}) => {
    return (
        <ul>
            {todos.map(todo => {
                return (
                    <Todo key={todo.id} {...todo} onClick={() => toggleTodo(todo.id)}/>
                )
            })}
        </ul>
    )
};

TodoList.propTypes = {
    // 内部结构 判断
    todos: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.number.isRequired,
        completed: PropTypes.bool.isRequired,
        text: PropTypes.string.isRequired
    }).isRequired).isRequired,
    toggleTodo: PropTypes.func.isRequired
};

// export default TodoList;

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);
