Skip to content
Permalink
Browse files

refactor into more than one component

  • Loading branch information...
rwieruch committed Apr 6, 2019
1 parent 0f33780 commit d024a244193142fed675ce43d67c71039947548c
Showing with 71 additions and 57 deletions.
  1. +71 −57 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>
);
};

0 comments on commit d024a24

Please sign in to comment.
You can’t perform that action at this time.