-
Notifications
You must be signed in to change notification settings - Fork 1.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
TAsk was solved #1502
base: master
Are you sure you want to change the base?
TAsk was solved #1502
Conversation
NazariiAlieksieiev
commented
Oct 25, 2024
- DEMO
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
you need to show loaders on all todos that you need to update
Screen.Recording.2024-10-25.at.21.39.25.mov
src/App.tsx
Outdated
<footer className="todoapp__footer" data-cy="Footer"> | ||
<span className="todo-count" data-cy="TodosCounter"> | ||
{todosCounter} | ||
</span> | ||
|
||
<nav className="filter" data-cy="Filter" onClick={onSetStatus}> | ||
<a | ||
href="#/" | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.all), | ||
})} | ||
data-cy="FilterLinkAll" | ||
> | ||
All | ||
</a> | ||
|
||
<a | ||
href={`#/${Status.active}`} | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.active), | ||
})} | ||
data-cy="FilterLinkActive" | ||
> | ||
Active | ||
</a> | ||
|
||
<a | ||
href={`#/${Status.completed}`} | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.completed), | ||
})} | ||
data-cy="FilterLinkCompleted" | ||
> | ||
Completed |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
create the footer and header components, it will simplify the logic
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job!
Let's make your code better
<a | ||
href="#/" | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.all), | ||
})} | ||
data-cy="FilterLinkAll" | ||
> | ||
All | ||
</a> | ||
|
||
<a | ||
href={`#/${Status.active}`} | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.active), | ||
})} | ||
data-cy="FilterLinkActive" | ||
> | ||
Active | ||
</a> | ||
|
||
<a | ||
href={`#/${Status.completed}`} | ||
className={cn('filter__link', { | ||
selected: isActiveButton(Status.completed), | ||
})} | ||
data-cy="FilterLinkCompleted" | ||
> | ||
Completed | ||
</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use Object.values(your created enum)
and render these options with map()
method
|
||
return ( | ||
<section className="todoapp__main" data-cy="TodoList"> | ||
{todos.map((todo, i) => ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do you need index here
{todos.map((todo, i) => ( | |
{todos.map((todo) => ( |
src/components/TodoList/TodoList.tsx
Outdated
className="todo__title" | ||
onDoubleClick={() => onStartEditing(todo.title, todo.id)} | ||
> | ||
{todo.title} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use destructuring for todo
src/components/TodoList/TodoList.tsx
Outdated
<div | ||
data-cy="Todo" | ||
className={cn('todo', { completed: todo.completed })} | ||
key={todo.id} | ||
> | ||
<label className="todo__status-label"> | ||
<input | ||
data-cy="TodoStatus" | ||
data-todoId={todo.id} | ||
type="checkbox" | ||
className="todo__status" | ||
checked={todo.completed} | ||
onClick={() => onToggle(todo.id, i)} | ||
/> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move all these logic to the TodoItem
component
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Well done