diff --git a/src/App.tsx b/src/App.tsx index 3ce3622d8..4c9d27201 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,7 +18,7 @@ export const App: React.FC = () => { const [todos, setTodos] = useState([]); const [activeStatus, setActiveStatus] = useState(Status.All); const [tempTodo, setTempTodo] = useState(null); - const [loadingTodos, setLoadingTodos] = useState([]); + const [loadingTodoIds, setLoadingTodoIds] = useState([]); const [errorMessage, setErrorMessage] = useState( ErrorMessage.Default, ); @@ -62,18 +62,15 @@ export const App: React.FC = () => { }; const onUpdateTodo = (todoToUpdate: Todo) => { - setLoadingTodos(prevTodos => [...prevTodos, todoToUpdate.id]); + setLoadingTodoIds(prevTodos => [...prevTodos, todoToUpdate.id]); return clientTodo .updateTodo(todoToUpdate) .then(updatedTodo => { setTodos(currentTodos => { - const newTodos = [...currentTodos]; - const index = newTodos.findIndex(todo => todo.id === updatedTodo.id); - - newTodos.splice(index, 1, updatedTodo); - - return newTodos; + return currentTodos.map(todo => + todo.id === updatedTodo.id ? updatedTodo : todo, + ); }); }) .catch(err => { @@ -81,14 +78,14 @@ export const App: React.FC = () => { throw err; }) .finally(() => { - setLoadingTodos(prevTodos => + setLoadingTodoIds(prevTodos => prevTodos.filter(id => todoToUpdate.id !== id), ); }); }; const onDeleteTodo = (todoId: number) => { - setLoadingTodos(prevTodos => [...prevTodos, todoId]); + setLoadingTodoIds(prevTodos => [...prevTodos, todoId]); clientTodo .deleteTodo(todoId) @@ -97,12 +94,11 @@ export const App: React.FC = () => { currentTodos.filter(todo => todo.id !== todoId), ), ) - .catch(error => { + .catch(() => { setErrorMessage(ErrorMessage.UnableToDelete); - throw error; }) .finally(() => - setLoadingTodos(prevTodos => prevTodos.filter(id => todoId !== id)), + setLoadingTodoIds(prevTodos => prevTodos.filter(id => todoId !== id)), ); }; @@ -126,9 +122,8 @@ export const App: React.FC = () => { clientTodo .getTodos() .then(data => setTodos(data)) - .catch(error => { + .catch(() => { setErrorMessage(ErrorMessage.UnableToLoad); - throw error; }); }, []); @@ -154,7 +149,7 @@ export const App: React.FC = () => { diff --git a/src/components/ErrorNotification.tsx b/src/components/ErrorNotification.tsx index 62189bd54..eecb8831a 100644 --- a/src/components/ErrorNotification.tsx +++ b/src/components/ErrorNotification.tsx @@ -20,7 +20,7 @@ export const ErrorNotification: React.FC = props => { }, 3000); return () => clearTimeout(timer); - }, [error]); + }, [error, setErrorMessage]); return (
= props => { return; } - return onAddTodo(title.trim()) - .then(() => setTitle('')) - .catch(() => {}); + onAddTodo(title.trim()).then(() => setTitle('')); }; return ( diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx index de4e11ef8..cccd1e7ae 100644 --- a/src/components/TodoItem.tsx +++ b/src/components/TodoItem.tsx @@ -21,28 +21,26 @@ export const TodoItem: React.FC = props => { const updateRef = useRef(null); const handleUpdate = () => { - const normaliseTitle = updateTitle.trim(); - if (todo.title === updateTitle) { setIsUpdate(false); return; } - if (!normaliseTitle) { + if (!updateTitle) { onDeleteTodo(todo.id); + + return; } const updatedTodo: Todo = { id: todo.id, completed: todo.completed, - title: normaliseTitle, + title: updateTitle.trim(), userId: USER_ID, }; - onUpdateTodo(updatedTodo) - .then(() => setIsUpdate(false)) - .catch(() => {}); + onUpdateTodo(updatedTodo).then(() => setIsUpdate(false)); }; const handleEscape = (event: React.KeyboardEvent) => { diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx index 99d784c86..616838552 100644 --- a/src/components/TodoList.tsx +++ b/src/components/TodoList.tsx @@ -5,14 +5,19 @@ import { TodoItem } from './TodoItem'; type Props = { tempTodo: Todo | null; filteredTodos: Todo[]; - loadingTodos: number[]; + loadingTodoIds: number[]; onDeleteTodo: (todoId: number) => void; onUpdateTodo: (todoToUpdate: Todo) => Promise; }; export const TodoList: React.FC = props => { - const { filteredTodos, tempTodo, loadingTodos, onDeleteTodo, onUpdateTodo } = - props; + const { + filteredTodos, + tempTodo, + loadingTodoIds, + onDeleteTodo, + onUpdateTodo, + } = props; return (
@@ -22,7 +27,7 @@ export const TodoList: React.FC = props => { @@ -33,7 +38,7 @@ export const TodoList: React.FC = props => { {}} onUpdateTodo={onUpdateTodo} />