add task solution by nkoropka · Pull Request #1332 · mate-academy/react_todo-app

nkoropka · 2026-07-29T11:47:25Z

DEMO LINK

Zoolgrand

Great job overall! I've found a couple of improvements you can add to your code — we need to refactor those two components and remove the code comments across the app.

Zoolgrand · 2026-07-29T12:43:55Z

+  const [isEditing, setIsEditing] = useState(false);
+  const [editingTitle, setEditingTitle] = useState(todo.title);
+
+  const isCancelledRef = useRef(false);
+
+  const handleSave = (event?: React.FormEvent) => {
+    if (event) {
+      event.preventDefault();
+    }
+
+    if (isCancelledRef.current || !isEditing) {
+      return;
+    }
+
+    setIsEditing(false);
+
+    const trimmedTitle = editingTitle.trim();
+
+    if (!trimmedTitle) {
+      onDelete(todo.id);
+
+      return;
+    }
+
+    if (trimmedTitle !== todo.title) {
+      dispatch({
+        type: 'RENAME',
+        payload: { id: todo.id, title: trimmedTitle },
+      });
+    }
+
+    onFocusNewTodo?.();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Escape') {
+      isCancelledRef.current = true;
+      setEditingTitle(todo.title);
+
+      setIsEditing(false);
+      onFocusNewTodo?.();
+    }
+  };
+
+  const handleBlur = () => {
+    if (!isEditing) {
+      return;
+    }
+
+    if (isEditing && editingTitle !== todo.title) {
+      handleSave();
+    } else {
+      setIsEditing(false);
+    }
+  };
+
+  const handleDoubleClick = () => {
+    setIsEditing(true);
+    setEditingTitle(todo.title);
+    isCancelledRef.current = false;
+  };
+
+  useEffect(() => {
+    setEditingTitle(todo.title);
+  }, [todo.title]);


Could you extract this logic into custom hook useTodoItem?

Zoolgrand · 2026-07-29T12:44:58Z

+            value={editingTitle}
+            onChange={e => setEditingTitle(e.target.value)}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}


Please use onKeyUp to match the specification

Zoolgrand · 2026-07-29T12:47:11Z

+  useEffect(() => {
+    newTodoInputRef.current?.focus();
+  }, []);


You already have autofocus on your input

Zoolgrand · 2026-07-29T12:48:09Z

+  const [title, setTitle] = useState('');
+  const [filter, setFilter] = useState<FilteredStatus>('all');
+
+  const newTodoInputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    newTodoInputRef.current?.focus();
+  }, []);
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+
+    const trimmedTitle = title.trim();
+
+    if (!trimmedTitle) {
+      return;
+    }
+
+    dispatch({ type: 'ADD', payload: trimmedTitle });
+
+    setTitle('');
+  };
+
+  const handleDeleteTodo = (todoId: number) => {
+    dispatch({ type: 'DELETE', payload: todoId });
+    newTodoInputRef.current?.focus();
+  };
+
+  const hasCompletedTodos = todos.some(t => t.completed);
+
+  const activeTodosCount = todos.filter(t => !t.completed).length;
+
+  const focusNewTodoInput = () => {
+    newTodoInputRef.current?.focus();
+  };


Extract this logic into custom hook UseTodo

Zoolgrand · 2026-07-29T12:48:38Z

+              onClick={() => {
+                const areAllCompleted = todos.every(t => t.completed);
+
+                dispatch({
+                  type: 'TOGGLE_ALL',
+                  payload: !areAllCompleted,
+                });
+              }}


Extract this into function

Zoolgrand · 2026-07-29T12:49:37Z

+                onClick={() => {
+                  dispatch({ type: 'CLEAR' });
+                  newTodoInputRef.current?.focus();
+                }}


Here is smaller example but we can still extract this into function

Zoolgrand · 2026-07-29T12:50:12Z

+              ))}
+            </section>
+
+            {/* Hide the footer if there are no todos */}


Clear the comments

Zoolgrand · 2026-07-29T12:51:30Z

+    onFocusNewTodo?.();
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {


rename this to handle keyUp event as requires specification

2pasha

good job! 👏

take a look on comments below ⬇️

2pasha · 2026-07-29T16:39:26Z

            onChange={e => setEditingTitle(e.target.value)}
            onBlur={handleBlur}
-            onKeyDown={handleKeyDown}
+            onKeyDown={handleKeyUp}


should be

onKeyUp={handleKeyUp}

2pasha · 2026-07-29T16:39:44Z

+  // const handleBlur = () => {
+  //   if (!isEditing) {
+  //     return;
+  //   }
+
+  //   if (isEditing && editingTitle !== todo.title) {
+  //     handleSave();
+  //   } else {
+  //     setIsEditing(false);
+  //   }
+  // };


remove unused code

2pasha · 2026-07-29T16:41:07Z

+                <a
+                  href="#/"
+                  className={classNames('filter__link', {
+                    selected: filter === 'all',
+                  })}
+                  data-cy="FilterLinkAll"
+                  onClick={() => setFilter('all')}
+                >
+                  All
+                </a>
+
+                <a
+                  href="#/active"
+                  className={classNames('filter__link', {
+                    selected: filter === 'active',
+                  })}
+                  data-cy="FilterLinkActive"
+                  onClick={() => setFilter('active')}
+                >
+                  Active
+                </a>
+
+                <a
+                  href="#/completed"
+                  className={classNames('filter__link', {
+                    selected: filter === 'completed',
+                  })}
+                  data-cy="FilterLinkCompleted"
+                  onClick={() => setFilter('completed')}
+                >
+                  Completed
+                </a>


you may add all your filter values to kind of array and map through it to avoid code duplication

Zoolgrand

Good job.
Approved

There is still some comments in your code (search for {/ in code) could you remove this as well?

add task solution

b5462e6

Zoolgrand suggested changes Jul 29, 2026

View reviewed changes

fix task solution

6117615

nkoropka requested a review from Zoolgrand July 29, 2026 13:27

2pasha suggested changes Jul 29, 2026

View reviewed changes

map filter

1fbaf1e

nkoropka requested a review from 2pasha July 30, 2026 09:41

Zoolgrand approved these changes Jul 30, 2026

View reviewed changes

Uh oh!

Conversation

nkoropka commented Jul 29, 2026

Uh oh!

Zoolgrand left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

2pasha left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Zoolgrand left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants