Reduxagain

function todo(state,  action)
{
    switch(action.type)
    {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            }
            break;

        case 'TOGGLE_TODO':
            if(state.id == action.id)
                return {...state , completed: !state.completed};
            else
                return state;
            break;

        default:
            return state;
    }
}


function todos(state = [] , action)
{
    switch(action.type)
    {
        case 'ADD_TODO':
            return [...state , todo(undefined, action)]
            break;
        case 'TOGGLE_TODO':
            return state.map((t) =>
            {
                return  todo(t,action);
            })

        default:
            return state;
    }
}



function visibilityFilter(state = 'SHOW_ALL' , action)
{
    switch (action.type)
    {
        case 'SET_VISIBILITY_FILTER':
            return action.filter;
        default:
            return state;
    }
}

function getVisibleTodos(todos,filter)
{
    switch (filter)
    {
        case 'SHOW_ALL':
            return todos;
            break;

        case 'SHOW_COMPLETED':
            return todos.filter((t) =>
            {
                return t.completed == true;
            });
            break;

        case 'SHOW_ACTIVE':
            return todos.filter((t) =>
            {
                return t.completed == false;
            });
            break;
    }
}

const {createStore} = Redux;
const {combineReducers} = Redux;

const UnionReducers = combineReducers({
    todos: todos,
    visibilityFilter: visibilityFilter
});





const Todo = ({onClick, completed, text}) =>
{
    return (
        <li onClick={onClick}
            style={{
                textDecoration:
                    completed ? 'line-through' : 'none'
            }}>{text}</li>
    )
};

const TodoList = ({todos , onTodoClick}) =>
{

    return (
        <ul>
            {todos.map((todo) =>
                <Todo key={todo.id}
                      completed={todo.completed}
                      text={todo.text}
                      onClick={() => onTodoClick(todo.id)}
                />


            )}
        </ul>
    )
};



//context in stateless functional component also has access to context
//react pass context as second parametr

const Footer = ({visibilityFilter, onFilterClick}) =>
{
    return (
        <p>
            <span>Show:</span>
            <FilterLink filter='SHOW_ALL'
                        children="All" />
            <FilterLink filter='SHOW_ACTIVE'
                        children="Active" />
            <FilterLink filter='SHOW_COMPLETED'
                        children="Completed" />
        </p>
    );
}

const Link = ({active,children,onClick}) =>
{
    if(active)
        return <span>{children}</span>;

    return (
        <a href="#"
           onClick={(e) => {
               e.preventDefault();
               onClick();
           }}>{children}</a>
    );

};

class VisibleTodoList extends React.Component
{
    componentDidMount()
    {
        const {store} = this.context;

        this.unsubscribe = store.subscribe(() =>
        {

            console.log("STATE UPDATES AND I AM RERENDER " + "VISIBLETODOLIST")
            this.forceUpdate();
        });
    }

    componentWillUnmount()
    {
        this.unsubscribe();
    }


    render()
    {
        const props = this.props;
        const {store} = this.context;
        const state = store.getState();

        return (
            <TodoList todos={
                getVisibleTodos(state.todos,state.visibilityFilter)
            }
                      onTodoClick={(id) =>
                      {
                          store.dispatch({
                              type: 'TOGGLE_TODO',
                              id: id
                          })
                      }}
            />
        );

    }
}

//In that section we specify which context props we want get from parent context,if we dont specify that ,we not receive context props
VisibleTodoList.contextTypes = {
    store: React.PropTypes.object
}



class FilterLink extends React.Component
{
    componentDidMount()
    {
        const {store} = this.context;

        this.unsubscribe = store.subscribe(() =>
        {
            console.log("redux state updates: i am rerender");
            console.log("FILTERLINK COMPONENT");
            this.forceUpdate();
        });
    }

    componentWillUnmount()
    {
        this.unsubscribe();
    }


    render()
    {
        const props = this.props;
        const {store} = this.context;
        const state = store.getState();

        return (
            <Link active={
                props.filter === state.visibilityFilter
            }
                  onClick={() =>
                  {
                      store.dispatch({
                          type: 'SET_VISIBILITY_FILTER',
                          filter: props.filter
                      })
                  }}
            >
                {props.children}
            </Link>
        );
    }
}

FilterLink.contextTypes = {
    store: React.PropTypes.object
};


let nextTodoId = 1;

const TodoApp  = () =>
{

    return (
        <div>
            <AddTodo />
            <VisibleTodoList />
            <Footer />
        </div>
    );
}

/*

class Provider extends React.Component
{
    //specify props which recive all child components
    getChildContext()
    {
        return {
            store : this.props.store
        }
    }

    render()
    {
        return this.props.children;

    }
}

//if we dont specify that part,child components doesnot recieve specifing props
Provider.childContextTypes = {
    store: React.PropTypes.object
}
*/


const {Provider} = ReactRedux;





const mapStateToTodoListProps = (state) =>
{
        return {
            todos: getVisibleTodos(state.todos,state.visibilityFilter)
        }
};

const mapDispatchToTodoListProps = (dispatch) =>
{
        return {
            onTodoClick: (id) =>
            {
                dispatch({
                    type: "TOGGLE_TODO",
                    id: id
                })
            }
        };
};

const {connect} = ReactRedux;




//Определяем в какой компонент хотим внедрить State и Dispatch методы
const VisibleTodoListx = connect(
    mapStateToTodoListProps,
    mapDispatchToTodoListProps
)(TodoList);


let AddTodo  = (props) =>
{


    return (
        <div>
            <input ref={(node) => input = node}/>
            <button onClick={() =>
            {
                props.dispatch({
                    type: 'ADD_TODO',
                    text: input.value,
                    id: nextTodoId++
                });

                input.value = '';

            }}>Add Todo</button>
        </div>
    )
}

AddTodo = connect(
   null,
    dispatch =>
    {
        return {dispatch};
    }

)(AddTodo);

    console.log("dfsafa");
console.dir(AddTodo);






ReactDOM.render(<Provider store={createStore(UnionReducers)}>
        <TodoApp/>
    </Provider>,
    document.getElementById('root'));