Solution #872
Solution #872
Conversation
src/App.tsx
Outdated
| }); | ||
| }; | ||
|
|
||
| const removeComplatedTodos = (todosId: number[] | null) => { |
There was a problem hiding this comment.
| const removeComplatedTodos = (todosId: number[] | null) => { | |
| const removeCompletedTodos = (todosId: number[] | null) => { |
src/App.tsx
Outdated
| setDeletedTodo(null); | ||
| }); | ||
| }); | ||
| } |
There was a problem hiding this comment.
set loading to false after this if block by default
There was a problem hiding this comment.
by the way, why you need this if? you can trigger this function only if todosId array is not empty
src/App.tsx
Outdated
| const updateTodosAllStatus = (updatedTodos: Todo[]) => { | ||
| setErrorMessage(''); | ||
| setIsLoading(true); | ||
| const changedTodoId: number[] = []; |
There was a problem hiding this comment.
pay attention to naming please
| const changedTodoId: number[] = []; | |
| const changedTodoIds: number[] = []; |
src/App.tsx
Outdated
|
|
||
| setChangedTodo(changedTodoId); | ||
|
|
||
| const updatedTodoSirvice = updatedTodos.map(async (todo) => { |
src/App.tsx
Outdated
| const updateTodosAllStatus = (updatedTodos: Todo[]) => { | ||
| setErrorMessage(''); | ||
| setIsLoading(true); | ||
| const changedTodoId: number[] = []; | ||
|
|
||
| updatedTodos.forEach(updatedTodo => { | ||
| const similarTodo = todos.find(todo => todo.id === updatedTodo.id); | ||
|
|
||
| if (similarTodo && similarTodo.completed !== updatedTodo.completed) { | ||
| changedTodoId.push(similarTodo.id); | ||
| } | ||
| }); | ||
|
|
||
| setChangedTodo(changedTodoId); | ||
|
|
||
| const updatedTodoSirvice = updatedTodos.map(async (todo) => { | ||
| try { | ||
| const todoChange = await todoService.updateTodo(todo); | ||
|
|
||
| return todoChange; | ||
| } catch (error) { | ||
| setErrorMessage(Message.NoUpdateTodo); | ||
|
|
||
| return todo; | ||
| } | ||
| }); | ||
|
|
||
| Promise.all(updatedTodoSirvice) | ||
| .then((gettedTodos) => { | ||
| const gettedTodosId = gettedTodos.map(t => t.id); | ||
|
|
||
| setTodos(curT => curT.map( | ||
| item => ( | ||
| gettedTodosId.includes(item.id) | ||
| ? { ...item, completed: gettedTodos[0].completed } | ||
| : item | ||
| ), | ||
| )); | ||
| }) | ||
| .finally(() => { | ||
| setIsLoading(false); | ||
| setChangedTodo(null); | ||
| }); | ||
| }; |
There was a problem hiding this comment.
this function should be refactored and simplified because it is hard to read. pay attention to naming
src/App.tsx
Outdated
| }); | ||
| }; | ||
|
|
||
| const removeTodoTitle = (todoId: number) => { |
There was a problem hiding this comment.
please memoize all functions what you passing to the child components
There was a problem hiding this comment.
pay attention to this comment, use useMemo or useCallback for this purpose, it will optimize your code
src/App.tsx
Outdated
| const visivleTodo = filterTodos(todos, todosStatus); | ||
| const activeTodos = todos.filter(todo => !todo.completed); |
src/App.tsx
Outdated
| }); | ||
| }; | ||
|
|
||
| const removeTodoTitle = (todoId: number) => { |
There was a problem hiding this comment.
pay attention to this comment, use useMemo or useCallback for this purpose, it will optimize your code
DEMO LINK