issues

mate-academy · Dec 29, 2024 · 5711b44 · 5711b44
1 parent 07c4d45
commit 5711b44
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -30,6 +30,8 @@ export const App: React.FC = () => {
   const [processingTodos, setProcessingTodos] = useState<number[]>([]);
 
   const addInputRef = useRef<HTMLInputElement>(null);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(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<HTMLFormElement>) => {

diff --git a/src/api/todos.ts b/src/api/todos.ts
@@ -3,22 +3,24 @@ import { client } from '../utils/fetchClient';
 
 export const USER_ID = 2176;
 
+const TODOS_PATH = '/todos';
+
 export const getTodos = () => {
   return client.get<Todo[]>(`/todos?userId=${USER_ID}`);
 };
 
 export const addTodo = (todoTitle: string) => {
-  return client.post<Todo>('/todos', {
+  return client.post<Todo>(TODOS_PATH, {
     title: todoTitle,
     userId: USER_ID,
     completed: false,
   });
 };
 
 export const deleteTodo = (todoId: number) => {
-  return client.delete(`/todos/${todoId}`);
+  return client.delete(`${TODOS_PATH}/${todoId}`);
 };
 
 export const updateTodo = (todoId: number, updatedFields: Partial<Todo>) => {
-  return client.patch<Todo>(`/todos/${todoId}`, updatedFields);
+  return client.patch<Todo>(`${TODOS_PATH}/${todoId}`, updatedFields);
 };
diff --git 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<Props> = 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<HTMLAnchorElement, MouseEvent>,
       status: Status,
@@ -44,7 +44,7 @@ export const TodoFilter: React.FC<Props> = memo(
         </span>
 
         <nav className="filter" data-cy="Filter">
-          {statuses.map(({ key, label, dataCy }) => (
+          {STATUSES.map(({ key, label, dataCy }) => (
             <a
               key={key}
               href={`#/${key}`}