refactor into more than one component

Author: rwieruch

src/App.js

@@ -64,19 +64,6 @@ const todoReducer = (state, action) => {
 const App = () => {
   const [filter, dispatchFilter] = useReducer(filterReducer, 'ALL');
   const [todos, dispatchTodos] = useReducer(todoReducer, initalTodos);
-  const [task, setTask] = useState('');
-
-  const handleShowAll = () => {
-    dispatchFilter({ type: 'SHOW_ALL' });
-  };
-
-  const handleShowComplete = () => {
-    dispatchFilter({ type: 'SHOW_COMPLETE' });
-  };
-
-  const handleShowIncomplete = () => {
-    dispatchFilter({ type: 'SHOW_INCOMPLETE' });
-  };
 
   const filteredTodos = todos.filter(todo => {
     if (filter === 'ALL') {
@@ -94,65 +81,92 @@ const App = () => {
     return false;
   });
 
-  const handleChangeCheckbox = todo => {
-    dispatchTodos({
+  return (
+    <div>
+      <Filter dispatch={dispatchFilter} />
+      <TodoList dispatch={dispatchTodos} todos={filteredTodos} />
+      <AddTodo dispatch={dispatchTodos} />
+    </div>
+  );
+};
+
+const Filter = ({ dispatch }) => {
+  const handleShowAll = () => {
+    dispatch({ type: 'SHOW_ALL' });
+  };
+
+  const handleShowComplete = () => {
+    dispatch({ type: 'SHOW_COMPLETE' });
+  };
+
+  const handleShowIncomplete = () => {
+    dispatch({ type: 'SHOW_INCOMPLETE' });
+  };
+
+  return (
+    <div>
+      <button type="button" onClick={handleShowAll}>
+        Show All
+      </button>
+      <button type="button" onClick={handleShowComplete}>
+        Show Complete
+      </button>
+      <button type="button" onClick={handleShowIncomplete}>
+        Show Incomplete
+      </button>
+    </div>
+  );
+};
+
+const TodoList = ({ dispatch, todos }) => (
+  <ul>
+    {todos.map(todo => (
+      <TodoItem key={todo.id} dispatch={dispatch} todo={todo} />
+    ))}
+  </ul>
+);
+
+const TodoItem = ({ dispatch, todo }) => {
+  const handleChange = () =>
+    dispatch({
       type: todo.complete ? 'UNDO_TODO' : 'DO_TODO',
       id: todo.id,
     });
-  };
 
-  const handleChangeInput = event => {
-    setTask(event.target.value);
-  };
+  return (
+    <li>
+      <label>
+        <input
+          type="checkbox"
+          checked={todo.complete}
+          onChange={handleChange}
+        />
+        {todo.task}
+      </label>
+    </li>
+  );
+};
+
+const AddTodo = ({ dispatch }) => {
+  const [task, setTask] = useState('');
 
   const handleSubmit = event => {
     if (task) {
-      dispatchTodos({ type: 'ADD_TODO', task });
+      dispatch({ type: 'ADD_TODO', task });
     }
 
     setTask('');
 
     event.preventDefault();
   };
 
+  const handleChange = event => setTask(event.target.value);
+
   return (
-    <div>
-      <div>
-        <button type="button" onClick={handleShowAll}>
-          Show All
-        </button>
-        <button type="button" onClick={handleShowComplete}>
-          Show Complete
-        </button>
-        <button type="button" onClick={handleShowIncomplete}>
-          Show Incomplete
-        </button>
-      </div>
-
-      <ul>
-        {filteredTodos.map(todo => (
-          <li key={todo.id}>
-            <label>
-              <input
-                type="checkbox"
-                checked={todo.complete}
-                onChange={() => handleChangeCheckbox(todo)}
-              />
-              {todo.task}
-            </label>
-          </li>
-        ))}
-      </ul>
-
-      <form onSubmit={handleSubmit}>
-        <input
-          type="text"
-          value={task}
-          onChange={handleChangeInput}
-        />
-        <button type="submit">Add Todo</button>
-      </form>
-    </div>
+    <form onSubmit={handleSubmit}>
+      <input type="text" value={task} onChange={handleChange} />
+      <button type="submit">Add Todo</button>
+    </form>
   );
 };