solution #2669
solution #2669
Conversation
There was a problem hiding this comment.
Great job on implementing the task! 🎉 Your code meets the core requirements, and the functionality is working as expected. While there is a minor issue with not using the classnames library for conditional class definitions, it doesn't significantly impact the functionality. Keep up the good work, and consider addressing this in future projects to enhance code maintainability. Keep learning and coding! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/App.tsx
Outdated
| const [isLoading, setIsLoading] = useState(false); | ||
| const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null); | ||
| const [query, setQuery] = useState(''); | ||
| const [status, setStatus] = useState('all'); |
There was a problem hiding this comment.
Create a corresponding type or enum for status
| </span> | ||
|
|
||
| {query && ( | ||
| <span className="icon is-right" style={{ pointerEvents: 'all' }}> |
There was a problem hiding this comment.
Avoid inline styles, use classes instead
src/components/TodoList/TodoList.tsx
Outdated
| <tbody> | ||
| {todos.map(todo => ( | ||
| <tr | ||
| data-cy="todo" |
src/components/TodoList/TodoList.tsx
Outdated
| <td className="is-vcentered"> | ||
| <span className="icon" data-cy="iconCompleted"> | ||
| <i className="fas fa-check" /> | ||
| </span> | ||
| </td> | ||
| ) : ( | ||
| <td className="is-vcentered" /> |
There was a problem hiding this comment.
You have <td className="is-vcentered" /> in both case only content is different
src/components/TodoList/TodoList.tsx
Outdated
| <span className="icon"> | ||
| <i | ||
| className={ | ||
| todo.id === selectedTodo?.id |
There was a problem hiding this comment.
You compare todo.id === selectedTodo?.id twice, create a variable
src/components/utils/filterTodos.ts
Outdated
| if (status === 'completed') { | ||
| return todo.completed === true; | ||
| } | ||
|
|
||
| if (status === 'active') { |
There was a problem hiding this comment.
- completed/active are magic values
- Use switch case instead
src/components/utils/filterTodos.ts
Outdated
| ) | ||
| .filter(todo => { | ||
| if (status === 'completed') { | ||
| return todo.completed === true; |
There was a problem hiding this comment.
You don't need to compare with true, it's already boolean
DEMO LINK