adjusted function names to align with naming conventions

mate-academy · Dec 20, 2024 · 071c945 · 071c945
1 parent 489fe9c
commit 071c945
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 41 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -66,7 +66,7 @@ export const App: React.FC = () => {
     [todos],
   );
 
-  const onAddTodo = async (todoTitle: string) => {
+  const handleAddTodo = async (todoTitle: string) => {
     setTempTodo({ id: 0, title: todoTitle, completed: false, userId: USER_ID });
     try {
       const newTodo = await addTodo({ title: todoTitle, completed: false });
@@ -81,7 +81,7 @@ export const App: React.FC = () => {
     }
   };
 
-  const onRemoveTodo = async (todoId: number) => {
+  const handleRemoveTodo = async (todoId: number) => {
     setLoadingTodoIds(prev => [...prev, todoId]);
     try {
       await deleteTodo(todoId);
@@ -95,7 +95,7 @@ export const App: React.FC = () => {
     }
   };
 
-  const onUpdateTodo = async (todoToUpdate: Todo) => {
+  const handleUpdateTodo = async (todoToUpdate: Todo) => {
     setLoadingTodoIds(prev => [...prev, todoToUpdate.id]);
     try {
       const updatedTodo = await updateTodo(todoToUpdate);
@@ -111,24 +111,24 @@ export const App: React.FC = () => {
     }
   };
 
-  const onClearCompleted = async () => {
+  const handleClearCompleted = async () => {
     const completedTodos = todos.filter(todo => todo.completed);
 
     completedTodos.forEach(todo => {
-      onRemoveTodo(todo.id);
+      handleRemoveTodo(todo.id);
     });
   };
 
-  const onToggleAll = async () => {
+  const handleToggleAll = async () => {
     if (todosActiveNum > 0) {
       const activeTodos = todos.filter(todo => !todo.completed);
 
       activeTodos.forEach(todo => {
-        onUpdateTodo({ ...todo, completed: true });
+        handleUpdateTodo({ ...todo, completed: true });
       });
     } else {
       todos.forEach(todo => {
-        onUpdateTodo({ ...todo, completed: false });
+        handleUpdateTodo({ ...todo, completed: false });
       });
     }
   };
@@ -139,21 +139,21 @@ export const App: React.FC = () => {
 
       <div className="todoapp__content">
         <TodoHeader
-          onAddTodo={onAddTodo}
+          handleAddTodo={handleAddTodo}
           setErrorMessage={setErrorMessage}
           isInputDisabled={!!tempTodo}
           inputRef={inputAddRef}
-          onToggleAll={onToggleAll}
+          handleToggleAll={handleToggleAll}
           areAllTodosCompleated={areAllTodosCompleated}
           todosLength={todos.length}
         />
 
-        {(todos.length > 0 || tempTodo) && (
+        {(!!todos.length || tempTodo) && (
           <>
             <TodoList
               filteredTodos={filteredTodos}
-              onRemoveTodo={onRemoveTodo}
-              onUpdateTodo={onUpdateTodo}
+              handleRemoveTodo={handleRemoveTodo}
+              handleUpdateTodo={handleUpdateTodo}
               loadingTodoIds={loadingTodoIds}
               tempTodo={tempTodo}
             />
@@ -162,7 +162,7 @@ export const App: React.FC = () => {
               setFilterStatus={setFilterStatus}
               todosLeft={todosActiveNum}
               todosCompleted={todosCompletedNum}
-              onClearCompleted={onClearCompleted}
+              handleClearCompleted={handleClearCompleted}
             />
           </>
         )}

diff --git a/src/components/TodoFooter/TodoFooter.tsx b/src/components/TodoFooter/TodoFooter.tsx
@@ -8,15 +8,15 @@ type Props = {
   setFilterStatus: Dispatch<SetStateAction<FilterStatus>>;
   todosLeft: number;
   todosCompleted: number;
-  onClearCompleted: () => Promise<void>;
+  handleClearCompleted: () => Promise<void>;
 };
 
 export const TodoFooter: React.FC<Props> = ({
   filterStatus,
   setFilterStatus,
   todosLeft,
   todosCompleted,
-  onClearCompleted,
+  handleClearCompleted,
 }) => {
   return (
     <footer className="todoapp__footer" data-cy="Footer">
@@ -44,7 +44,7 @@ export const TodoFooter: React.FC<Props> = ({
         type="button"
         className="todoapp__clear-completed"
         data-cy="ClearCompletedButton"
-        onClick={onClearCompleted}
+        onClick={handleClearCompleted}
         disabled={todosCompleted === 0}
       >
         Clear completed

diff --git a/src/components/TodoHeader/TodoHeader.tsx b/src/components/TodoHeader/TodoHeader.tsx
@@ -3,27 +3,27 @@ import { ErrorType } from '../../types/ErrorType';
 import cn from 'classnames';
 
 type Props = {
-  onAddTodo: (value: string) => Promise<void>;
+  handleAddTodo: (value: string) => Promise<void>;
   setErrorMessage: Dispatch<SetStateAction<ErrorType>>;
   isInputDisabled: boolean;
   inputRef: React.RefObject<HTMLInputElement> | null;
-  onToggleAll: () => Promise<void>;
+  handleToggleAll: () => Promise<void>;
   areAllTodosCompleated: boolean;
   todosLength: number;
 };
 
 export const TodoHeader: React.FC<Props> = ({
-  onAddTodo,
+  handleAddTodo,
   setErrorMessage,
   isInputDisabled,
   inputRef,
-  onToggleAll,
+  handleToggleAll,
   areAllTodosCompleated,
   todosLength,
 }) => {
   const [inputValue, setInputValue] = useState('');
 
-  const onSubmit = async (event: React.FormEvent<HTMLElement>) => {
+  const handleSubmit = async (event: React.FormEvent<HTMLElement>) => {
     event.preventDefault();
 
     const trimmedValue = inputValue.trim();
@@ -35,7 +35,7 @@ export const TodoHeader: React.FC<Props> = ({
     }
 
     try {
-      await onAddTodo(trimmedValue);
+      await handleAddTodo(trimmedValue);
       setInputValue('');
     } catch {}
   };
@@ -59,10 +59,10 @@ export const TodoHeader: React.FC<Props> = ({
             active: areAllTodosCompleated,
           })}
           data-cy="ToggleAllButton"
-          onClick={onToggleAll}
+          onClick={handleToggleAll}
         />
       )}
-      <form onSubmit={onSubmit}>
+      <form onSubmit={handleSubmit}>
         <input
           data-cy="NewTodoField"
           type="text"

diff --git a/src/components/TodoItem/TodoItem.tsx b/src/components/TodoItem/TodoItem.tsx
@@ -7,16 +7,16 @@ type Props = {
   todo: Todo;
   isLoading?: boolean;
   isInEditMode?: boolean;
-  onRemoveTodo: (todoId: number) => Promise<void>;
-  onUpdateTodo: (todo: Todo) => Promise<void>;
+  handleRemoveTodo: (todoId: number) => Promise<void>;
+  handleUpdateTodo: (todo: Todo) => Promise<void>;
   setEditedTodoId: Dispatch<SetStateAction<null | number>>;
 };
 
 export const TodoItem: React.FC<Props> = ({
   todo,
   isLoading,
-  onRemoveTodo,
-  onUpdateTodo,
+  handleRemoveTodo,
+  handleUpdateTodo,
   isInEditMode,
   setEditedTodoId,
 }) => {
@@ -27,7 +27,7 @@ export const TodoItem: React.FC<Props> = ({
   const onCheckTodo = () => {
     const todoToUpdate = { ...todo, completed: !todo.completed };
 
-    onUpdateTodo(todoToUpdate);
+    handleUpdateTodo(todoToUpdate);
   };
 
   const onDoubleClick = () => {
@@ -49,7 +49,7 @@ export const TodoItem: React.FC<Props> = ({
 
     if (normalizedTitle === '') {
       try {
-        await onRemoveTodo(todo.id);
+        await handleRemoveTodo(todo.id);
         setEditedTodoId(null);
       } catch (err) {}
 
@@ -59,7 +59,7 @@ export const TodoItem: React.FC<Props> = ({
     }
 
     try {
-      await onUpdateTodo({ ...todo, title: normalizedTitle });
+      await handleUpdateTodo({ ...todo, title: normalizedTitle });
       setEditedTodoId(null);
     } catch (err) {
       inputRef?.current?.focus();
@@ -112,7 +112,7 @@ export const TodoItem: React.FC<Props> = ({
             type="button"
             className="todo__remove"
             data-cy="TodoDelete"
-            onClick={() => onRemoveTodo(todo.id)}
+            onClick={() => handleRemoveTodo(todo.id)}
           >
             ×
           </button>

diff --git a/src/components/TodoList/TodoList.tsx b/src/components/TodoList/TodoList.tsx
@@ -5,16 +5,16 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group';
 
 type Props = {
   filteredTodos: Todo[];
-  onRemoveTodo: (todoId: number) => Promise<void>;
-  onUpdateTodo: (todo: Todo) => Promise<void>;
+  handleRemoveTodo: (todoId: number) => Promise<void>;
+  handleUpdateTodo: (todo: Todo) => Promise<void>;
   loadingTodoIds: number[];
   tempTodo: Todo | null;
 };
 
 export const TodoList: React.FC<Props> = ({
   filteredTodos,
-  onRemoveTodo,
-  onUpdateTodo,
+  handleRemoveTodo,
+  handleUpdateTodo,
   loadingTodoIds,
   tempTodo,
 }) => {
@@ -28,8 +28,8 @@ export const TodoList: React.FC<Props> = ({
             <TodoItem
               key={todo.id}
               todo={todo}
-              onRemoveTodo={onRemoveTodo}
-              onUpdateTodo={onUpdateTodo}
+              handleRemoveTodo={handleRemoveTodo}
+              handleUpdateTodo={handleUpdateTodo}
               isLoading={loadingTodoIds.includes(todo.id)}
               isInEditMode={editedTodoId === todo.id}
               setEditedTodoId={setEditedTodoId}
@@ -41,8 +41,8 @@ export const TodoList: React.FC<Props> = ({
             <TodoItem
               todo={tempTodo}
               isLoading
-              onRemoveTodo={onRemoveTodo}
-              onUpdateTodo={onUpdateTodo}
+              handleRemoveTodo={handleRemoveTodo}
+              handleUpdateTodo={handleUpdateTodo}
               setEditedTodoId={setEditedTodoId}
             />
           </CSSTransition>