feat: Implement States to manage the app [Places]

[701i]

Summary 💡

@carlosHGit Once that We decide what State Management tool will use (Redux, React Query, Vuex, etc.), It could be used to track our steps in the App

Acceptance Criteria ✅

• [x] Help to understand state management with different methods and examples
• [ ] The App can remember, show, and keep updated the user's favorite places

[carlosHGit]

State managment

Before start talking about state managment we need to talk about components in React, when we looking for components, we can find ourselves in one of these two situations:

• stateful components
• stateless components

In the case of stateless components, they usually have properties (also known as props) that are passed down from their parents either by inheritance vs composition. and that don't change after the component is rendered.

In interactive scenarios, you need to be able to make changes to components as a result of some user interaction or event; so we need a solution that stores the information in a way that it can be mutated.

Currently there are a wide variety of tools to achieve this, and there are no good or bad, there are solutions to different scenarios, so we are going to review some tools to manage the state of the design system.

• use state example.
• Redux example.
• context Api example.

[701i]

State Diagram of Booking System

A sugestion of the State Flow

The first planning was in the https://github.com/Platzi-Master-C9/knowledge-base/pull/14/

It can be modify by changes in the App, new features or by recomendations It can be adapted to the State Management tool will use (Redux, React Query, Vuex, etc.)

  graph TD
      BookingSystem -->
      A(GuessUser) -->|Login| B(User)
      B -->|Logout| A

      B -->|SearchPlace| C(Results)
      C -->|+Fav/-UnFav| E(FavList)
      E --> C
      C --> G(PlaceDetails)
      E --> G
      G -->|+Fav/-UnFav| E

      B -->|+NewNotification| D(NotificacionCounter)
      D -->|+NewNotification| F(NotificationList)
      F -->|-ReadNotification| D
      F --> H(Messages)

    subgraph Accounts
        A
        B
    end

    subgraph Places
        C
        E
        G
    end

    subgraph Notifications
    D
    F
    end