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 loginMachine = Machine({
    id: 'login',
    initial: 'ready',
    context: {
      email: null,
      password: null
    },
    states: {
      ready: {
        type: 'parallel',
        states: {
          email: {
            initial: 'unvalidated',
            states: {
              unvalidated: {
                on: {
                  EMAIL_CHANGE: {
                    actions: 'cacheEmail'
                  },
                  EMAIL_BLUR: [{
                    cond: 'isEmailBlank',
                    target: 'validated.empty'
                  }, {
                    cond: 'isEmailBadFormat',
                    target: 'validated.badFormat'
                  }, {
                    target: 'validated.valid'
                  }]
                }
              },
              validated: {
                states: {
                  valid: {},
                  badFormat: {},
                  empty: {},
                }                
              }
            }
          },
          password: {},
          rememberMe: {
            initial: 'no',
            states: {
              yes: {
                on: {
                  TOGGLE_REMEMBER_ME: 'no'
                }
              },
              no: {
                on: {
                  TOGGLE_REMEMBER_ME: 'yes'
                }
              }
            }
          }
        }
      },
      waiting: {},
      loggedIn: {
        type: 'final'
      }
    }
  },{
    guards: {
      isEmailBlank: ctx => ctx.email == null || ctx.email.trim().length < 1
    },
    actions: {
      cacheEmail: assign({email: (_,e)=>e.email})
    },
  })
  
  // const appMachine = Machine({
  //   id: 'app',
  //   initial: 'anonymous',
  //   context: {
  //     session: null
  //   },
  //   states: {
  //     anonymous: {
  //       on: {
  //         CLICK_LOGIN: 'loggingIn',
  //         CLICK_JOIN: 'signingUp',
  //         AUTHENTICATED: {
  //           target: 'loggedIn',
  //           actions: 'cacheSession'
  //         }
  //       }
  //     },
  //     loggingIn: {
  //       invoke: {
  //         id: 'login-machine',
  //         src: loginMachine,
  //         onDone: {
  //           target: 'loggedIn',
  //           actions: 'cacheSession'
  //         }
  //       }
  //     },
  //     loggingOut: {
  //       invoke: {
  //         id: 'lougout-machine',
  //         src: 'logoutMachine',
  //         onDone: {
  //           target: 'anonymous',
  //           actions: 'clearSession'
  //         }
  //       }
  //     },
  //     loggedIn: {
  //       type: 'parallel',
  //       on: {
  //         CLICK_LOGOUT: 'loggingOut'
  //       },
  //       states: {
  //         builderMenu: {
  //           initial: 'closed',
  //           states: {
  //             open: {
  //               on: {
  //                 TOGGLE_BUILDER_MENU: 'closed'
  //               }
  //             },
  //             closed: {
  //               on: {
  //                 TOGGLE_BUILDER_MENU: 'open'
  //               }
  //             }
  //           }
  //         },
  //         profileMenu: {
  //                       initial: 'closed',
  //           states: {
  //             open: {
  //               on: {
  //                 TOGGLE_PROFILE_MENU: 'closed'
  //               }
  //             },
  //             closed: {
  //               on: {
  //                 TOGGLE_PROFILE_MENU: 'open'
  //               }
  //             }
  //           }
  //         }
  //       }
  //     },
  //     signingUp: {
  //       invoke: {
  //         id: 'signup-machine',
  //         src: 'signupMacine',
  //         onDone: {
  //           target: 'loggedIn',
  //           actions: 'cacheSession'        
  //         }
  //       }
  //     }
  //   },
  //   actions: {
  //     cacheSession: 
  //       assign({session: (_ , e) => e.session || e.data.session}),
  //     clearSession: assign({session: null})
  //   }
  // })