fixing code

mate-academy · Nov 15, 2024 · 5fa9eb7 · 5fa9eb7
1 parent 42def51
commit 5fa9eb7
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 44 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, FC } from 'react';
 import { Header } from './components/Header';
 import { TodoList } from './components/TodoList';
 import { Footer } from './components/Footer';
@@ -11,7 +11,7 @@ import { Errors } from './types/Errors';
 import { Filter } from './types/Filters';
 import { todosService } from './api';
 
-export const App: React.FC = () => {
+export const App: FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
   const [filter, setFilter] = useState(Filter.All);
 
@@ -29,6 +29,15 @@ export const App: React.FC = () => {
     return !todo.completed ? accum + 1 : accum;
   }, 0);
 
+  const handleGetTodos = () => {
+    todosService
+      .getTodos()
+      .then(setTodos)
+      .catch(() => {
+        setErrorMessage(Errors.LOADING);
+      });
+  };
+
   const handleDeleteTodo = (id: number) => {
     setLoadingTodoId(currentIds => [...currentIds, id]);
 
@@ -80,12 +89,7 @@ export const App: React.FC = () => {
   };
 
   useEffect(() => {
-    todosService
-      .getTodos()
-      .then(setTodos)
-      .catch(() => {
-        setErrorMessage(Errors.LOADING);
-      });
+    handleGetTodos();
   }, []);
 
   return (
@@ -101,7 +105,7 @@ export const App: React.FC = () => {
           todos={todos}
           setTodos={setTodos}
           setErrorMessage={setErrorMessage}
-          handleUpdateTodo={handleUpdateTodo}
+          onUpdateTodo={handleUpdateTodo}
         />
 
         {todos.length > 0 && (
@@ -110,8 +114,8 @@ export const App: React.FC = () => {
               todos={filteredTodos}
               tempTodo={tempTodo}
               loadingTodoId={loadingTodoId}
-              handleDeleteTodo={handleDeleteTodo}
-              handleUpdateTodo={handleUpdateTodo}
+              onDeleteTodo={handleDeleteTodo}
+              onUpdateTodo={handleUpdateTodo}
               editedTodo={editedTodo}
               setEditedTodo={setEditedTodo}
             />
@@ -121,7 +125,7 @@ export const App: React.FC = () => {
               filter={filter}
               setFilter={setFilter}
               todos={todos}
-              handleDeleteTodo={handleDeleteTodo}
+              onDeleteTodo={handleDeleteTodo}
             />
           </>
         )}

diff --git a/src/components/ErrorNotification/ErrorNotification.tsx b/src/components/ErrorNotification/ErrorNotification.tsx
@@ -1,13 +1,13 @@
 import cn from 'classnames';
-import { Dispatch, SetStateAction, useEffect } from 'react';
+import { Dispatch, SetStateAction, useEffect, FC } from 'react';
 import { Errors } from '../../types/Errors';
 
 type Props = {
   errorMessage: string;
   setErrorMessage: Dispatch<SetStateAction<Errors>>;
 };
 
-export const ErrorNotification: React.FC<Props> = ({
+export const ErrorNotification: FC<Props> = ({
   errorMessage,
   setErrorMessage,
 }) => {

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,28 +1,29 @@
+import { FC } from 'react';
 import { Filter } from '../../types/Filters';
-import cn from 'classnames';
 import { Todo } from '../../types/Todo';
+import cn from 'classnames';
 
 type Props = {
   countActiveTodos: number;
   filter: Filter;
   setFilter: (filter: Filter) => void;
   todos: Todo[];
-  handleDeleteTodo: (id: number) => void;
+  onDeleteTodo: (id: number) => void;
 };
 
-export const Footer: React.FC<Props> = ({
+export const Footer: FC<Props> = ({
   countActiveTodos,
   filter,
   setFilter,
   todos,
-  handleDeleteTodo,
+  onDeleteTodo,
 }) => {
   const filterOptionName = Object.values(Filter);
 
   const completedTodos = todos.filter(todo => todo.completed);
 
   const deleteAllCompletedTodos = () => {
-    completedTodos.map(todo => handleDeleteTodo(todo.id));
+    completedTodos.map(todo => onDeleteTodo(todo.id));
   };
 
   return (
@@ -54,7 +55,6 @@ export const Footer: React.FC<Props> = ({
         })}
       </nav>
 
-      {/* this button should be disabled if there are no completed todos */}
       <button
         type="button"
         className="todoapp__clear-completed"

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -4,6 +4,7 @@ import React, {
   useEffect,
   useRef,
   useState,
+  FC,
 } from 'react';
 import cn from 'classnames';
 import { Todo } from '../../types/Todo';
@@ -20,19 +21,19 @@ type Props = {
 
   setErrorMessage: (Error: Errors) => void;
 
-  handleUpdateTodo: (todoToUpdate: Todo) => void;
+  onUpdateTodo: (todoToUpdate: Todo) => void;
 
   loadingTodoId: number[];
   setLoadingTodoId: React.Dispatch<React.SetStateAction<number[]>>;
 };
 
-export const Header: React.FC<Props> = ({
+export const Header: FC<Props> = ({
   tempTodo,
   setTempTodo,
   setErrorMessage,
   todos,
   setTodos,
-  handleUpdateTodo,
+  onUpdateTodo,
   loadingTodoId,
   setLoadingTodoId,
 }) => {
@@ -101,11 +102,11 @@ export const Header: React.FC<Props> = ({
 
     if (allCompletedTodos) {
       defTodos.forEach(defTodo =>
-        handleUpdateTodo({ ...defTodo, completed: false }),
+        onUpdateTodo({ ...defTodo, completed: false }),
       );
     } else {
       activeTodos.forEach(defTodo =>
-        handleUpdateTodo({ ...defTodo, completed: true }),
+        onUpdateTodo({ ...defTodo, completed: true }),
       );
     }
   }

diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
@@ -1,26 +1,26 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
 
-import React, { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, FC } from 'react';
 import { Todo } from '../../types/Todo';
 import cn from 'classnames';
 
 type Props = {
   todo: Todo;
   loadingTodoId: number[];
 
-  handleDeleteTodo: (id: number) => void;
-  handleUpdateTodo: (todoToUpdate: Todo) => void;
+  onDeleteTodo: (id: number) => void;
+  onUpdateTodo: (todoToUpdate: Todo) => void;
 
   editedTodo: Todo | null;
   setEditedTodo: React.Dispatch<React.SetStateAction<Todo | null>>;
 };
 
-export const TodoItem: React.FC<Props> = ({
+export const TodoItem: FC<Props> = ({
   todo,
   loadingTodoId,
-  handleDeleteTodo,
-  handleUpdateTodo,
+  onDeleteTodo,
+  onUpdateTodo,
   editedTodo,
   setEditedTodo,
 }) => {
@@ -36,7 +36,7 @@ export const TodoItem: React.FC<Props> = ({
     const preparedTitle = newTitle.trim();
 
     if (!preparedTitle) {
-      handleDeleteTodo(todo.id);
+      onDeleteTodo(todo.id);
 
       return;
     }
@@ -47,7 +47,7 @@ export const TodoItem: React.FC<Props> = ({
       return;
     }
 
-    handleUpdateTodo({ ...todo, title: preparedTitle });
+    onUpdateTodo({ ...todo, title: preparedTitle });
   };
 
   const handleTitleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -82,7 +82,7 @@ export const TodoItem: React.FC<Props> = ({
           checked={todo.completed}
           disabled={!todo.id}
           onChange={event =>
-            handleUpdateTodo({ ...todo, completed: event.target.checked })
+            onUpdateTodo({ ...todo, completed: event.target.checked })
           }
         />
       </label>
@@ -114,7 +114,7 @@ export const TodoItem: React.FC<Props> = ({
             type="button"
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={() => handleDeleteTodo(todo.id)}
+            onClick={() => onDeleteTodo(todo.id)}
           >
             ×
           </button>

diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
@@ -1,3 +1,4 @@
+import { FC } from 'react';
 import { Todo } from '../../types/Todo';
 import { TodoItem } from '../TodoItem';
 
@@ -6,19 +7,19 @@ type Props = {
   tempTodo: Todo | null;
   loadingTodoId: number[];
 
-  handleDeleteTodo: (id: number) => void;
-  handleUpdateTodo: (todoToUpdate: Todo) => void;
+  onDeleteTodo: (id: number) => void;
+  onUpdateTodo: (todoToUpdate: Todo) => void;
 
   editedTodo: Todo | null;
   setEditedTodo: React.Dispatch<React.SetStateAction<Todo | null>>;
 };
 
-export const TodoList: React.FC<Props> = ({
+export const TodoList: FC<Props> = ({
   todos,
   tempTodo,
   loadingTodoId,
-  handleDeleteTodo,
-  handleUpdateTodo,
+  onDeleteTodo,
+  onUpdateTodo,
   editedTodo,
   setEditedTodo,
 }) => {
@@ -30,8 +31,8 @@ export const TodoList: React.FC<Props> = ({
             key={todo.id}
             todo={todo}
             loadingTodoId={loadingTodoId}
-            handleDeleteTodo={handleDeleteTodo}
-            handleUpdateTodo={handleUpdateTodo}
+            onDeleteTodo={onDeleteTodo}
+            onUpdateTodo={onUpdateTodo}
             editedTodo={editedTodo}
             setEditedTodo={setEditedTodo}
           />
@@ -42,8 +43,8 @@ export const TodoList: React.FC<Props> = ({
         <TodoItem
           todo={tempTodo}
           loadingTodoId={loadingTodoId}
-          handleDeleteTodo={handleDeleteTodo}
-          handleUpdateTodo={handleUpdateTodo}
+          onDeleteTodo={onDeleteTodo}
+          onUpdateTodo={onUpdateTodo}
           editedTodo={editedTodo}
           setEditedTodo={setEditedTodo}
         />