Solution #2677
Solution #2677
Conversation
There was a problem hiding this comment.
Great job on implementing the task requirements! 🎉 The code is well-structured and follows React best practices. Although there are a few minor issues, such as verifying imports and ensuring naming conventions, these do not significantly impact the functionality. Keep up the good work and consider addressing these minor points to further enhance your code quality. 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| import { TodoList } from './components/TodoList'; | ||
| import { TodoFilter } from './components/TodoFilter'; | ||
| import { TodoModal } from './components/TodoModal'; | ||
| import { Loader } from './components/Loader'; | ||
| import { getTodos } from './api'; |
There was a problem hiding this comment.
Ensure that the getTodos function is correctly imported from the ./api file. Verify that the ./api file exists and exports the getTodos function as expected.
| import { Loader } from '../Loader'; | ||
| import { Todo } from '../../types/Todo'; | ||
| import { User } from '../../types/User'; | ||
| import { getUser } from '../../api'; |
There was a problem hiding this comment.
Ensure that the getUser function is correctly imported from the ../../api file. Verify that the ../../api file exists and exports the getUser function as expected.
| const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null); | ||
| const [isLoading, setIsLoading] = useState(false); | ||
| const [query, setQuery] = useState(''); | ||
| const [status, setStatus] = useState('all'); |
There was a problem hiding this comment.
all/active/completed are magic values
| if (userStatus === 'completed') { | ||
| return todo.completed === true; | ||
| } | ||
|
|
||
| if (userStatus === 'active') { |
| <i className="fas fa-magnifying-glass" /> | ||
| </span> | ||
|
|
||
| {query && ( | ||
| <span className="icon is-right" style={{ pointerEvents: 'all' }}> |
There was a problem hiding this comment.
Avoid inline styles, use classes instead
| <tbody> | ||
| {todos.map(todo => ( | ||
| <tr | ||
| data-cy="todo" |
| <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 cases, only content is different
| <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
DEMO LINK