Generated by XState Viz: https://xstate.js.org/viz

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const machine = Machine({
    id: 'example',
    context: {
      modalState: 'closed',
      menuState: 'closed',
      cartStatus: 'empty',
      intermediateStep: ''
    },
    type: 'parallel',
    states: {
      loginState: {
        initial: 'loggedOut',
        states: {
          loggedOut: {
            on: {
              LOGIN: 'intermediate',
              JUMP: 'loggedIn'
            }
          },
          intermediate: {
            on: {
              '': {
                target: 'loggedIn',
                actions: [
                  assign({
                    intermediateStep: 'hit'
                  })
                ]
              }
            }
          },
          loggedIn: {
            on: {
              LOGOUT: 'loggedOut'
            },
            type: 'parallel',
            states: {
              modal: {
                initial: 'closed',
                states: {
                  closed: {
                    entry: assign({
                      modalState: 'closed'
                    }),
                    on: {
                      OPEN_MODAL: 'opened'
                    }
                  },
                  opened: {
                    entry: assign({
                      modalState: 'opened',
                      cartStatus: 'full'
                    }),
                    on: {
                      CLOSE_MODAL: 'closed',
                      CLOSE_MODAL_AND_EMPTY_CART: {
                        target: 'closed',
                        actions: [
                          assign({ cartStatus: 'empty'})
                        ]
                      }
                    }
                  }
                }
              },
              menu: {
                initial: 'closed',
                states: {
                  closed: {
                    entry: assign({
                      modalState: 'closed'
                    }),
                    on: {
                      OPEN_MENU: 'opened'
                    }
                  },
                  opened: {
                    entry: assign({
                      modalState: 'opened',
                      cartStatus: 'full'
                    }),
                    on: {
                      CLOSE_MENU: 'closed',
                      CLOSE_MENU_AND_EMPTY_CART: {
                        target: 'closed',
                        actions: [
                          assign({ cartStatus: 'empty'})
                        ]
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  });