add solution #2684
add solution #2684
Conversation
src/App.tsx
Outdated
| .filter(todo => todo.title.toLowerCase().includes(query.toLowerCase())) | ||
| .filter(todo => { | ||
| switch (filterParameter) { | ||
| case 'completed': |
There was a problem hiding this comment.
let's move completed, active, all to the enum
There was a problem hiding this comment.
enum Filters already exists in types folder: enum Filters {
All = 'all',
Active = 'active',
Completed = 'completed',
}
src/components/TodoList/TodoList.tsx
Outdated
| </tr> | ||
| ) : ( | ||
| todos.map(todo => ( | ||
| <tr data-cy="todo" className="" key={todo.id}> |
There was a problem hiding this comment.
| <tr data-cy="todo" className="" key={todo.id}> | |
| <tr data-cy="todo" key={todo.id}> |
let's remove redundant class name
There was a problem hiding this comment.
forgot to use 'has-background-info-light' class if todo is selected
| {todo.completed ? ( | ||
| <strong className="has-text-success">Done</strong> | ||
| ) : ( | ||
| <strong className="has-text-danger">Planned</strong> | ||
| )} |
There was a problem hiding this comment.
you can use one strong tag and just change class name and content
There was a problem hiding this comment.
Desided to use these aproach, because it's more obvious and simplest than using many conditions in className and content
| <option value={Filters.All}>All</option> | ||
| <option value={Filters.Active}>Active</option> | ||
| <option value={Filters.Completed}>Completed</option> |
There was a problem hiding this comment.
we can show these options using .map()
There was a problem hiding this comment.
It's good idea, but I don't know how to use map to the enum object Filters: enum Filters {
All = 'all',
Active = 'active',
Completed = 'completed',
}
There was a problem hiding this comment.
It's good idea, but I don't know how to use map to the enum object Filters: enum Filters { All = 'all', Active = 'active', Completed = 'completed', }
You can use Object.values/key/entries to convert enum into an array
| <option value={Filters.All}>All</option> | ||
| <option value={Filters.Active}>Active</option> | ||
| <option value={Filters.Completed}>Completed</option> |
There was a problem hiding this comment.
It's good idea, but I don't know how to use map to the enum object Filters: enum Filters { All = 'all', Active = 'active', Completed = 'completed', }
You can use Object.values/key/entries to convert enum into an array
DEMO LINK