Solution #777
Solution #777
Conversation
focus on input
There was a problem hiding this comment.
Well done, please try to create generic Button component, where you will pass some props like onClick and text to render and use this kind of component throughout the app - you won't have to create a component for every single button, you will only pass props to it
There was a problem hiding this comment.
when ToggleButton is pressed, every single todo starts loading, please try to fix it
There was a problem hiding this comment.
I checked it and it works. Could you show me a case where it doesn't work properly?
https://monosnap.com/file/cSfxJXozDR8dt1FAI7TECDTZxiEHFj
src/provider/todoProvider.tsx
Outdated
There was a problem hiding this comment.
this directory should probably be named context, and the file should be a TodoContext.tsx
src/components/TaskList/TaskList.tsx
Outdated
| import { Task } from './Task'; | ||
| import { useTodo } from '../../provider/todoProvider'; | ||
|
|
||
| export const TaskList = () => { |
There was a problem hiding this comment.
since we're using Todo name throughout the app, I would stick to it and name this component TodoList
src/components/TaskList/TaskList.tsx
Outdated
| const visibleTodos = () => { | ||
| if (filterTodos === 'active') { | ||
| return todos.filter(todo => !todo.completed); | ||
| } | ||
|
|
||
| if (filterTodos === 'completed') { | ||
| return todos.filter(todo => todo.completed); | ||
| } | ||
|
|
||
| return todos; | ||
| }; |
src/components/Header/Header.tsx
Outdated
|
|
||
| return ( | ||
| <header className="todoapp__header"> | ||
| {todos.length !== 0 |
There was a problem hiding this comment.
| {todos.length !== 0 | |
| {todos.length |
| const loaderCases | ||
| = ((temptTodo && temptTodo.id === todo.id) | ||
| || (editedTodo && todo.completed) | ||
| || todo.hasLoader) as boolean; |
src/components/TaskList/TaskList.tsx
Outdated
| className="todoapp__main" | ||
| data-cy="TodoList" | ||
| > | ||
| {visibleTodos().map(todo => ( |
There was a problem hiding this comment.
visibleTodos should be value, instead of function
src/provider/todoProvider.tsx
Outdated
| setTodos((prevState) => { | ||
| return prevState.filter(t => t.id !== task.id); | ||
| }); |
There was a problem hiding this comment.
| setTodos((prevState) => { | |
| return prevState.filter(t => t.id !== task.id); | |
| }); | |
| setTodos((prevState) => prevState.filter(t => t.id !== task.id)); |
DEMO LINK