Adding Update and Delete Functionality

Welcome back! So far, you've learned how to create and view ToDo items. Now, it's time to add more interactivity by allowing users to update and delete ToDo items.

These functionalities will make your application more dynamic and provide users with full control over their list of tasks. By the end of this lesson, your ToDo app will support all core CRUD operations.

In this lesson, you’ll learn how to:

• Update existing ToDo items.
• Delete ToDo items from the list.

These essential features will make your ToDo application more interactive and practical for users.

The first step is to extend the TodoController to handle update and delete requests. We'll use the PUT and DELETE HTTP methods and keep all the routes under the /todos base path for a more RESTful design.

@Put(':id')
@Render('index')
update(@Param('id') id: string, @Body() body) {
  // Convert ID to a number and update the ToDo
  this.todoService.update(Number(id), body.title, body.dueDate, body.description);
  return { title: 'ToDo List', todos: this.todoService.findAll() };
}

@Delete(':id')
@Render('index')
delete(@Param('id') id: string) {
  // Delete the ToDo with the given ID
  this.todoService.delete(Number(id));
  return { title: 'ToDo List', todos: this.todoService.findAll() };
}

Here’s a breakdown of what each method does:

• The @Put(':id') method allows updating an existing ToDo item. It takes the id from the URL parameters and the updated title, dueDate, and description values from the request body. The update method in the TodoService is then called to apply these changes. After the update, the updated list of ToDos is returned to render the page.
• The @Delete(':id') method removes a ToDo item by calling the delete method in the service. It uses the DELETE HTTP method, and the item's ID is passed to the service to remove the corresponding entry from the list.

Both methods use the /todos route, which is distinguished by the PUT and DELETE request types, following RESTful conventions.

The TodoService is responsible for handling the logic behind updating and deleting ToDo items. Here’s how we implement these functionalities:

update(id: number, title: string, dueDate: string, description?: string): Todo {
  const todo = this.todos.find(todo => todo.id === id);
  // Update the title, dueDate, and description of the found ToDo
  todo.title = title;
  todo.dueDate = dueDate;
  todo.description = description;
  return todo;
}

delete(id: number): void {
  // Remove the ToDo from the list using filter
  this.todos = this.todos.filter(todo => todo.id !== id);
}

• The update method searches for a ToDo item by its id. If found, it modifies the title, dueDate, and description properties and returns the updated item. This method provides flexibility, as it can handle cases where only one of the properties is updated while leaving the others unchanged.
• The delete method filters out the item with the specified ID from the todos array, effectively removing it from the list.

To enable users to update and delete ToDo items, we need to modify the view (index.hbs) and use JavaScript to handle the PUT and DELETE requests:

<ul>
  {{#each todos}}
    <li>
      <strong>{{this.title}}</strong><br>
      {{this.description}}<br>
      <em>Due: {{this.dueDate}}</em>

      <!-- Update form -->
      <form id="update-form-{{this.id}}" onsubmit="updateTodo(event, {{this.id}})">
        <input type="text" name="title" value="{{this.title}}" placeholder="Title" required>
        <input type="text" name="description" value="{{this.description}}" placeholder="Description">
        <input type="date" name="dueDate" value="{{this.dueDate}}">
        <button type="submit">Update</button>
      </form>

      <!-- Delete button -->
      <button onclick="deleteTodo({{this.id}})">Delete</button>
    </li>
  {{/each}}
</ul>

• updateTodo function: This function gathers the updated data from the form and sends a PUT request to the /todos/:id endpoint. If successful, the page reloads to show the updated list.
• deleteTodo function: This function sends a DELETE request to the /todos/:id endpoint. Upon success, the page reloads to reflect the changes.

Since HTML forms don't directly support PUT and DELETE methods, we'll use JavaScript in the practices to handle these requests.

By implementing PUT and DELETE operations in your ToDo app, you:

• Enhance User Control: Users can now modify or remove tasks, providing flexibility in managing their to-do lists.
• Follow RESTful Design: Using PUT for updates and DELETE for removals aligns with RESTful API conventions, making your application more standardized.
• Improve Interactivity: With these operations, your app becomes more dynamic, allowing real-time interactions with the data.

By supporting these key operations, your application will feel more polished and provide a richer user experience. Ready to see these features in action? Let's move on to the exercises and put this into practice!