[Redux] Extracting Presentational Components -- AddTodo

Posted 2020-06-09

The code to be refactored:

let nextTodoId = 0;
class TodoApp extends Component {
  render() {
    const {
      todos,
      visibilityFilter
    } = this.props;
    const visibleTodos = getVisibleTodos(
      todos,
      visibilityFilter
    );
    return (
      <div>
        <input ref={node => {
          this.input = node;
        }} />
        <button onClick={() => {
          store.dispatch({
            type: ‘ADD_TODO‘,
            text: this.input.value,
            id: nextTodoId++
          });
          this.input.value = ‘‘;
        }}>
          Add Todo
        </button>
        <ul>
          {visibleTodos.map(todo =>
            <li key={todo.id}
                onClick={() => {
                  store.dispatch({
                    type: ‘TOGGLE_TODO‘,
                    id: todo.id
                  });         
                }}
                style={{
                  textDecoration:
                    todo.completed ?
                      ‘line-through‘ :
                      ‘none‘
                }}>
              {todo.text}
            </li>
          )}
        </ul>
        <p>
          Show:
          {‘ ‘}
          <FilterLink
            filter=‘SHOW_ALL‘
            currentFilter={visibilityFilter}
          >
            All
          </FilterLink>
          {‘, ‘}
          <FilterLink
            filter=‘SHOW_ACTIVE‘
            currentFilter={visibilityFilter}
          >
            Active
          </FilterLink>
          {‘, ‘}
          <FilterLink
            filter=‘SHOW_COMPLETED‘
            currentFilter={visibilityFilter}
          >
            Completed
          </FilterLink>
        </p>
      </div>
    );
  }
}

 

We extracting the Add todo input and button to a functional component, the functional components don‘t have instances. So we remove 

this.input

Also  I want it to be a presentational component and not specify behavior, so I just called the function called, "AddTodo," passing the current input value. I make on at click a prop so that the component that uses OnAddTodo can specify what happens when that button is clicked.

const AddTodo = ({
  onAddTodo
}) => {
  
  let input;
  return (
     <div>
          <input ref={node => {
          input = node;
        }} />
        <button onClick={() => {
          onAddTodo(input.value);
          input.value = ‘‘;
        }}>
          Add Todo
        </button>
     </div>
  );
}

 

let nextTodoId = 0;
class TodoApp extends Component {
  render() {
    const {
      todos,
      visibilityFilter
    } = this.props;
    const visibleTodos = getVisibleTodos(
      todos,
      visibilityFilter
    );
    return (
      <div>
        <AddTodo 
           onAddTodo={ text =>
              store.dispatch({
                  type: ‘ADD_TODO‘,
                  id: nextTodoId++,
                  text
              })
           }
        ></AddTodo>
        <ul>
          {visibleTodos.map(todo =>
            <li key={todo.id}
                onClick={() => {
                  store.dispatch({
                    type: ‘TOGGLE_TODO‘,
                    id: todo.id
                  });         
                }}
                style={{
                  textDecoration:
                    todo.completed ?
                      ‘line-through‘ :
                      ‘none‘
                }}>
              {todo.text}
            </li>
          )}
        </ul>
        <p>
          Show:
          {‘ ‘}
          <FilterLink
            filter=‘SHOW_ALL‘
            currentFilter={visibilityFilter}
          >
            All
          </FilterLink>
          {‘, ‘}
          <FilterLink
            filter=‘SHOW_ACTIVE‘
            currentFilter={visibilityFilter}
          >
            Active
          </FilterLink>
          {‘, ‘}
          <FilterLink
            filter=‘SHOW_COMPLETED‘
            currentFilter={visibilityFilter}
          >
            Completed
          </FilterLink>
        </p>
      </div>
    );
  }
}