Deleting ToDo Items

Welcome back! In the previous lesson, you learned how to create new ToDo items in your Laravel application. Now, we're going to take another important step: adding the capability to delete ToDo items. This feature is essential for maintaining an up-to-date and clutter-free task list. By the end of this lesson, you'll know how to implement a deletion feature that allows users to efficiently remove items they no longer need.

In this lesson, we'll cover how to allow users to delete ToDo items from your application. You will achieve this by:

1. Updating the view to include a delete button for each ToDo item.
2. Modifying the TodoController to handle delete requests.
3. Enhancing the TodoService to update your storage by removing deleted items.

Here's an example of how your view will be structured with a delete button:

<!-- app/resources/views/todos/index.blade.php -->

<ul>
  @foreach($todos as $todo)
    <li>{{ $todo->title }} - {{ $todo->description }}
      <form action="/todos/{{ $todo->id }}" method="post" style="display: inline;">
        @csrf
        @method('DELETE')
        <button type="submit">Delete</button>
      </form>
    </li>
  @endforeach
</ul>

This form includes a delete button that submits the form when clicked, triggering a deletion request to the server. Note that in HTML forms, the only HTTP methods allowed are GET and POST. Since we need a DELETE request for removing resources, Laravel provides the @method('DELETE') directive to simulate this by overriding POST with DELETE. When the form is submitted, Laravel interprets the request as a DELETE action, allowing us to handle it appropriately in the controller.

Why not use a GET request? Because GET requests should not be used for destructive actions, such as deleting data. Instead, we use DELETE requests to indicate that the server should remove the specified resource.

You'll also modify your TodoController to include a delete method:

// app/app/Http/Controllers/TodoController.php

<?php
namespace App\Http\Controllers;
use App\Services\TodoService;

class TodoController extends Controller
{
    protected $todoService;

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

    public function index()
    {
        $todos = $this->todoService->findAll();
        return view('todos.index', ['title' => 'ToDo List', 'todos' => $todos]);
    }

    public function store(Request $request)
    {
        $request->validate([
            'title' => 'required|string|max:255',
            'description' => 'nullable|string|max:255',
        ]);

        $this->todoService->create($request->title, $request->description);
        return redirect('/todos');
    }

    public function destroy($id)
    {
        $this->todoService->delete($id);
        return redirect('/todos');
    }
}

We have a new destroy method in the controller, which calls the delete method on the TodoService to remove the specified ToDo item. After deleting the item, the user is redirected back to the updated ToDo list.

Finally, you'll need to update the TodoService to include the delete method:

// app/app/Services/TodoService.php

<?php
namespace App\Services;
use Illuminate\Support\Facades\File;
use Illuminate\Support\Str;

class TodoService
{
    protected $filePath;

    public function __construct()
    {
        $this->filePath = storage_path('app/todos.json');
    }

    public function findAll()
    {
        if (File::exists($this->filePath)) {
            $todos = json_decode(File::get($this->filePath), false);
        } else {
            $todos = [];
        }

        return $todos;
    }

    public function findOne($id)
    {
        $todos = $this->findAll();
        return collect($todos)->firstWhere('id', $id);
    }

    public function create($title, $description = null)
    {
        $todos = $this->findAll();

        // Generate a random UUID for each new ToDo item
        $newTodo = (object)[
            'id' => (string) Str::uuid(),
            'title' => $title,
            'description' => $description
        ];

        $todos[] = $newTodo;

        File::put($this->filePath, json_encode($todos, JSON_PRETTY_PRINT));

        return $newTodo;
    }

    public function delete($id)
    {
        $todos = $this->findAll();
        $todos = array_filter($todos, function($todo) use ($id) {
            return $todo->id != $id;
        });

        File::put($this->filePath, json_encode(array_values($todos), JSON_PRETTY_PRINT));
    }
}

The delete method in the TodoService removes the ToDo item with the specified ID from the storage file. It uses the array_filter function to filter out the item with the matching ID. After removing the item, the service writes the updated list back to the storage file.

Notice, that during the creation process, we generate a random UUID for each new ToDo item using the Str::uuid() function. UUIDs (Universally Unique Identifiers) are used to ensure each item has a distinct identifier across all ToDo items. This is more robust than incrementing IDs, as it avoids issues when items are deleted or created simultaneously, which could result in ID conflicts. UUIDs are globally unique, making them a reliable choice for identifying resources in distributed systems and large applications.

Finally, let's define the route for the destroy method in the routes/web.php file:

// app/routes/web.php

<?php
use App\Http\Controllers\TodoController;

Route::get('/todos', [TodoController::class, 'index']);
Route::post('/todos', [TodoController::class, 'store']);
Route::delete('/todos/{id}', [TodoController::class, 'destroy']);

Now, when a user clicks the delete button on a ToDo item, the form sends a DELETE request to the server, which is handled by the destroy method in the TodoController. Notice, that we use the Route::delete method to define the route for handling DELETE requests.

With this implementation, users can now delete ToDo items from the list, keeping their task list organized and up-to-date. Congratulations on adding this essential feature to your application!

Developing an application with robust data management features requires both the creation and deletion of items. With a delete feature, users have the freedom to manage their tasks fully by removing items that are no longer necessary. This capability enhances the user experience, making the application not only functional but also practical and user-friendly.

Moreover, implementing a delete feature introduces vital concepts such as handling different HTTP request types, enhancing your understanding of RESTful services. It lays the groundwork for data manipulation operations, which are paramount in most web applications. Are you ready to make your ToDo app even more interactive? Let's dive into the practice section and implement the delete feature together!