Refactoring

src/App.tsx

@@ -24,16 +24,23 @@ export const App: React.FC = () => {
   const [filterType, setFilterType] = useState<FilterType>(FilterType.All);
   const inputRef = useRef<HTMLInputElement>(null);
   const inputEditRef = useRef<HTMLInputElement>(null);
+  const errorTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
   const [isAllCompleted, setIsAllCompleted] = useState(false);
   const [todoChangedTitle, setTodoChangedTitle] = useState<Todo | null>(null);
   const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([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,15 +52,15 @@ export const App: React.FC = () => {
     event.preventDefault();
     setIsAllCompleted(false);
 
-    if (!title.trim().length) {
+    if (!trimmedTitle.length) {
       setError(ErrorType.Input);
 
       return;
     }
 
     const newTodo = {
       userId: USER_ID,
-      title: title.trim(),
+      title: trimmedTitle,
       completed: false,
     };
 

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<Todo[]>(`/todos?userId=${USER_ID}`);
+  return client.get<Todo[]>(`${todos}?userId=${USER_ID}`);
 };
 
 export const postTodo = (data: Partial<Todo>): Promise<TodoResponse> => {
-  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<Todo> => {
-  return client.patch(`/todos/${todoID}`, data);
+  return client.patch(`${todos}/${todoID}`, data);
 };

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',
 }