Skip to content
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

Open
wants to merge 4 commits into
base: master
Choose a base branch
from

Conversation

NazariiAlieksieiev
Copy link

Copy link

@etojeDenys etojeDenys left a 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
Comment on lines 412 to 445
<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

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

Copy link

@volodymyr-soltys97 volodymyr-soltys97 left a 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

Comment on lines 47 to 75
<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>

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) => (

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

Suggested change
{todos.map((todo, i) => (
{todos.map((todo) => (

className="todo__title"
onDoubleClick={() => onStartEditing(todo.title, todo.id)}
>
{todo.title}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use destructuring for todo

Comment on lines 51 to 64
<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)}
/>

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

Copy link

@vadiimvooo vadiimvooo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants