add task solution

src/components/Footer/Footer.tsx

@@ -17,6 +17,9 @@ export const Footer: React.FC = () => {
 
     setTodos(todosCompleted);
     localStorage.setItem('todos', JSON.stringify(todosCompleted));
+
+    const inputField = document.querySelector(".todoapp__new-todo") as HTMLInputElement;
+    inputField!.focus();
   };
 
   return (

src/components/TodoItem/TodoItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef } from 'react';
 import { Todo } from '../../types/Todo';
 import classNames from 'classnames';
 import { useTodoContext } from '../../context/TodoContext';
@@ -8,7 +8,62 @@ interface Props {
 }
 
 export const TodoItem: React.FC<Props> = ({ todo }) => {
-  const { todos, setTodos } = useTodoContext();
+  const { todos, setTodos, newTitle, setNewTitle } = useTodoContext();
+  const [isEditForm, setIsEditForm] = useState(false);
+  const editInputRef = useRef<HTMLInputElement>(null);
+
+  const handleDoubleClick = () => {
+    setIsEditForm(true);
+    setNewTitle(todo.title);
+    setTimeout(() => {
+      editInputRef.current?.focus();
+    }, 0);
+  }
+
+  const editTitle = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const form = new FormData(e.currentTarget);
+    const newTitle = form.get('TodoTitleField') as string;
+
+    if (!newTitle.trim()) {
+      deleteTodo(todo.id);
+    } else if (newTitle !== todo.title) {
+      editTodo(newTitle.trim(), todo.id);
+    }
+
+    setTimeout(() => {
+      setIsEditForm(false);
+    }, 100);
+  };
+
+  const handleTitleBlur = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newTitle = e.target.value.trim();
+
+    if (!newTitle) {
+      deleteTodo(todo.id);
+      return;
+    }
+
+    if (newTitle !== todo.title) {
+      editTodo(newTitle, todo.id);
+    }
+
+    setIsEditForm(false);
+  };
+
+  const editTodo = (title: string, id: number) => {
+    const updatedTodos = todos.map(todo => todo.id === id ? { ...todo, title } : todo);
+
+    setTodos(updatedTodos);
+    localStorage.setItem('todos', JSON.stringify(updatedTodos));
+  };
+
+  const handleKeyUp = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Escape') {
+      setIsEditForm(false);
+    }
+  };
 
   const deleteTodo = (id: number) => {
     const filteredTodos = todos.filter(todo => todo.id !== id);
@@ -30,7 +85,7 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
   }
 
   return (
-    <div data-cy="Todo" className={classNames("todo", {completed: todo.completed})}>
+    <div data-cy="Todo" className={classNames("todo", {completed: todo.completed})} onDoubleClick={handleDoubleClick}>
       <label className="todo__status-label">
         <input
           data-cy="TodoStatus"
@@ -41,14 +96,37 @@ export const TodoItem: React.FC<Props> = ({ todo }) => {
         />
       </label>
 
-      <span data-cy="TodoTitle" className="todo__title">
-        {todo.title}
-      </span>
+      {isEditForm ? (
+        <form onSubmit={editTitle}>
+          <input
+            data-cy="TodoTitleField"
+            type="text"
+            className="todo__title-field"
+            placeholder='What needs to be done?'
+            value={newTitle}
+            name="TodoTitleField"
+            ref={editInputRef}
+            onChange={(e) => setNewTitle(e.target.value)}
+            onBlur={handleTitleBlur}
+            onKeyUp={handleKeyUp}
+          />
+        </form>
+      ) : (
+        <span
+          data-cy="TodoTitle"
+          className="todo__title"
+        >
+          {todo.title}
+        </span>
+      )}
+
 
       {/* Remove button appears only on hover */}
-      <button type="button" className="todo__remove" data-cy="TodoDelete" onClick={() => deleteTodo(todo.id)}>
+      {!isEditForm && (
+      <button type="button" className="todo__remove" data-cy="TodoDelete" onClick={() => deleteTodo(todo.id)} >
         ×
       </button>
+      )}
     </div>
   )
 }

src/context/TodoContext.tsx

@@ -9,6 +9,8 @@ interface TodoContextType {
   setTitle: (title: string) => void;
   filter: 'all' | 'active' | 'completed';
   setFilter: (filter: 'all' | 'active' | 'completed') => void;
+  newTitle: string;
+  setNewTitle: (editTitle: string) => void;
 }
 
 export const TodoContext = React.createContext<TodoContextType>({
@@ -18,6 +20,8 @@ export const TodoContext = React.createContext<TodoContextType>({
   setTitle: () => {},
   filter: 'all',
   setFilter: () => {},
+  newTitle: '',
+  setNewTitle: () => {},
 });
 
 type Props = {
@@ -28,14 +32,17 @@ export const TodoProvider: React.FC<Props> = ({ children }) => {
   const [ todos, setTodos ] = useState<Todo[]>([]);
   const [ title, setTitle ] = useState<string>('');
   const [ filter, setFilter ] = useState<FilterType>('all');
+  const [ newTitle, setNewTitle ] = useState<string>('');
 
   const value: TodoContextType = {
     todos,
     setTodos,
     title,
     setTitle,
     filter,
-    setFilter
+    setFilter,
+    newTitle,
+    setNewTitle,
   }
 
   return (