diff --git a/src/App.tsx b/src/App.tsx index 0929d8382..c9eab9b85 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,16 +24,23 @@ export const App: React.FC = () => { const [filterType, setFilterType] = useState(FilterType.All); const inputRef = useRef(null); const inputEditRef = useRef(null); + const errorTimeoutRef = useRef(null); const [tempTodo, setTempTodo] = useState(null); const [isAllCompleted, setIsAllCompleted] = useState(false); const [todoChangedTitle, setTodoChangedTitle] = useState(null); const [loadingTodoIds, setLoadingTodoIds] = useState([0]); + const trimmedTitle = title.trim(); + const setError = (errorType: ErrorType) => { - setErrorState(errorType); + if (errorTimeoutRef.current) { + clearTimeout(errorTimeoutRef.current); + } - setTimeout(() => { + setErrorState(errorType); + errorTimeoutRef.current = setTimeout(() => { setErrorState(ErrorType.Default); + errorTimeoutRef.current = null; }, 3000); }; @@ -45,7 +52,7 @@ export const App: React.FC = () => { event.preventDefault(); setIsAllCompleted(false); - if (!title.trim().length) { + if (!trimmedTitle.length) { setError(ErrorType.Input); return; @@ -53,7 +60,7 @@ export const App: React.FC = () => { const newTodo = { userId: USER_ID, - title: title.trim(), + title: trimmedTitle, completed: false, }; diff --git a/src/api/todos.ts b/src/api/todos.ts index 4c9e8b3ee..62f0649ea 100644 --- a/src/api/todos.ts +++ b/src/api/todos.ts @@ -2,19 +2,20 @@ import { Todo, TodoResponse } from '../types/Todo'; import { client } from '../utils/fetchClient'; export const USER_ID = 2179; +const todos = '/todos'; export const getTodos = () => { - return client.get(`/todos?userId=${USER_ID}`); + return client.get(`${todos}?userId=${USER_ID}`); }; export const postTodo = (data: Partial): Promise => { - return client.post('/todos', data); + return client.post(`${todos}`, data); }; export const deleteTodo = (todoID: number | null) => { - return client.delete(`/todos/${todoID}`); + return client.delete(`${todos}/${todoID}`); }; export const patchTodo = (todoID: number, data: Todo): Promise => { - return client.patch(`/todos/${todoID}`, data); + return client.patch(`${todos}/${todoID}`, data); }; diff --git a/src/types/ErrorType.ts b/src/types/ErrorType.ts index 335613954..17d0131b5 100644 --- a/src/types/ErrorType.ts +++ b/src/types/ErrorType.ts @@ -3,7 +3,6 @@ export enum ErrorType { Input = 'Title should not be empty', Add = 'Unable to add a todo', Delete = 'Unable to delete a todo', - // CompletedDelete = 'Unable to delete a completed todo', Update = 'Unable to update a todo', Load = 'Unable to load todos', }