Task manager app refactor

[rudiss]

This pull request introduces refactors to the Task Manager application. The changes improve the overall code structure, integrate a delete confirmation dialog, and increase test coverage. The UI has been updated to use our design system colors, and the code is now more modular and maintainable.

Changes

• feat(DeleteDialog):

  • Added a new DeleteDialog component that uses Radix UI (shadcn/ui) to display a confirmation dialog before deleting a task.
  • Replaced the “Delete” text with a trash icon that adapts its color based on the device (red on mobile, dimgrey turning red on hover on desktop).

• refactor(TaskItem):

  • Updated TaskItem to integrate the new DeleteDialog component.
  • Added a data-testid attribute on the toggle button to facilitate testing.

• refactor(TaskManager):

  • Modularized the Task Manager by extracting components into:
    • FilterButtons for selecting task filters.
    • TaskInput for adding new tasks.
    • TaskList for rendering the list of tasks.
  • Improved state management and code readability.

• test(TaskManager):

  • Added comprehensive tests with Jest and React Testing Library covering:
    • Task addition via the Enter key.
    • Task filtering (Completed/Pending).
    • The floating add button focusing on the input.
    • The full delete confirmation flow in DeleteDialog.

• fix(tsconfig):

  • Updated tsconfig.json with "skipLibCheck": true to resolve type issues with react-icons.

Demo

Screen.Recording.2025-02-26.at.14.17.56.mp4

Coverage

Testing

1. Development Server:

   • Start the application using:

     pnpm dev

   • Verify that you can add tasks, filter them by status, toggle completion, and delete tasks with a confirmation dialog appearing before deletion.

2. Run Tests:

   • Execute the test suite using:

     pnpm test

   • Ensure that all tests pass and that the Task Manager component has near 100% coverage.

Githutb actions

.github/workflows/deploy.yml

Additional Notes

• The UI now fully adheres to the Lateral Group design system colors.
• The modular component structure enhances maintainability and reusability.
• The deletion flow now requires user confirmation, reducing accidental deletions.

---