Solution by Anna Kuvarina #15
Conversation
src/App.js
Outdated
|
|
||
| handleChangeCompletedAll = () => { | ||
| this.setState(prevState => { | ||
| if (prevState.visibleTodos.every(todo => todo.completed === false) |
src/App.js
Outdated
| handleChangeCompletedAll = () => { | ||
| this.setState(prevState => { | ||
| if (prevState.visibleTodos.every(todo => todo.completed === false) | ||
| || prevState.visibleTodos.every(todo => todo.completed === true)) { |
src/TodoList.js
Outdated
| import './styles/todoList.css'; | ||
|
|
||
| const TodoList = ({ todos, changeCompleted, changeCompletedAll, removeTodo}) => ( | ||
| <section className="main" style={{ display: 'block' }}> |
There was a problem hiding this comment.
перенеси display: block в класс main в css файл
src/TodoList.js
Outdated
| { | ||
| todos.map(todo => { | ||
| const classes = classnames ({ | ||
| 'todo-active': todo.completed === false, |
src/TodoList.js
Outdated
| todos.map(todo => { | ||
| const classes = classnames ({ | ||
| 'todo-active': todo.completed === false, | ||
| 'todo-completed': todo.completed === true, |
src/TodoList.js
Outdated
| type="checkbox" | ||
| name="completed" | ||
| className="toggle" | ||
| id={`todo-${todo.id}`} |
There was a problem hiding this comment.
префикс todo не делает id более уникальным
| import propTypes from 'prop-types'; | ||
|
|
||
| const TodosFilter = ({ handlerFilter }) => { | ||
|
|
There was a problem hiding this comment.
порада на майбутнє для таких речей створюєш масив цих фільтрів щось подібне:
[{name: 'all', text: 'All'}, {name: 'completed', text: 'Completed'}, ...]
І тоді не пишеш стільки коду при рендері, просто проходишся map по свому масиву і створєш список потрібних фільтрів, кількість коду менша, а змінити, щось буде набагато простіше, в одному місці міняєш, а міняється всюди)
src/App.js
Outdated
| ...prevState.todos, | ||
| { | ||
| title, | ||
| id: prevState.todos.length + 1, |
There was a problem hiding this comment.
тобто в тебе можуть todo з однакоми id? Якщо я видаляю першу тудушку то в нової доданої буде такий же id як і в передостанньої тудушки. Пофікси це
src/App.js
Outdated
|
|
||
| return { | ||
| visibleTodos: newTodos, | ||
| todos: newTodos, |
There was a problem hiding this comment.
Дійсно треба 2 копії зберігати? Може є спосіб як працювати тільки з одним масивом в один момент часу, а не тримати в пам'яті два ідентичні масиви?
There was a problem hiding this comment.
Можеш не міняти, але на майбутнє думай про ефективне використання пам'яті
src/App.js
Outdated
| }; | ||
| case 'active': | ||
| return { | ||
| visibleTodos: state.todos.filter(todo => ( |
There was a problem hiding this comment.
state.todos.filter(todo => !todo.completed)
src/App.js
Outdated
| }; | ||
| case 'completed': | ||
| return { | ||
| visibleTodos: state.todos.filter(todo => ( |
There was a problem hiding this comment.
state.todos.filter(todo => todo.completed)
src/App.js
Outdated
| handlerClearCompleted = () => { | ||
| this.setState(prevState => { | ||
| const newTodos = prevState.visibleTodos.filter(todo => ( | ||
| todo.completed === false |
There was a problem hiding this comment.
visibleTodos.filter(todo => !todo.completed)
| }); | ||
|
|
||
| return ( | ||
| <li className={classes} key={todo.id}> |
There was a problem hiding this comment.
а ось це вже окремий компонент Todo
| </section> | ||
| ); | ||
|
|
||
| <footer className="footer" style={{ display: 'block' }}> |
There was a problem hiding this comment.
по-хорошому Footer це окремий компонент
demo link