Adding ToDo Items to the List

Welcome back! In the previous lesson, we set up the foundation of our MVC ToDo App in Symfony. We created a Todo entity, set up a TodoService to manage our todos, and defined a TodoController to handle requests and render a list of todos using Twig.

Today, we're going to add a critical feature: the ability to add new ToDo items to our list. By the end of this lesson, you will be able to create new tasks and see them displayed in the list.

Let's start by enhancing our TodoService to allow the creation of new ToDo items. Here is the updated code:

<?php

namespace App\Service;

use App\Entity\Todo;
use Symfony\Component\HttpFoundation\RequestStack;

class TodoService
{
    private $requestStack;

    public function __construct(RequestStack $requestStack)
    {
        $this->requestStack = $requestStack;
    }

    private function getSession()
    {
        return $this->requestStack->getSession();
    }

    public function findAll(): array
    {
        return $this->getSession()->get('todos', []);
    }

    public function create($title, $description = null): Todo
    {
        // Retrieve current list of todos from the session
        $todos = $this->findAll();
        // Assign a new ID based on the count of existing todos
        $id = count($todos) + 1; 
        // Create a new Todo object with the provided title and optional description
        $todo = new Todo($id, $title, $description);
        // Add new todo to the list
        $todos[] = $todo; 
        // Save the updated list to the session
        $this->getSession()->set('todos', $todos); 
        // Return new todo item
        return $todo;
    }
}

In this updated TodoService, we'll first look at the constructor and the session access. The RequestStack provides access to the current HTTP request and session, and the getSession method retrieves the session from the request stack. Moving on to the findAll method, it fetches all the todos stored in the session, or returns an empty array if none exist.

Now, let's focus on the create method. This method starts by retrieving the current list of todos. It then assigns a new ID based on the count of existing todos. With the provided title and optional description, a new Todo object is created. Finally, the new todo is added to the list and the session is updated to save this new list.

Next, we'll update our controller to handle the creation of new ToDo items. Here is the updated code for the TodoController:

<?php

namespace App\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;
use App\Service\TodoService;

class TodoController extends AbstractController
{
    private $todoService;

    public function __construct(TodoService $todoService)
    {
        $this->todoService = $todoService;
    }

    #[Route('/', name: 'todo_list')]
    public function list(): Response
    {
        $todos = $this->todoService->findAll();
        return $this->render('todo/list.html.twig', ['todos' => $todos]);
    }

    #[Route('/todos/create', name: 'todo_create', methods: ['POST'])]
    public function create(Request $request): Response
    {
        // Retrieve form data from request
        $title = $request->request->get('title');
        $description = $request->request->get('description');
        // Call the create method of the TodoService to add a new ToDo item
        $this->todoService->create($title, $description);
        // Redirect back to the list view after successfully creating the ToDo item
        return $this->redirectToRoute('todo_list');
    }
}

In the TodoController, the constructor initializes the TodoService instance, allowing the controller to use its methods. The list method, which you've seen before, fetches all the todos and renders them using the list.html.twig template.

Let's take a closer look at the create method. The route annotation maps the URL path /todos/create to this method and specifies that it only accepts POST requests. The create method retrieves form data from the POST request, extracts the title and description, and calls the create method of the TodoService to add the new ToDo item. After successfully creating the ToDo item, the method redirects back to the list view.

Now, let's update our Twig template to include a form that allows users to add new ToDo items. Here is the updated list.html.twig template:

<!DOCTYPE html>
<html>
<head>
  <title>ToDo List</title>
</head>
<body>
  <h1>ToDo List</h1>
  <ul>
    {% for todo in todos %}
      <li>{{ todo.getTitle() }} - {{ todo.getDescription() }}</li>
    {% else %}
      <li>No todos found</li>
    {% endfor %}
  </ul>
  <!-- Form to add new ToDo items -->
  <form action="{{ path('todo_create') }}" method="post">
    <input type="text" name="title" placeholder="Title" required>
    <input type="text" name="description" placeholder="Description">
    <!-- Submit button to add the new ToDo item -->
    <button type="submit">Add To Do</button>
  </form>
</body>
</html>

In this template, the form's action points to the todo_create route, which we defined in the controller. The form uses the POST method to send data to the server and contains two input fields: one for the title (required) and one for the description (optional). A submit button is included to add a new ToDo item when clicked.

Let's walk through an example of adding a new ToDo item.

1. Fill the Form: Enter a title and an optional description in the form fields.

2. Submit the Form: Click the Add To Do button.

3. Form Submission: The form data is sent to the /todos/create endpoint as a POST request.

4. Controller Handling: The TodoController extracts the form data and calls the create method of the TodoService.

5. Service Handling: The TodoService creates a new Todo item and stores it in the session.

6. Redirection: The controller redirects back to the list view, where the new ToDo item is now visible.

In this lesson, we expanded our ToDo app by adding the functionality to create new ToDo items. Here is a summary of what we've covered:

1. Updated the TodoService: We added a create method to handle the creation of new ToDo items and save them in the session.

2. Configured the Controller: We modified the TodoController to process form submissions and call the service method to create new ToDo items.

3. Modified the Template: We updated the list.html.twig template to include a form for adding new ToDo items.

Now it's your turn to practice what you've learned. Head over to the practice exercises and try adding new ToDo items to your list. Remember, practice makes perfect!