added ReactTodoApp with api solution

mate-academy · Sep 29, 2023 · d7b91f1 · d7b91f1
1 parent f9ab0d5
commit d7b91f1
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 63 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable max-len */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import React, {
   useEffect,
   useMemo,
@@ -53,19 +51,19 @@ export const App: React.FC = () => {
       });
   }, []);
 
-  const idTimer = useRef<number>(0);
+  const idTimerRef = useRef<number>(0);
 
   useEffect(() => {
-    if (idTimer.current) {
-      window.clearTimeout(idTimer.current);
+    if (idTimerRef.current) {
+      window.clearTimeout(idTimerRef.current);
     }
 
-    idTimer.current = window.setTimeout(() => {
+    idTimerRef.current = window.setTimeout(() => {
       setErrorMessage('');
     }, 3000);
   }, [setErrorMessage]);
 
-  function handleAddTodos(newTodo: Omit<Todo, 'id'>) {
+  const handleAddTodos = (newTodo: Omit<Todo, 'id'>) => {
     setLoadingId([0]);
     setIsLoading(true);
     setRequest(true);
@@ -87,9 +85,9 @@ export const App: React.FC = () => {
     const temp: Todo = Object.assign(newTodo, { id: 0 });
 
     setTempTodo(temp);
-  }
+  };
 
-  function handleDelete(todoId: number) {
+  const handleDelete = (todoId: number) => {
     setLoadingId([todoId]);
     setIsLoaderActive(true);
     deleteTodos(todoId)
@@ -105,7 +103,7 @@ export const App: React.FC = () => {
         setIsLoading(false);
         setIsLoaderActive(false);
       });
-  }
+  };
 
   const handleClearCompleted = () => {
     const deletePromises = todos
@@ -126,8 +124,6 @@ export const App: React.FC = () => {
   };
 
   const handleDeleteUpdate = (todo: Todo, newTodoTitle: string) => {
-    // setLoadingId([todo.id]);
-    // setIsLoaderActive(true);
     updateTodo({
       id: todo.id,
       title: newTodoTitle,
@@ -196,11 +192,9 @@ export const App: React.FC = () => {
       <div className="todoapp__content">
         <TodoHeader
           activeTodosCount={activeTodosCount}
-          // eslint-disable-next-line react/jsx-no-bind
           onSubmit={handleAddTodos}
-          todo={filteredTodos.length > 0 ? filteredTodos[0] : null}
+          todo={filteredTodos.length ? filteredTodos[0] : null}
           userId={USER_ID}
-          // tempTodo={tempTodo}
           isLoading={isLoading}
           errorMessage={errorMessage}
           setErrorMessage={setErrorMessage}
@@ -212,12 +206,11 @@ export const App: React.FC = () => {
         />
 
         <section className="todoapp__main" data-cy="TodoList">
-          {filteredTodos.length > 0 ? (
+          {filteredTodos.length && (
             filteredTodos.map((todo) => (
               <TodoApp
                 todo={todo}
                 key={todo.id}
-                // eslint-disable-next-line react/jsx-no-bind
                 onDelete={handleDelete}
                 loadingId={loadingId}
                 isLoaderActive={isLoaderActive}
@@ -227,16 +220,14 @@ export const App: React.FC = () => {
                 onTodoToggle={() => handleToggleTodo(todo)}
               />
             ))
-          ) : (
-            <p>No todos to display.</p>
           )}
         </section>
 
         {tempTodo && (
           <TempTodo tempTodo={tempTodo} />
         )}
 
-        {todos.length !== 0 && (
+        {!!todos.length && (
           <TodoFilter
             filter={filter}
             setFilter={setFilter}
@@ -247,8 +238,6 @@ export const App: React.FC = () => {
         )}
       </div>
 
-      {/* Notification is shown in case of any error */}
-      {/* Add the 'hidden' class to hide the message smoothly */}
       <ErrorMessage
         errorMessage={errorMessage}
         setErrorMessage={setErrorMessage}

diff --git a/src/components/TodoApp/TodoApp.tsx b/src/components/TodoApp/TodoApp.tsx
@@ -5,7 +5,6 @@ import { Todo } from '../../types/Todo';
 type Props = {
   todo: Todo;
   onDelete: (id: number) => void;
-  // isModalVisible: boolean;
   loadingId: number[],
   isLoaderActive: boolean,
   onTodoUpdate: (todoTitle: string) => void
@@ -102,9 +101,7 @@ export const TodoApp: React.FC<Props> = ({
               placeholder="Empty todo will be deleted"
               value={todosTitle}
               onChange={handleTodoTitleChange}
-              onKeyUp={(event) => {
-                handleOnKeyup(event);
-              }}
+              onKeyUp={(event) => handleOnKeyup(event)}
             />
           </form>
         )
@@ -130,23 +127,6 @@ export const TodoApp: React.FC<Props> = ({
 
         )}
 
-      {/* <span
-        data-cy="TodoTitle"
-        className="todo__title"
-        onDoubleClick={ }
-      >
-        {title}
-      </span>
-
-      <button
-        type="button"
-        className="todo__remove"
-        data-cy="TodoDelete"
-        onClick={() => onDelete(todo.id)}
-      >
-        ×
-      </button> */}
-
       <div
         data-cy="TodoLoader"
         className={classNames('modal overlay', {
@@ -156,18 +136,6 @@ export const TodoApp: React.FC<Props> = ({
         <div className="modal-background has-background-white-ter" />
         <div className="loader" />
       </div>
-
-      {/* {false && (
-        <form>
-          <input
-            data-cy="TodoTitleField"
-            type="text"
-            className="todo__title-field"
-            placeholder="Empty todo will be deleted"
-            value="Todo is being edited now."
-          />
-        </form>
-      )} */}
     </div>
   );
 };
diff --git a/src/components/TodoFilter/TodoFilter.tsx b/src/components/TodoFilter/TodoFilter.tsx
@@ -22,7 +22,6 @@ export const TodoFilter: React.FC<Props> = ({
         {`${activeTodosCount} items left`}
       </span>
 
-      {/* Active filter should have a 'selected' class */}
       <nav className="filter" data-cy="Filter">
         <a
           href="#/"
@@ -58,7 +57,6 @@ export const TodoFilter: React.FC<Props> = ({
         </a>
       </nav>
 
-      {/* don't show this button if there are no completed todos */}
       <button
         type="button"
         className="todoapp__clear-completed"

diff --git a/src/components/TodoHeader/TodoHeader.tsx b/src/components/TodoHeader/TodoHeader.tsx
@@ -22,7 +22,6 @@ export const TodoHeader: React.FC<Props> = ({
   onSubmit,
   todo,
   userId,
-  // tempTodo,
   errorMessage,
   setErrorMessage,
   request,
@@ -68,7 +67,6 @@ export const TodoHeader: React.FC<Props> = ({
 
   return (
     <header className="todoapp__header">
-      {/* {Boolean(todos.lenght) && ( */}
       <button
         type="button"
         aria-label="text"
@@ -78,11 +76,8 @@ export const TodoHeader: React.FC<Props> = ({
         data-cy="ToggleAllButton"
         onClick={onToggleAll}
       />
-      {/* )} */}
 
-      <form
-        onSubmit={handleSubmit}
-      >
+      <form onSubmit={handleSubmit}>
         <input
           ref={inputRef}
           data-cy="NewTodoField"