feat/todo

[danifromecuador]

In this PR, I've:

• Created a feat/todo branch
• Created a Todo component that will allow the user to:
  • Add a new goal
  • Mark that goal as completed
  • Delete all completed goals
  • See the percentage of completed goals
• Reused Todo component in 3 components: Daily, Weekly, and Monthly goals, those components are being called on the Todos component and the only one given prop is their corresponding slice of the store
• All data for each component is saved in the global store that is managed by Zustand
• You can still use the Redux extension to see the global statue on the browser thanks to a Zustand feature even when this project doesn't use Redux
• Saved goals components data on local storage, so that data will be preserved when refreshing the page
• Conditional rendering for the Delete All Completed button and Completed percentage indicator
• Applied minimal style and responsiveness, it will be improved in ahead PRs.
• Behavior:

todos.behavior.mp4

[Diegogagan2587]

@danifromecuador Hi Buddy! ,

Status: Almost there! 🟠 🟠 🟠

Great Job So far! 🎉

Highlights

• Each section (Daily Goals, Weekly Goals and Monthly Goals) is adding or removing tasks.
• Nice Job rendering the progress shown as percentage.
• Timer plays a sound when time is over

Suggested changes:

Specify action names

You may ask, what is the issue with that? Well, when the user executes an action like add a task, an action name will describe the action that has been executed, not adding action names will make debugging harder and the action would be named as anonymous in dev tools. as shown in the example below:

The problem will occur if you want do debug, you will not know which action to check because they are named as anonimous. To prevent this problem specify an action name on each action that updates the state as shown in the example below:

// todo_logic.js
export const add = (set, input, sliceID) => set((state) => ({
  [sliceID]: {
    ...state[sliceID],
    todos: [...state[sliceID].todos, { id: Date.now(), content: input }]
  }
}), false, 'todo/add')

after adding an action name you should be able to debug properly if there is an error:

Summary of pending task

• Specify action names for each action

references

Zustand Issue: Actions Names in Devtools
Zustand Readme # Login Actions

If you think we should take another approach share it with the team!!! Thanks for your effort!

Cheers, and Happy coding!👏👏👏

Please, remember to tag me in your question so I can receive the notification._

[Diegogagan2587]

it would be great to add an action name here as show on code review example.

[Diegogagan2587]

it would be great to add an action name here as show on code review example.

[Diegogagan2587]

it would be great to add an action name here as show on code review example.

[Diegogagan2587]

it would be great to add an action name here as show on code review example.

[danifromecuador]

Thanks for the valuable feedback, dear @Diegogagan2587, The required changes were made and now all the actions have a name that will be helpful when debugging.

[Diegogagan2587]

@danifromecuador Hi Buddy! ,

Status: Approved! 🟢 🟢 🟢

Great Job So far! 🎉

Highlights

• Each section (Daily Goals, Weekly Goals and Monthly Goals) is adding or removing tasks.
• Nice Job rendering the progress shown as percentage.
• Timer plays a sound when time is over
• Requested Changes were applied.

Suggested changes:

• All suggested changes were applied.

If you think we should take another approach share it with the team!!! Thanks for your effort!

Cheers, and Happy coding!👏👏👏

Please, remember to tag me in your question so I can receive the notification._

[danifromecuador]

Thanks, dear reviewer!