solution 3

mate-academy · Oct 21, 2023 · 614bb50 · 614bb50
1 parent 606d711
commit 614bb50
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 78 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/control-has-associated-label */
 import React, {
+  useCallback,
   useEffect,
   useMemo,
-  useRef,
   useState,
 } from 'react';
 import { UserWarning } from './UserWarning';
@@ -30,8 +30,6 @@ export const App: React.FC = () => {
   const [editQuery, setEditQuery] = useState('');
   const [editQueryPrev, setEditQueryPrev] = useState('');
 
-  const inputRef = useRef<HTMLBodyElement>(null);
-
   const handleErrorSet = (errMessage: string) => {
     setErrorWarning(errMessage);
     setTimeout(() => {
@@ -43,7 +41,7 @@ export const App: React.FC = () => {
     setErrorWarning('');
   };
 
-  const loadTodos = async () => {
+  const loadTodos = useCallback(async () => {
     try {
       const loadedTodos = await getTodos(USER_ID);
 
@@ -52,15 +50,11 @@ export const App: React.FC = () => {
     } catch {
       handleErrorSet(ErrMessage.loadTodo);
     }
-  };
-
-  useEffect(() => {
-    loadTodos();
   }, []);
 
   useEffect(() => {
-    inputRef.current?.focus();
-  }, [inputRef, pageIsLoaded, todos]);
+    loadTodos();
+  }, [loadTodos]);
 
   const visibleTodos = (filterBy: FilterBy) => {
     if (todos) {
@@ -90,21 +84,22 @@ export const App: React.FC = () => {
       return;
     }
 
-    const newTodo = {
-      id: todos.length + 10 || 10,
-      userId: USER_ID,
-      title: query.trim(),
-      completed: false,
-    };
-
-    setTempTodo({ ...newTodo, id: 0 });
-
     try {
+      const newTodo = {
+        userId: USER_ID,
+        title: query.trim(),
+        completed: false,
+      };
+
+      setTempTodo({ ...newTodo, id: 0 });
       setPageIsLoaded(false);
-      await addTodo('/todos', newTodo);
-      setTodos((state) => {
-        return [...state, newTodo];
+
+      const newTodos = await addTodo('/todos', newTodo);
+
+      setTodos(state => {
+        return [...state, newTodos as Todo];
       });
+
       setTempTodo(null);
       setPageIsLoaded(true);
       setQuery('');
@@ -158,27 +153,35 @@ export const App: React.FC = () => {
             // eslint-disable-next-line no-param-reassign
             todo.completed = false;
             setIsUpdatingId([]);
-          } else if (!todo.completed) {
+
+            return [...stateMain];
+          }
+
+          if (!todo.completed) {
             setIsUpdatingId(state => (
               [...state, todo.id]
             ));
             await updateTodo(todo.id, { completed: true });
             // eslint-disable-next-line no-param-reassign
             todo.completed = true;
             setIsUpdatingId([]);
+
+            return [...stateMain];
           }
 
           return [...stateMain];
         } catch {
           handleErrorSet(ErrMessage.updateTodo);
           setIsUpdatingId([]);
-
-          return [...stateMain];
         }
+
+        return [...stateMain];
       });
 
       return [...stateMain];
     });
+
+    setTodos(state => [...state]);
   };
 
   const handleDelete = async (id?: number) => {
@@ -288,10 +291,12 @@ export const App: React.FC = () => {
 
   const completedTodos = useMemo(() => {
     return todos.filter(todo => todo.completed).length;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [todos, isUpdatingId]);
 
   const uncompletedTodos = useMemo(() => {
     return todos.filter(todo => !todo.completed).length;
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [todos, isUpdatingId]);
 
   if (!USER_ID) {
@@ -311,7 +316,6 @@ export const App: React.FC = () => {
           uncompletedTodos={uncompletedTodos}
           toggleAll={toggleAll}
           pageIsLoaded={pageIsLoaded}
-          inputRef={inputRef}
         />
         {todos && (
           <TodoList

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import cn from 'classnames';
 
 type Props = {
@@ -9,7 +9,6 @@ type Props = {
   uncompletedTodos: number,
   toggleAll: () => void,
   pageIsLoaded: boolean,
-  inputRef: any,
 };
 
 export const Header: React.FC<Props> = React.memo(({
@@ -20,8 +19,13 @@ export const Header: React.FC<Props> = React.memo(({
   uncompletedTodos,
   toggleAll,
   pageIsLoaded,
-  inputRef,
 }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, [inputRef, pageIsLoaded]);
+
   return (
     <header className="todoapp__header">
       {/* this buttons is active only if there are some active todos */}

diff --git a/src/components/TodoItem.tsx b/src/components/TodoItem.tsx
diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import cn from 'classnames';
 import { Todo } from '../types/Todo';
-import { TodoItem } from './TodoItem';
 
 type Props = {
   todos: Todo[],
@@ -124,7 +123,31 @@ export const TodoList: React.FC<Props> = React.memo(({
         );
       })}
       {tempTodo && (
-        <TodoItem tempTodos={tempTodo} />
+        <div id={`${tempTodo.id}`} data-cy="Todo" className="todo">
+          <label className="todo__status-label">
+            <input
+              data-cy="TodoStatus"
+              type="checkbox"
+              className="todo__status"
+              checked
+              readOnly
+            />
+          </label>
+
+          <span data-cy="TodoTitle" className="todo__title">
+            {tempTodo.title}
+          </span>
+
+          <button type="button" className="todo__remove" data-cy="TodoDelete">
+            ×
+          </button>
+
+          {/* 'is-active' class puts this modal on top of the todo */}
+          <div data-cy="TodoLoader" className="modal overlay is-active">
+            <div className="modal-background has-background-white-ter" />
+            <div className="loader" />
+          </div>
+        </div>
       )}
     </section>
   );