Solution #814
Solution #814
Conversation
src/App.tsx
Outdated
| @@ -1,24 +1,288 @@ | |||
| /* eslint-disable max-len */ | |||
| /* eslint-disable jsx-a11y/control-has-associated-label */ | |||
There was a problem hiding this comment.
Try to rewrite the code so that it is not necessary to disable the linter
src/App.tsx
Outdated
| useEffect(() => { | ||
| if (errorMessage) { | ||
| setTimeout(() => { | ||
| setErrorMessage(Error.None); | ||
| }, 3000); | ||
| } | ||
| }, [errorMessage]); |
There was a problem hiding this comment.
There was a problem hiding this comment.
Please read the article, there is an example of how to correctly work with timers in useEffect.
src/App.tsx
Outdated
| const promiseArray = ( | ||
| allTodosAreCompleted | ||
| ? completedTodosCount | ||
| : activeTodosCount).map((todo: { id: number; completed: boolean; }) => client.patch(`/todos/${todo.id}`, { completed: !todo.completed })); |
There was a problem hiding this comment.
For better readability, it is better to split the code into small parts
src/App.tsx
Outdated
| const [errorMessage, setErrorMessage] = useState(Error.None); | ||
| const [value, setValue] = useState(''); | ||
| const [isSubmitted, setIsSubmitted] = useState(false); | ||
| const [areSubmiting, setAreSubmiting] = useState(false); |
There was a problem hiding this comment.
| const [areSubmiting, setAreSubmiting] = useState(false); | |
| const [isSubmiting, setIsSubmiting] = useState(false); |
src/App.tsx
Outdated
|
|
||
| <div className="todoapp__content"> | ||
| <header className="todoapp__header"> | ||
| {todos.length !== 0 && ( |
There was a problem hiding this comment.
| {todos.length !== 0 && ( | |
| {!!todos.length && ( |
src/components/TodoItem/TodoItem.tsx
Outdated
| disabled={processingIds.includes(todo.id) | ||
| || togglingId === todo.id | ||
| || areSubmiting} |
There was a problem hiding this comment.
It is better to put it in a separate variable.
src/components/TodoItem/TodoItem.tsx
Outdated
| 'is-active': processingIds.includes(todo.id) | ||
| || togglingId === todo.id | ||
| || areSubmiting, |
There was a problem hiding this comment.
It is better to put it in a separate variable.
| {/* <button | ||
| type="button" | ||
| className="todo__remove" | ||
| data-cy="TodoDelete" | ||
| > | ||
| × | ||
| </button> */} |
|
|
||
| <div | ||
| data-cy="TodoLoader" | ||
| className={className('modal overlay', { |
There was a problem hiding this comment.
| className={className('modal overlay', { | |
| className={className('modal', 'overlay', { |
src/utils/functions.ts
Outdated
| export function getItemsLeftCountMessage(activeTodos: Todo[]) { | ||
| switch (activeTodos.length) { | ||
| case 1: | ||
| return '1 items left'; |
There was a problem hiding this comment.
| return '1 items left'; | |
| return '1 item left'; |
src/App.tsx
Outdated
| useEffect(() => { | ||
| if (errorMessage) { | ||
| setTimeout(() => { | ||
| setErrorMessage(Error.None); | ||
| }, 3000); | ||
| } | ||
| }, [errorMessage]); |
There was a problem hiding this comment.
Please read the article, there is an example of how to correctly work with timers in useEffect.
src/App.tsx
Outdated
| style={{ | ||
| visibility: | ||
| completedTodosCount.length | ||
| ? 'visible' | ||
| : 'hidden', | ||
| }} |
There was a problem hiding this comment.
Using inline styles is a bad practice, use css instead.
src/utils/functions.ts
Outdated
| case Status.All: { | ||
| filteredTodos = todos; | ||
| break; | ||
| } |
There was a problem hiding this comment.
You do the same in the default block.
DEMO LINK