diff --git a/src/App.tsx b/src/App.tsx index 7ffad932c..67a4cd713 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -30,6 +30,8 @@ export const App: React.FC = () => { const [processingTodos, setProcessingTodos] = useState([]); const addInputRef = useRef(null); + const timeoutRef = useRef(null); + const allAreCompleted = useMemo( () => todos.every(todo => todo.completed), [todos], @@ -43,7 +45,23 @@ export const App: React.FC = () => { const handleError = useCallback((error: ErrorType) => { setErrorMsg(error); - setTimeout(() => setErrorMsg(ErrorType.Default), 3000); + + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + + timeoutRef.current = setTimeout(() => { + setErrorMsg(ErrorType.Default); + timeoutRef.current = null; + }, 3000); + }, []); + + useEffect(() => { + return () => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + }; }, []); const onTodoAdd = async (e: React.FormEvent) => { diff --git a/src/api/todos.ts b/src/api/todos.ts index 930d8ec14..a7d5bca33 100644 --- a/src/api/todos.ts +++ b/src/api/todos.ts @@ -3,12 +3,14 @@ import { client } from '../utils/fetchClient'; export const USER_ID = 2176; +const TODOS_PATH = '/todos'; + export const getTodos = () => { return client.get(`/todos?userId=${USER_ID}`); }; export const addTodo = (todoTitle: string) => { - return client.post('/todos', { + return client.post(TODOS_PATH, { title: todoTitle, userId: USER_ID, completed: false, @@ -16,9 +18,9 @@ export const addTodo = (todoTitle: string) => { }; export const deleteTodo = (todoId: number) => { - return client.delete(`/todos/${todoId}`); + return client.delete(`${TODOS_PATH}/${todoId}`); }; export const updateTodo = (todoId: number, updatedFields: Partial) => { - return client.patch(`/todos/${todoId}`, updatedFields); + return client.patch(`${TODOS_PATH}/${todoId}`, updatedFields); }; diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx index 6cb9d8a1c..ffa5795e8 100644 --- a/src/components/TodoFilter/TodoFilter.tsx +++ b/src/components/TodoFilter/TodoFilter.tsx @@ -11,18 +11,18 @@ type Props = { onDelete: () => void; }; +const STATUSES = [ + { key: Status.All, label: 'All', dataCy: 'FilterLinkAll' }, + { key: Status.Active, label: 'Active', dataCy: 'FilterLinkActive' }, + { + key: Status.Completed, + label: 'Completed', + dataCy: 'FilterLinkCompleted', + }, +]; + export const TodoFilter: React.FC = memo( ({ filter, onFilterChange, todos, onDelete }) => { - const statuses = [ - { key: Status.All, label: 'All', dataCy: 'FilterLinkAll' }, - { key: Status.Active, label: 'Active', dataCy: 'FilterLinkActive' }, - { - key: Status.Completed, - label: 'Completed', - dataCy: 'FilterLinkCompleted', - }, - ]; - const handleLinkClick = ( e: React.MouseEvent, status: Status, @@ -44,7 +44,7 @@ export const TodoFilter: React.FC = memo(