Adding Task Deletion with Confirmation Dialog in Svelte

In the previous lesson, we refactored our task store to make it more scalable and maintainable. One of the key improvements was adding a deleteTask function that allows us to remove tasks from our Kanban board. However, we haven't yet created a user interface for this functionality.

In this lesson, we'll build on our existing foundation by creating a dedicated DeleteButton component with a confirmation dialog. This is an important feature for any task management application because it prevents users from accidentally deleting important tasks with a single click.

The confirmation dialog adds an extra step to the deletion process, asking users to confirm their action before permanently removing a task. This is a common pattern in user interface design that helps prevent user errors and data loss.

Here's what we'll accomplish in this lesson:

1. Create a reusable DeleteButton component
2. Implement a confirmation dialog within this component
3. Add smooth transitions for a polished user experience
4. Integrate the DeleteButton into our TaskCard component

By the end of this lesson, users will be able to delete tasks from any column of our Kanban board with a confirmation step to prevent accidental deletions.

Let's start by creating a new component called DeleteButton.svelte. This component will be responsible for handling the deletion process, including the confirmation dialog.

First, we need to import the deleteTask function from our task store and set up the component's props and state:

<script>
  import { deleteTask } from '$lib/taskStore.svelte.js';
  
  let { id } = $props();
  let confirmDelete = $state(false);
  
  function handleDelete(e) {
    e.stopPropagation();
    if (confirmDelete) {
      deleteTask(id);
    } else {
      confirmDelete = true;
    }
  }
  
  function cancelDelete(e) {
    e.stopPropagation();
    confirmDelete = false;
  }
</script>

In this script section, we're doing several important things:

1. We import the deleteTask function that we created in the previous lesson.
2. We define a prop called id, which will be the ID of the task to delete.
3. We create a local state variable, confirmDelete, using the $state rune to track whether the user has initiated the deletion process.
4. We define two functions:
   • handleDelete, which either shows the confirmation dialog or deletes the task.
   • cancelDelete, which cancels the deletion process.

Notice the use of e.stopPropagation() in both functions. This is crucial because our DeleteButton will be nested inside the TaskCard, which has its own click handler. Without stopping the event propagation, clicking the delete button would also trigger the TaskCard's click event, which would expand or collapse the card.