Skip to content

Instantly share code, notes, and snippets.

@victorb

victorb/machine.js

Last active January 2, 2020 11:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save victorb/0e80c95b68d0979e56fab46825e6e820 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save victorb/0e80c95b68d0979e56fab46825e6e820 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. victorb revised this gist Jan 2, 2020. 1 changed file with 12 additions and 161 deletions.
    173 changes: 12 additions & 161 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,174 +18,25 @@ const createWebSocket = (address, onMessage) => {
    // now the visualizer should update automatically on filechange

    // end dev tools
    const isLoggedIn = (ctx) => {
    return ctx.is_logged_in === true
    }

    const isNotLoggedIn = (ctx) => {
    return ctx.is_logged_in === false
    }

    const hasLinkedFigmaAccount = (ctx) => {
    return ctx.has_figma_account_linked === true
    }

    const hasNotLinkedFigmaAccount = (ctx) => {
    return ctx.has_figma_account_linked === false
    }

    const doLogin = assign({
    is_logged_in: () => true
    });

    const doLogout = assign({
    is_logged_in: () => false
    });

    const doFigmaLink = assign({
    has_figma_account_linked: () => true
    });

    const loginState = {
    initial: 'normal',
    onDone: {
    target: 'apps'
    },
    on: {
    '': [{
    cond: isLoggedIn,
    target: 'apps'
    }]
    },
    states: {
    normal: {
    on: {
    EMAIL_LOGIN: 'try_email',
    FIGMA_LOGIN: 'try_figma'
    }
    },
    try_email: {
    on: {
    SUCCESS: 'success',
    FAILURE: 'failure'
    }
    },
    try_figma: {
    on: {
    SUCCESS: {
    actions: doFigmaLink,
    target: 'success'
    },
    FAILURE: 'failure'
    }
    },
    success: {
    entry: doLogin,
    type: 'final'
    },
    failure: {
    on: {
    RETRY: 'normal'
    }
    }
    }
    }

    const logoutState = {
    on: {
    '': [{
    target: 'login',
    actions: doLogout
    }]
    }
    }

    const appsState = {
    on: {
    go_to_import: 'import',
    '': [{
    target: 'login',
    cond: isNotLoggedIn
    }]
    }
    }

    const importState = {
    initial: 'normal',
    on: {
    '': [{
    target: 'login',
    cond: isNotLoggedIn
    }, {
    target: 'link',
    cond: hasNotLinkedFigmaAccount
    }]
    },
    states: {
    normal: {on: {do_import: 'imported'}},
    imported: {type: 'final'}
    }
    }

    const linkState = {
    initial: 'normal',
    onDone: {
    target: 'import'
    },
    const linkingMachine = Machine({
    id: 'linking-test',
    initial: 'logged_out',
    states: {
    normal: {
    logged_out: {
    on: {
    LINK_ACCOUNT: 'link_account'
    LOGIN: 'login'
    }
    },
    link_account: {
    login: {
    on: {
    SUCCESS: 'success',
    FAILURE: 'failure'
    EXISTING_EMAIL: 'logged_in',
    NEW_EMAIL: 'create_new_account',
    EXISTING_FIGMA_EMAIL: 'link_previous_account'
    }
    },
    success: {
    entry: doFigmaLink,
    type: 'final'
    },
    failure: {
    on: {
    RETRY: 'normal'
    }
    }
    }
    }

    // master account vs linked accounts
    //
    // how to keep track of this in the context?
    //
    // can auth via email or passwordless

    const loginMachine = Machine({
    id: 'login-test',
    initial: 'login',
    context: {
    is_logged_in: false,
    has_figma_account_linked: false
    },
    // on: {
    // go_to_apps: 'apps',
    // go_to_import: 'import',
    // go_to_logout: 'logout',
    // go_to_login: 'login'
    // },
    actions: {
    doLogin
    },
    guards: {
    isNotLoggedIn
    },
    states: {
    login: loginState,
    logout: logoutState,
    apps: appsState,
    import: importState,
    link: linkState
    logged_in: {type: 'final'},
    create_new_account: {on: {'': [{target: 'logged_in'}]}},
    link_previous_account: {on: {'': [{target: 'logged_in'}]}},
    }
    })
  2. victorb revised this gist Jan 2, 2020. 1 changed file with 26 additions and 0 deletions.
    26 changes: 26 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,23 @@
    // useful to use together with ws-on-change for auto-updating editor
    const setContentAndUpdate = (content) => {
    ace.edit('brace-editor').setValue(content)
    document.querySelector('button[data-variant=secondary]').click()
    }

    const createWebSocket = (address, onMessage) => {
    const ws = new WebSocket(address)
    ws.onmessage = (msg) => {
    onMessage(msg.data)
    }
    }

    // usage of ^ with ws-on-change
    // copy paste the two functions above to the console (setContentAndUpdate and createWebSocket)
    // then execute:
    // createWebSocket("ws://localhost:9090", setContentAndUpdate)
    // now the visualizer should update automatically on filechange

    // end dev tools
    const isLoggedIn = (ctx) => {
    return ctx.is_logged_in === true
    }
    @@ -136,6 +156,12 @@ const linkState = {
    }
    }

    // master account vs linked accounts
    //
    // how to keep track of this in the context?
    //
    // can auth via email or passwordless

    const loginMachine = Machine({
    id: 'login-test',
    initial: 'login',
  3. victorb revised this gist Jan 2, 2020. No changes.
  4. victorb created this gist Jan 2, 2020.
    165 changes: 165 additions & 0 deletions machine.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,165 @@
    const isLoggedIn = (ctx) => {
    return ctx.is_logged_in === true
    }

    const isNotLoggedIn = (ctx) => {
    return ctx.is_logged_in === false
    }

    const hasLinkedFigmaAccount = (ctx) => {
    return ctx.has_figma_account_linked === true
    }

    const hasNotLinkedFigmaAccount = (ctx) => {
    return ctx.has_figma_account_linked === false
    }

    const doLogin = assign({
    is_logged_in: () => true
    });

    const doLogout = assign({
    is_logged_in: () => false
    });

    const doFigmaLink = assign({
    has_figma_account_linked: () => true
    });

    const loginState = {
    initial: 'normal',
    onDone: {
    target: 'apps'
    },
    on: {
    '': [{
    cond: isLoggedIn,
    target: 'apps'
    }]
    },
    states: {
    normal: {
    on: {
    EMAIL_LOGIN: 'try_email',
    FIGMA_LOGIN: 'try_figma'
    }
    },
    try_email: {
    on: {
    SUCCESS: 'success',
    FAILURE: 'failure'
    }
    },
    try_figma: {
    on: {
    SUCCESS: {
    actions: doFigmaLink,
    target: 'success'
    },
    FAILURE: 'failure'
    }
    },
    success: {
    entry: doLogin,
    type: 'final'
    },
    failure: {
    on: {
    RETRY: 'normal'
    }
    }
    }
    }

    const logoutState = {
    on: {
    '': [{
    target: 'login',
    actions: doLogout
    }]
    }
    }

    const appsState = {
    on: {
    go_to_import: 'import',
    '': [{
    target: 'login',
    cond: isNotLoggedIn
    }]
    }
    }

    const importState = {
    initial: 'normal',
    on: {
    '': [{
    target: 'login',
    cond: isNotLoggedIn
    }, {
    target: 'link',
    cond: hasNotLinkedFigmaAccount
    }]
    },
    states: {
    normal: {on: {do_import: 'imported'}},
    imported: {type: 'final'}
    }
    }

    const linkState = {
    initial: 'normal',
    onDone: {
    target: 'import'
    },
    states: {
    normal: {
    on: {
    LINK_ACCOUNT: 'link_account'
    }
    },
    link_account: {
    on: {
    SUCCESS: 'success',
    FAILURE: 'failure'
    }
    },
    success: {
    entry: doFigmaLink,
    type: 'final'
    },
    failure: {
    on: {
    RETRY: 'normal'
    }
    }
    }
    }

    const loginMachine = Machine({
    id: 'login-test',
    initial: 'login',
    context: {
    is_logged_in: false,
    has_figma_account_linked: false
    },
    // on: {
    // go_to_apps: 'apps',
    // go_to_import: 'import',
    // go_to_logout: 'logout',
    // go_to_login: 'login'
    // },
    actions: {
    doLogin
    },
    guards: {
    isNotLoggedIn
    },
    states: {
    login: loginState,
    logout: logoutState,
    apps: appsState,
    import: importState,
    link: linkState
    }
    })