Skip to content

15-delete-task.md

Latest commit

 

History

History
103 lines (67 loc) · 3.02 KB

15-delete-task.md

File metadata and controls

103 lines (67 loc) · 3.02 KB

Requirement: Delete a Task

Overview

This document outlines the requirements for implementing task deletion functionality in the Task UI application. Users should be able to delete existing tasks from both the task list and task detail views.

Requirements

Functional Requirements

  • Users must be able to delete tasks from the task list view
  • Users must be able to delete tasks from the task detail view
  • A confirmation dialog must be shown before deletion occurs
  • After successful deletion from detail view, users should be redirected to the task list

Technical Requirements

  • Implement a useDeleteTask hook using React Query mutations
  • Use shadcn/ui components for consistent styling
  • Include loading states during deletion process
  • Handle and display error states appropriately
  • Write comprehensive unit tests for all components

Accessibility Requirements

  • All buttons must have appropriate aria labels
  • Confirmation dialog must be keyboard navigable
  • Error messages must be announced to screen readers

User Experience / Design

Delete Buttons

  • In list view: Include a delete icon button on each task item
  • In detail view: Add a delete button in the actions bar area
  • Use Lucide React for delete icons

States

  • Loading: Show a loading indicator while deletion is in progress
  • Error: Display an error alert if deletion fails with retry option
  • Success: Provide visual confirmation of successful deletion

Confirmation Dialog

  • Show a confirmation dialog before proceeding with deletion
  • Clearly communicate that deletion is permanent
  • Provide options to confirm or cancel the deletion

Navigation

  • After successful deletion from the detail view, redirect user to the task list view
  • No navigation change is needed when deleting from the list view

API Integration

  • Handle optimistic updates for immediate UI feedback

Endpoint

DELETE /tasks/{taskId}

Response Codes

  • 204: Success (No Content)
  • 404: Task not found

Acceptance Criteria

  1. Delete from List View

    • User can delete a task directly from the task list
    • Confirmation dialog appears before deletion
    • List refreshes automatically after successful deletion

  2. Delete from Detail View

    • User can delete a task from the task detail page
    • Confirmation dialog appears before deletion
    • User is redirected to the task list after successful deletion

  3. Error Handling

    • Appropriate error messages are displayed if deletion fails
    • User has the option to retry failed deletions

  4. Loading States

    • Loading indicators are shown during the deletion process
    • Delete buttons are disabled during deletion

  5. Accessibility

    • All interactive elements are keyboard accessible
    • Screen readers announce state changes and error messages
    • Focus management follows accessibility best practices

  6. Unit Tests

    • Delete functionality is tested in both list and detail components
    • Loading and error states are tested
    • Navigation after deletion is tested