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

Develop #2563

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

Develop #2563

wants to merge 5 commits into from

Conversation

Stepan-R
Copy link

DEMO LINK

два теста падають але в мене немає таких todo які є в тесті

Comment on lines 35 to 37
{todos.map(todo => (
<tbody key={todo.id}>
<tr

Choose a reason for hiding this comment

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

image you should map the tr elements, not tbody

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!
To improve:

  1. You need to add data attribute for tests
image
  1. Fix the search logic, check it on the working example
image

Comment on lines +23 to +28
.then(todosFromServer => {
setTodos(todosFromServer);
})
.then(() => {
setLoader(false);
});

Choose a reason for hiding this comment

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

Suggested change
.then(todosFromServer => {
setTodos(todosFromServer);
})
.then(() => {
setLoader(false);
});
.then(setTodos)
.then(() => setLoader(false));

Choose a reason for hiding this comment

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

image red minuses - you need to delete it

green plusses - you need to add it

src/App.tsx Outdated
Comment on lines 44 to 49
if (completedSearch !== 'all') {
if (completedSearch === 'completed') {
visTodos = visTodos.filter(todo => todo.completed === true);
}

if (completedSearch === 'active') {

Choose a reason for hiding this comment

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

Create a enum for 'all', 'active', 'completed' and use it everywhere

src/App.tsx Outdated

if (completedSearch !== 'all') {
if (completedSearch === 'completed') {
visTodos = visTodos.filter(todo => todo.completed === true);

Choose a reason for hiding this comment

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

Suggested change
visTodos = visTodos.filter(todo => todo.completed === true);
visTodos = visTodos.filter(todo => todo.completed);

src/App.tsx Outdated
}

if (completedSearch === 'active') {
visTodos = visTodos.filter(todo => todo.completed === false);

Choose a reason for hiding this comment

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

Suggested change
visTodos = visTodos.filter(todo => todo.completed === false);
visTodos = visTodos.filter(todo => !todo.completed);

Comment on lines 37 to 59
<tr
key={todo.id}
data-cy="todo"
className={cn({
'has-background-info-light': todo.id === modalId,
})}
>
<td className="is-vcentered">{todo.id}</td>
<td className="is-vcentered">
{todo.completed && (
<span className="icon" data-cy="iconCompleted">
<i className="fas fa-check" />
</span>
)}
</td>
<td className="is-vcentered is-expanded">
<p
className={cn({
'has-text-danger': !todo.completed,
'has-text-success': todo.completed,
})}
>
{todo.title}

Choose a reason for hiding this comment

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

Move this logic to the TodoItem component

>
<td className="is-vcentered">{todo.id}</td>
<td className="is-vcentered">
{todo.completed && (

Choose a reason for hiding this comment

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

Use destructuring for todo

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.

Hi, the comments from the previous review still not fixed, you need to fix all comments and don't forget to make a deploy again after your changes

@Stepan-R
Copy link
Author

  .then(todosFromServer => {
    setTodos(todosFromServer);
  })
  .then(() => {
    setLoader(false);
  });
  .then(setTodos)
  .then(() => setLoader(false));
  
  it breaks the code, all the other - fixed

Comment on lines +23 to +28
.then(todosFromServer => {
setTodos(todosFromServer);
})
.then(() => {
setLoader(false);
});

Choose a reason for hiding this comment

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

image red minuses - you need to delete it

green plusses - you need to add it

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.

3 participants