Task Manager App Refactor

[Lefcott]

This pull request introduces several new features, improvements, and bug fixes, as outlined below.
Each item is linked to its respective pull request for detailed context:

• Fix Filter Condition
• Fix deletion button not updating the UI immediately
• Fix style inconsistencies
• Ensure robust type safety and address UI issues
• Code refactoring and highlight selected tab
• Zustand implementation
• Store tasks in localStorage
• Show confirmation modal before deleting a task
• Add deployment workflow for Vercel (and this PR is a fix for de deploy)
• UI Improvements

The app is live on Vercel: https://i-am-hired.vercel.app/

Changes made

Fix Filter Condition

Summary

When filtering tasks, completed tasks were incorrectly displaying as pending and vice versa.
In order to fix it, the conditions inside the task array filter method where inverted.

Test Cases

• Completed tasks:

1. Go to the tab Completed.
2. The task Clean the house should be displayed.

• Pending tasks:

1. Go to the tab Pending.
2. The task Buy groceries should be displayed.

Screenshots

• Before the fix (Clean the house is completed and Buy groceries is pending):

• After the fix (Clean the house is completed and Buy groceries is not completed):

Fix deletion button not updating the UI immediately

Summary

When deleting a task, the UI was not updating correctly since the array in the state was being mutated.
In order to fix it, I used the filter method to create a new array without the selected task.

Test Cases

1. Click the Delete button on any task.
2. The task should be deleted from the UI.

Screen Recordings

• Before the fix:

delete-button-not-working.mp4

• After the fix:

delete-button-working.mp4

Fix style inconsistencies

Summary

Use only Tailwind CSS classes instead of using both Tailwind and style prop.

Test Cases

• Verify that the Delete button looks the same.

Screenshots

• Styles are the same:

Ensure robust type safety and address UI issues

Summary

• New type definitions:
  • Added proper types for TaskItem props.
  • Exported a Task type in a types directory.
  • Added a type definition for the filter value (which can be one of the following: all, completed, or pending)
• Use consistent property names for tasks (property completed was being used as isCompleted, and property title was being used as name).
• Rename newTask to newTaskTitle and add an empty string as initial value.

Issues resolved after the changes:

• Now the styling of the completed and pending tasks look correct (since isCompleted property was being used instead of completed, and the value was always undefined, then all tasks had the completed styles).
• When adding a task, an empty task would be added since the property name was being used instead of title, which added a new task with an undefined value for title.
• When writing the first character in the text input, a console error would be shown since newTaskTitle had an initial value of undefined, making the input change from uncontrolled to controlled.

Test Cases

• Ensure completed and pending have their respective styling.
• Create a new task and verify that the task is added, and no errors are shown in the console.

Screen Captures

• Completed and pending tasks display correctly:

• Creating a new task does not show any errors in the console, and the task is added correctly:

creating-new-task.mp4

Code refactoring and highlight selected tab

Summary

• Separated the TaskManager component into different components in a hierarchy that maps to the way the components are nested.
• Avoid redundant logic.
• Highlight the selected tab.

Test Cases

• Switch between tabs and verify that the selected tab looks different.

Screen Captures

• Selected tab looks different:

switch-tabs.mp4

Zustand implementation

Summary

Implement Zustand library in order to centralize common data in a store instead of passing props. Also added necessary actions to manipulate the data.
The following data was moved to the store:

• Tasks: the complete list of tasks.
• Current filter: the filter that the user has selected.

Tests Cases

Everything should be working the same way as before, so verify that the following works:

• Creating a new task.
• Toggling a task.
• Deleting a task.
• Switching the selected filter.

Store tasks in localStorage

Summary

• Ensure every change in the tasks array is persisted in localStorage.
• When initializing the store, load the tasks from localStorage.

Test Cases

• Create a task, reload the page, and verify that the new task is still there.
• Delete a task, reload the page, and verify that the task is still deleted.
• Toggle a task status, reload the page, and verify that the task status is the same.

Screen Captures

• Changes being persisted after the page is reloaded:

changes-persisted.mp4

Show confirmation modal before deleting a task

Summary

Adds a confirmation modal that asks the user if they want to confirm the task deletion.

Test Cases

1. Click on any delete button and a modal should show up asking the user if they want to confirm the deletion of the task. The name of the task should be included in the message.
2. When canceling the deletion, the modal should close.
3. When confirming the deletion, the modal should close, and the task should be deleted.

Screen Captures

Add deployment workflow for Vercel

Summary

Add deployment workflow for Vercel so every time a change is made in the main branch, the project will be deployed to https://i-am-hired.vercel.app/

Test Cases

• Verify that after pushing changes to main, the project deploys correctly to https://i-am-hired.vercel.app/.

UI Improvements

Summary

• Add background color to tabs. Also, the selected tab will have a darker background color.
• Add a little transition duration for the tabs and tasks.

Test Cases

• Click on different tabs and check the little animation.
• Toggle different tasks and check the little animation.

Screen Captures

ui-improvements.mp4