added loaders and fixed some bugs

mate-academy · Sep 14, 2023 · ca508d3 · ca508d3
1 parent 3cfc7aa
commit ca508d3
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 30 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable jsx-a11y/control-has-associated-label */
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { UserWarning } from './UserWarning';
 import { TodoHeader } from './components/TodoHeader';
 import { TodoList } from './components/TodoList';
@@ -28,24 +28,26 @@ export const App: React.FC = () => {
 
   useEffect(() => {
     getTodos(USER_ID)
-      .then(setTodos);
+      .then(setTodos)
+      .catch(() => setError(Error.load));
   }, []);
 
-  const toggleTodo = (todo: Todo) => {
-    const changedStatus = {
-      completed: !todo.completed,
-    };
+  const toggleTodo = useCallback((todo: Todo) => {
+    const changedStatus = { completed: !todo.completed };
+
+    setDeletingIds((ids) => [...ids, todo.id]);
 
     updateTodos(todo.id, changedStatus)
       .then(() => {
         return getTodos(USER_ID)
-          .then(setTodos);
+          .then(setTodos)
+          .catch(() => setError(Error.load));
       })
       .catch(() => setError(Error.update))
       .finally(() => {
         setDeletingIds((ids) => ids.filter(id => id !== todo.id));
       });
-  };
+  }, [todos]);
 
   const toggleAll = () => {
     if (areAllCompleted) {
@@ -59,19 +61,34 @@ export const App: React.FC = () => {
       .forEach(todo => toggleTodo(todo));
   };
 
-  const renameTodo = (todoId: number, newTitle: string) => {
+  const renameTodo = useCallback((todoId: number, newTitle: string) => {
+    if (newTitle.trim().length === 0) {
+      setError(Error.update);
+
+      return;
+    }
+
     const newData = { title: newTitle };
 
+    setDeletingIds((ids) => [...ids, todoId]);
+
     updateTodos(todoId, newData)
       .then(() => {
         return getTodos(USER_ID)
-          .then(setTodos);
+          .then(setTodos)
+          .catch(() => setError(Error.load));
       })
-      .catch(() => setError(Error.update));
-  };
+      .catch(() => {
+        setError(Error.update);
+      })
+      .finally(() => {
+        setDeletingIds((ids) => ids.filter(id => id !== todoId));
+      });
+  }, [todos]);
 
-  const deleteTodo = (todoId: number) => {
+  const deleteTodo = useCallback((todoId: number) => {
     setDeletingIds((ids) => [...ids, todoId]);
+
     deleteTodos(todoId)
       .then(() => setTodos(
         currentTodos => currentTodos.filter(todo => todo.id !== todoId),
@@ -80,7 +97,7 @@ export const App: React.FC = () => {
       .finally(() => {
         setDeletingIds((ids) => ids.filter(id => id !== todoId));
       });
-  };
+  }, [todos]);
 
   const visibleTodos = useMemo(() => {
     if (todos) {

diff --git a/src/components/Errors.tsx b/src/components/Errors.tsx
@@ -27,21 +27,15 @@ export const Errors: React.FC<Props> = ({ error, onClearErrors }) => {
         onClick={() => onClearErrors(Error.without)}
       />
 
-      {error === Error.add && (
-        <> Unable to add a todo </>
-      )}
+      {error === Error.load && 'Unable to load todos'}
 
-      {error === Error.delete && (
-        <> Unable to delete a todo </>
-      )}
+      {error === Error.add && 'Unable to add a todo'}
 
-      {error === Error.update && (
-        <> Unable to update a todo </>
-      )}
+      {error === Error.delete && 'Unable to delete a todo'}
 
-      {error === Error.empty && (
-        <> Title can&apos;t be empty </>
-      )}
+      {error === Error.update && 'Unable to update a todo'}
+
+      {error === Error.empty && 'Title can\'t be empty'}
     </div>
   );
 };
diff --git a/src/components/TodoHeader.tsx b/src/components/TodoHeader.tsx
@@ -33,7 +33,7 @@ export const TodoHeader: React.FC<Props> = ({
   const submitHandler = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
-    if (todoTitle === '') {
+    if (todoTitle.trim().length === 0) {
       setError(Error.empty);
 
       return;
@@ -51,7 +51,8 @@ export const TodoHeader: React.FC<Props> = ({
     addTodos(userId, newTodo)
       .then(() => {
         return getTodos(userId)
-          .then(setTodos);
+          .then(setTodos)
+          .catch(() => setError(Error.load));
       })
       .catch(() => setError(Error.add))
       .finally(() => {

diff --git a/src/components/TodoList.tsx b/src/components/TodoList.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable max-len */
 /* eslint-disable quote-props */
-// import cn from 'classnames';
 import { Todo } from '../types/Todo';
 import { TodoRow } from './TodoRow';
 

diff --git a/src/components/TodoRow.tsx b/src/components/TodoRow.tsx
@@ -69,7 +69,10 @@ export const TodoRow: React.FC<Props> = ({
         <>
           <span
             className="todo__title"
-            onDoubleClick={() => setEditing(true)}
+            onDoubleClick={() => {
+              setEditing(true);
+              setTitle(todo.title);
+            }}
           >
             {todo.title}
           </span>

diff --git a/src/types/Error.ts b/src/types/Error.ts
@@ -1,6 +1,7 @@
 export enum Error {
   without = '',
   empty = 'empty',
+  load = 'load',
   add = 'add',
   update = 'update',
   delete = 'delete',