Apply suggestions for code style and naming

mate-academy · Dec 20, 2024 · 7798fe3 · 7798fe3
1 parent 3feb5dc
commit 7798fe3
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 67 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,27 +1,18 @@
+/* eslint-disable */
 import React, { useEffect, useState, useMemo, useRef } from 'react';
 import { Header } from './components/Header';
 import { Footer } from './components/Footer';
 import { ErrorNotification } from './components/ErrorNotification';
 import { Todo } from './types/Todo';
-import {
-  getTodos,
-  addTodo,
-  USER_ID,
-  deleteTodo,
-  updateTodo,
-} from './api/todos';
+import {getTodos, addTodo, USER_ID, deleteTodo, updateTodo,} from './api/todos';
 import { ErrorTypes } from './types/ErrorTypes';
 import { FilterStatus } from './types/FilterStatus';
 import { TodoList } from './components/TodoList';
 
 export const App: React.FC = () => {
   const [todos, setTodos] = useState<Todo[]>([]);
-  const [errorMessage, setErrorMessage] = useState<ErrorTypes>(
-    ErrorTypes.Empty,
-  );
-  const [filterStatus, setFilterStatus] = useState<FilterStatus>(
-    FilterStatus.All,
-  );
+  const [errorMessage, setErrorMessage] = useState<ErrorTypes>(ErrorTypes.Empty);
+  const [filterStatus, setFilterStatus] = useState<FilterStatus>(FilterStatus.All,);
   const [tempTodo, setTempTodo] = useState<Todo | null>(null);
   const [loadingTodoIds, setLoadingTodoIds] = useState<number[]>([]);
   const inputAddRef = useRef<HTMLInputElement>(null);
@@ -52,7 +43,7 @@ export const App: React.FC = () => {
     () => todos.length === todosCompletedNum,
     [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 });
@@ -67,7 +58,7 @@ export const App: React.FC = () => {
     }
   };
 
-  const onDeleteTodo = async (todoId: number) => {
+  const handleDeleteTodo = async (todoId: number) => {
     setLoadingTodoIds(prev => [...prev, todoId]);
     try {
       await deleteTodo(todoId);
@@ -81,15 +72,15 @@ export const App: React.FC = () => {
     }
   };
 
-  const onClearCompleted = async () => {
+  const handleClearCompleted = async () => {
     const completedTodos = todos.filter(todo => todo.completed);
 
     completedTodos.forEach(todo => {
-      onDeleteTodo(todo.id);
+      handleDeleteTodo(todo.id);
     });
   };
 
-  const onUpdateTodo = async (todoToUpdate: Todo) => {
+  const handleUpdateTodo = async (todoToUpdate: Todo) => {
     setLoadingTodoIds(prev => [...prev, todoToUpdate.id]);
     try {
       const updatedTodo = await updateTodo(todoToUpdate);
@@ -107,62 +98,64 @@ export const App: React.FC = () => {
     return;
   };
 
-  const onToggleAll = async () => {
+  const handleToggleAll = async () => {
     if (todosLeftNum > 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 });
       });
     }
   };
 
   useEffect(() => {
-    (async () => {
+    const getAllTodos = async () => {
       try {
         const data = await getTodos();
 
         setTodos(data);
       } catch (error) {
         setErrorMessage(ErrorTypes.Loading);
-      } finally {
       }
-    })();
+    };
+
+    getAllTodos();
   }, []);
 
   return (
     <div className="todoapp">
       <h1 className="todoapp__title">todos</h1>
       <div className="todoapp__content">
         <Header
-          onAddTodo={onAddTodo}
+          onAddTodo={handleAddTodo}
           setErrorMessage={setErrorMessage}
           isInputDisabled={!!tempTodo}
-          onToggleAll={onToggleAll}
+          onToggleAll={handleToggleAll}
           areAllTodosCompleted={areAllTodosCompleted}
           todosLength={todos.length}
           inputRef={inputAddRef}
         />
 
-        {(todos.length > 0 || tempTodo) && (
+        {(!!todos.length || tempTodo) && (
           <>
             <TodoList
               filteredTodos={filteredTodos}
-              onDeleteTodo={onDeleteTodo}
-              onUpdateTodo={onUpdateTodo}
+              onDeleteTodo={handleDeleteTodo}
+              onUpdateTodo={handleUpdateTodo}
               loadingTodoIds={loadingTodoIds}
               tempTodo={tempTodo}
             />
+
             <Footer
               filterStatus={filterStatus}
               setFilterStatus={setFilterStatus}
               todosLeft={todosLeftNum}
               todosCompleted={todosCompletedNum}
-              onClearCompleted={onClearCompleted}
+              onClearCompleted={handleClearCompleted}
             />
           </>
         )}

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

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import { FilterStatus } from '../types/FilterStatus';
-import { Dispatch, SetStateAction } from 'react';
 import cn from 'classnames';
 
 type Props = {
   filterStatus: FilterStatus;
-  setFilterStatus: Dispatch<SetStateAction<FilterStatus>>;
+  setFilterStatus: (status: FilterStatus) => void;
   todosLeft: number;
   todosCompleted: number;
   onClearCompleted: () => Promise<void>;
@@ -30,7 +29,7 @@ export const Footer: React.FC<Props> = props => {
         {Object.values(FilterStatus).map(filter => (
           <a
             key={filter}
-            href={`#/${filter === FilterStatus.All ? '' : filter}`}
+            href={`#/${filter === FilterStatus.All && filter}`}
             className={cn('filter__link', {
               selected: filterStatus === filter,
             })}

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -4,7 +4,7 @@ import cn from 'classnames';
 
 type Props = {
   onAddTodo: (value: string) => Promise<void>;
-  setErrorMessage: React.Dispatch<React.SetStateAction<ErrorTypes>>;
+  setErrorMessage: (error: ErrorTypes) => void;
   isInputDisabled: boolean;
   areAllTodosCompleted: boolean;
   onToggleAll: () => Promise<void>;
@@ -60,7 +60,6 @@ export const Header: React.FC<Props> = props => {
         />
       )}
 
-      {/* Add a todo on form submit */}
       <form onSubmit={onSubmit}>
         <input
           data-cy="NewTodoField"

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
@@ -1,7 +1,8 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
 /* eslint-disable jsx-a11y/control-has-associated-label */
+/* eslint-disable */
 
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import React, { useState } from 'react';
 import { Todo } from '../types/Todo';
 import cn from 'classnames';
 
@@ -11,7 +12,7 @@ type Props = {
   onDeleteTodo: (todoId: number) => Promise<void>;
   onUpdateTodo: (todo: Todo) => Promise<void>;
   isInEditMode?: boolean;
-  setEditedTodoId: Dispatch<SetStateAction<null | number>>;
+  setEditedTodoId: (id: number | null) => void;
 };
 
 export const TodoItem: React.FC<Props> = props => {
@@ -38,12 +39,7 @@ export const TodoItem: React.FC<Props> = props => {
     setEditedTodoId(todo.id);
   };
 
-  const onBlur = async (
-    event: // eslint-disable-next-line
-
-    | React.FocusEvent<HTMLFormElement, Element> // eslint-disable-next-line
-      | React.FocusEvent<HTMLFormElement>,
-  ) => {
+  const onBlur = async (event: React.FocusEvent<HTMLFormElement, Element> | React.FocusEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     const normalizedTitle = todoTitleValue.trim();

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -26,11 +26,7 @@ export const TodoList: React.FC<Props> = props => {
     <section className="todoapp__main" data-cy="TodoList">
       <TransitionGroup>
         {filteredTodos.map(todo => (
-          <CSSTransition
-            key={todo.id}
-            timeout={300}
-            classNames="item"
-          >
+          <CSSTransition key={todo.id} timeout={300} classNames="item">
             <TodoItem
               key={todo.id}
               todo={todo}
@@ -41,23 +37,18 @@ export const TodoList: React.FC<Props> = props => {
               setEditedTodoId={setEditedTodoId}
             />
           </CSSTransition>
-
-      ))}
-      {tempTodo && (
-        <CSSTransition
-          key={0}
-          timeout={300}
-          classNames="temp-item"
-        >
-          <TodoItem
-            todo={tempTodo}
-            onDeleteTodo={onDeleteTodo}
-            onUpdateTodo={onUpdateTodo}
-            setEditedTodoId={setEditedTodoId}
-            isLoading
-          />
-        </CSSTransition>
-      )}
+        ))}
+        {tempTodo && (
+          <CSSTransition key={0} timeout={300} classNames="temp-item">
+            <TodoItem
+              todo={tempTodo}
+              onDeleteTodo={onDeleteTodo}
+              onUpdateTodo={onUpdateTodo}
+              setEditedTodoId={setEditedTodoId}
+              isLoading
+            />
+          </CSSTransition>
+        )}
       </TransitionGroup>
     </section>
   );