solution #1053
solution #1053
Conversation
|
|
||
| export const TodoList: React.FC = () => { | ||
| return ( | ||
| <> | ||
| <p className="notification is-warning"> |
There was a problem hiding this comment.
You should show it if there are no filtered todos:
Working version example:
src/components/TodoList/TodoList.tsx
Outdated
| {filteredTodos.map(todo => { | ||
| return ( |
There was a problem hiding this comment.
| {filteredTodos.map(todo => { | |
| return ( | |
| {filteredTodos.map(todo => { | |
| const { completed, id, title } = todo; | |
| return ( |
src/components/TodoList/TodoList.tsx
Outdated
| 'has-text-danger': todo.completed === false, | ||
| 'has-text-success': todo.completed === true, |
There was a problem hiding this comment.
| 'has-text-danger': todo.completed === false, | |
| 'has-text-success': todo.completed === true, | |
| 'has-text-danger': !todo.completed, | |
| 'has-text-success': todo.completed, |
package.json
Outdated
| "@mate-academy/students-ts-config": "*", | ||
| "@mate-academy/stylelint-config": "*", | ||
| "@types/node": "^20.14.10", | ||
| "@types/react": "^18.3.3", | ||
| "@types/react-dom": "^18.3.0", | ||
| "@types/react-redux": "^7.1.33", | ||
| "@types/react-transition-group": "^4.4.10", | ||
| "@typescript-eslint/eslint-plugin": "^8.8.0", |
There was a problem hiding this comment.
Do you really need it?
I guess locally you did npm I --legacy-per-deps to fix it. But not sure you need this version. If yes - you can try to change "@typescript-eslint/parser": "^7.16.0" version to the same (see error)
There was a problem hiding this comment.
My solution was to clone the repo into a new folder and reinstall the dependencies. Thanks!
src/components/TodoList/TodoList.tsx
Outdated
| const { completed, id, title } = todo; | ||
|
|
||
| return ( | ||
| <tr | ||
| data-cy="todo" | ||
| className={classnames({ | ||
| 'has-background-info-light': selectedTodo, | ||
| })} | ||
| key={id} | ||
| > | ||
| <td className="is-vcentered">{id}</td> | ||
| <td className="is-vcentered"> | ||
| {completed && ( | ||
| <span className="icon" data-cy="iconCompleted"> | ||
| <i className="fas fa-check" /> | ||
| </span> | ||
| )} | ||
| </td> | ||
| <td className="is-vcentered is-expanded"> | ||
| <p | ||
| className={classnames({ | ||
| 'has-text-danger': !completed, | ||
| 'has-text-success': completed, | ||
| })} | ||
| > | ||
| {title} |
There was a problem hiding this comment.
Move this logic to the TodoItem component
src/utils/filter.ts
Outdated
| case 'active': | ||
| filteredTodos = todos.filter(todo => !todo.completed); | ||
| break; | ||
|
|
||
| case 'completed': |
There was a problem hiding this comment.
Create a enum for 'all', 'active', 'completed' and use it everywhere
DEMO LINK