Skip to content

Instantly share code, notes, and snippets.

@arcdev1

arcdev1/machine.js

Last active November 26, 2019 19:17
Download ZIP

Revisions

  1. arcdev1 revised this gist Nov 26, 2019. No changes.
  2. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -72,6 +72,13 @@
    type: 'final'
    }
    }
    },{
    guards: {
    isEmailBlank: ctx => ctx.email == null || ctx.email.trim().length < 1
    },
    actions: {
    cacheEmail: assign({email: (_,e)=>e.email})
    },
    })

    // const appMachine = Machine({
  3. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 120 additions and 93 deletions.
    213 changes: 120 additions & 93 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,34 @@
    ready: {
    type: 'parallel',
    states: {
    email: {},
    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',
    @@ -47,95 +74,95 @@
    }
    })

    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})
    }
    })
    // 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})
    // }
    // })
  4. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 9 additions and 13 deletions.
    22 changes: 9 additions & 13 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -15,8 +15,7 @@
    initial: 'ready',
    context: {
    email: null,
    password: null,
    rememberMe: false
    password: null
    },
    states: {
    ready: {
    @@ -25,16 +24,16 @@
    email: {},
    password: {},
    rememberMe: {
    initial: 'no',
    states: {
    initial: 'unchecked',
    checked: {
    yes: {
    on: {
    TOGGLE_REMEMBER_ME: 'unchecked'
    TOGGLE_REMEMBER_ME: 'no'
    }
    },
    unchecked: {
    on: {
    TOGGLE_REMEMBER_ME: 'checked'
    no: {
    on: {
    TOGGLE_REMEMBER_ME: 'yes'
    }
    }
    }
    @@ -43,11 +42,8 @@
    },
    waiting: {},
    loggedIn: {
    type: 'final',
    data: {
    session: (_, e) => e.session
    }
    },
    type: 'final'
    }
    }
    })

  5. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 22 additions and 2 deletions.
    24 changes: 22 additions & 2 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -19,15 +19,35 @@
    rememberMe: false
    },
    states: {
    ready: {},
    ready: {
    type: 'parallel',
    states: {
    email: {},
    password: {},
    rememberMe: {
    states: {
    initial: 'unchecked',
    checked: {
    on: {
    TOGGLE_REMEMBER_ME: 'unchecked'
    }
    },
    unchecked: {
    on: {
    TOGGLE_REMEMBER_ME: 'checked'
    }
    }
    }
    }
    }
    },
    waiting: {},
    loggedIn: {
    type: 'final',
    data: {
    session: (_, e) => e.session
    }
    },
    error: {}
    }
    })

  6. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 32 additions and 3 deletions.
    35 changes: 32 additions & 3 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -74,8 +74,36 @@
    CLICK_LOGOUT: 'loggingOut'
    },
    states: {
    builderMenu: {},
    profileMenu: {}
    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: {
    @@ -91,6 +119,7 @@
    },
    actions: {
    cacheSession:
    assign({session: (_ , e) => e.session || e.data.session})
    assign({session: (_ , e) => e.session || e.data.session}),
    clearSession: assign({session: null})
    }
    })
  7. arcdev1 revised this gist Nov 26, 2019. 1 changed file with 20 additions and 1 deletion.
    21 changes: 20 additions & 1 deletion machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -58,7 +58,26 @@
    }
    }
    },
    loggedIn: {},
    loggingOut: {
    invoke: {
    id: 'lougout-machine',
    src: 'logoutMachine',
    onDone: {
    target: 'anonymous',
    actions: 'clearSession'
    }
    }
    },
    loggedIn: {
    type: 'parallel',
    on: {
    CLICK_LOGOUT: 'loggingOut'
    },
    states: {
    builderMenu: {},
    profileMenu: {}
    }
    },
    signingUp: {
    invoke: {
    id: 'signup-machine',
  8. arcdev1 created this gist Nov 26, 2019.
    77 changes: 77 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@

    // 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,
    rememberMe: false
    },
    states: {
    ready: {},
    waiting: {},
    loggedIn: {
    type: 'final',
    data: {
    session: (_, e) => e.session
    }
    },
    error: {}
    }
    })

    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'
    }
    }
    },
    loggedIn: {},
    signingUp: {
    invoke: {
    id: 'signup-machine',
    src: 'signupMacine',
    onDone: {
    target: 'loggedIn',
    actions: 'cacheSession'
    }
    }
    }
    },
    actions: {
    cacheSession:
    assign({session: (_ , e) => e.session || e.data.session})
    }
    })