17_containers_via_connect_to_all.js

// http://jsbin.com/qolisigobo/7/edit?js,output

const { combineReducers, createStore } = Redux;
const { Component } = React;
const { connect, Provider } = ReactRedux;

const todo = (state, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        id: action.id,
        text: action.text,
        completed: false
      };
    case 'TOGGLE_TODO':
      if (state.id !== action.id) {
        return state;
      }

      return {
        ...state,
        completed: !state.completed
      };
    default:
      return state;
  }
};

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

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

const todoApp = combineReducers({
  todos,
  visibilityFilter
});

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos;
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed);
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed);
  }
};

let nextTodoId = 0;
let AddTodo = ({ dispatch }) => {
  let input;
  
  return (
    <div>
      <input ref={node => {
        input = node;
      }} />
      <button
        onClick={() => {
          dispatch({
            type: 'ADD_TODO',
            id: nextTodoId++,
            text: input.value
          })
          
          input.value = '';
        }}
      >Add Todo</button>
    </div>
  )
}
/*
AddTodo = connect(
  // AddTodo'nun hiçbir props'u state'e ihtiyaç duymadığından
  // boş obje props listesi boş demek  
  //state => { return {} },
  
  // hatta buna da gerek yok çünkü store'a subscribe olmuş oluyoruz,
  // onun yerine null döndürürsek bunu da yapmamış oluruz
  null,
  
  // dispatch'ı maplemek yerine doğrudan propslara veriyoruz,
  // böylece component'imiz propsların içinden dispatch 
  // metodunu alıp kullanabiliyor yukarıda
  //dispatch => { return { dispatch } }
  
  // hatta buna da gerek yok çünkü direkt dispatch fonksiyonunu
  // inject etmek çok kullanıldığından bu kadar uğraşmak yerine
  // buna da null verirsek onu props'a inject eder
  null
)(AddTodo);
*/
// e madem öyle hiçbirine gerek yok
// connectin içini boş bırakırsak defualt olarak store'a subscribe olmaz
// ve propslara dispatch'i inject eder
AddTodo = connect()(AddTodo);

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

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

const Link = ({ children, onClick, active }) => {
  if (active) {
    return <span>{children}</span>
  }
  
  return (
    <a href='#'
      onClick={(e) => {
        e.preventDefault();
        onClick();
      }}
    >
      {children}
    </a>
  )
}

// ikinci argüman olarak props alır
const mapStateToLinkProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
};

const mapDispatchToLinkProps = (dispatch, ownProps) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  }
};

const FilterLink = connect(
  mapStateToLinkProps,
  mapDispatchToLinkProps
)(Link);

const Footer = () => (
  <p>
    Show:
    
    {' '}
    
    <FilterLink
      filter='SHOW_ALL'
    >All</FilterLink>
    
    {' '}
    
    <FilterLink
      filter='SHOW_ACTIVE'
    >Active</FilterLink>
  
    {' '}
  
    <FilterLink
      filter='SHOW_COMPLETED'
    >Completed</FilterLink>
  </p>
)

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

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

const VisibleTodoList = connect(
  mapStateToTodoListProps,
  mapDispatchToTodoListProps
)(TodoList);

const TodoApp = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
);

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