Fix issue #47: feat: Implement ability to edit todo items

[larryhudson-aider-github[bot]]

This PR addresses the changes requested in issue #47

Thank you for providing the content of src/App.tsx. To implement the ability to edit a to-do item, including renaming it and changing the due date, we'll need to make several changes to this file. I'll explain the changes and then provide the necessary SEARCH/REPLACE blocks.

1. Add a new state to track the todo being edited.
2. Create a function to handle editing a todo.
3. Modify the todo item rendering to include edit functionality.
4. Add a form for editing todos.

Here are the SEARCH/REPLACE blocks to implement these changes:

1. Add new state for editing:

src/App.tsx

<<<<<<< SEARCH
  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all')

  const getFilterButtonClass = (status: FilterStatus) => {
=======
  const [filterStatus, setFilterStatus] = useState<FilterStatus>('all')
  const [editingTodo, setEditingTodo] = useState<Todo | null>(null)

  const getFilterButtonClass = (status: FilterStatus) => {
>>>>>>> REPLACE

2. Add a function to handle editing a todo:

src/App.tsx

<<<<<<< SEARCH
  const deleteTodo = (id: string) => {
    const newTodos = todos.filter(todo => todo.id !== id)
    setTodos(newTodos)
    if (newTodos.length === 0) {
      localStorage.removeItem('todos')
    }
  }
=======
  const deleteTodo = (id: string) => {
    const newTodos = todos.filter(todo => todo.id !== id)
    setTodos(newTodos)
    if (newTodos.length === 0) {
      localStorage.removeItem('todos')
    }
  }

  const editTodo = (id: string, newText: string, newDueDate: Date) => {
    const newTodos = todos.map(todo =>
      todo.id === id ? { ...todo, text: newText, dueDate: newDueDate } : todo
    )
    setTodos(newTodos)
    setEditingTodo(null)
  }
>>>>>>> REPLACE

3. Modify the todo item rendering to include edit functionality:

src/App.tsx

<<<<<<< SEARCH
                <DraggableItem key={todo.id} id={todo.id} index={index} moveItem={(dragIndex, hoverIndex) => moveItem('today', dragIndex, hoverIndex)} group="today">
                  <input
                    type="checkbox"
                    checked={todo.completed}
                    onChange={() => toggleTodo(todo.id)}
                  />
                  <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                    {todo.text} (Due: {todo.dueDate.toLocaleDateString()})
                  </span>
                  <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                </DraggableItem>
=======
                <DraggableItem key={todo.id} id={todo.id} index={index} moveItem={(dragIndex, hoverIndex) => moveItem('today', dragIndex, hoverIndex)} group="today">
                  <input
                    type="checkbox"
                    checked={todo.completed}
                    onChange={() => toggleTodo(todo.id)}
                  />
                  <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
                    {todo.text} (Due: {todo.dueDate.toLocaleDateString()})
                  </span>
                  <button onClick={() => setEditingTodo(todo)}>Edit</button>
                  <button onClick={() => deleteTodo(todo.id)}>Delete</button>
                </DraggableItem>
>>>>>>> REPLACE

4. Add a form for editing todos:

src/App.tsx

<<<<<<< SEARCH
        )}
      </DndProvider>
    </div>
  )
}

export default App
=======
        )}
      </DndProvider>
      {editingTodo && (
        <div className="edit-form">
          <h3>Edit Todo</h3>
          <form onSubmit={(e) => {
            e.preventDefault();
            const form = e.target as HTMLFormElement;
            const newText = (form.elements.namedItem('editText') as HTMLInputElement).value;
            const newDueDate = new Date((form.elements.namedItem('editDueDate') as HTMLInputElement).value);
            editTodo(editingTodo.id, newText, newDueDate);
          }}>
            <input
              type="text"
              name="editText"
              defaultValue={editingTodo.text}
            />
            <input
              type="date"
              name="editDueDate"
              defaultValue={editingTodo.dueDate.toISOString().split('T')[0]}
            />
            <button type="submit">Save</button>
            <button type="button" onClick={() => setEditingTodo(null)}>Cancel</button>
          </form>
        </div>
      )}
    </div>
  )
}

export default App
>>>>>>> REPLACE

These changes will add the ability to edit existing todos. Here's a summary of what we've done:

1. Added a new state editingTodo to keep track of which todo is being edited.
2. Created an editTodo function to update a todo's text and due date.
3. Added an "Edit" button to each todo item.
4. Created a form that appears when a todo is being edited, allowing the user to modify the text and due date.

To make these changes effective, you'll need to apply all of these SEARCH/REPLACE blocks to your src/App.tsx file. After making these changes, users will be able to edit existing todos by clicking the "Edit" button, which will display a form to modify the todo's text and due date.