<commit_before>
// @flow
// TodoReactElement
import React from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router';
import {toggleTodo} from '../action_creators.js'
import type {State$Todo,State$TodoList,State$App,StoreType } from '../state_types.js';

const TodoReactElement = (props:{onClick:Function,completed:boolean,text:string}) : React$Element<any>=>(
            <li onClick={props.onClick}
                style ={{ textDecoration: props.completed ? 'line-through' : 'none'}} >
                {props.text}
            </li>
);

// TodoList presentational component

type TodoListReactComponentProps ={todos:State$TodoList,onTodoClick:Function}

const TodoList = (props:TodoListReactComponentProps) : React$Element<any>=>(
  <ul>
    {props.todos.map( todo=>
      <TodoReactElement
        key ={todo.id}
        completed={todo.completed}
        onClick={()=> props.onTodoClick(todo.id)}
        text= {todo.text} >
      </TodoReactElement>)}
  </ul>
)

// VisibleTodoList container component

const getVisibleTodos  = (todos:State$TodoList, filter) : State$TodoList => {
  switch (filter) {
    case ('all' ):
      return todos;
    case ('completed'):
      return todos.filter(
        t => t.completed
      );
    case ('active'):
      return todos.filter(
        t => !t.completed
      );
    default:
      throw "undefined action"
  }
}

const mapStateToTodoListProps = (state,{params})=>{
  return { todos: getVisibleTodos(state.todos, params.filter || 'all') };
};

const mapDispatchToTodoListProps = (dispatch)=>(
   { onTodoClick: (id)=>{ dispatch(toggleTodo(id)) } })

export const VisibleTodoList = withRouter(connect(
  mapStateToTodoListProps,
  mapDispatchToTodoListProps
)(TodoList));<commit_msg>end of lecture II/9<commit_after>
// @flow
// TodoReactElement
import React from 'react';
import {connect} from 'react-redux';
import {withRouter} from 'react-router';
import {toggleTodo} from '../action_creators.js'
import type {State$Todo,State$TodoList,State$App,StoreType } from '../state_types.js';

const TodoReactElement = (props:{onClick:Function,completed:boolean,text:string}) : React$Element<any>=>(
            <li onClick={props.onClick}
                style ={{ textDecoration: props.completed ? 'line-through' : 'none'}} >
                {props.text}
            </li>
);

// TodoList presentational component

type TodoListReactComponentProps ={todos:State$TodoList,onTodoClick:Function}

const TodoList = (props:TodoListReactComponentProps) : React$Element<any>=>(
  <ul>
    {props.todos.map( todo=>
      <TodoReactElement
        key ={todo.id}
        completed={todo.completed}
        onClick={()=> props.onTodoClick(todo.id)}
        text= {todo.text} >
      </TodoReactElement>)}
  </ul>
)

// VisibleTodoList container component

const getVisibleTodos  = (todos:State$TodoList, filter) : State$TodoList => {
  switch (filter) {
    case ('all' ):
      return todos;
    case ('completed'):
      return todos.filter(
        t => t.completed
      );
    case ('active'):
      return todos.filter(
        t => !t.completed
      );
    default:
      throw "undefined action"
  }
}

const mapStateToTodoListProps = (state,{params})=>{
  return { todos: getVisibleTodos(state.todos, params.filter || 'all') };
};

export const VisibleTodoList = withRouter(connect(
  mapStateToTodoListProps,
  {onTodoClick:toggleTodo}
)(TodoList));
{'fraction_non_alphanumeric': 0.14644107351225205, 'fraction_numerical': 0.00029171528588098014, 'mean_word_length': 3.5059132720105124, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5365492', 'n_tokens_mistral': 1135, 'n_tokens_neox': 1131, 'n_words': 218}