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 commitMachine = Machine({
    id: 'commit',
    context: {
      newBranchName: '',
      existingBranchName: ''
    },
    type: 'parallel',
    states: {
      foo: {
        initial: 'emptySelection',
        states: {
          emptySelection: {
            on: {
              SELECTION_CHANGE: 'validSelection'
            }
          },
          validSelection: {
            on: {
              SUBMIT: 'submitting'
            }
          },
          invalidSelection: {},
          submitting: {
            on: {
              SUCCESS: [
                {
                  target: 'emptySelection',
                  in: '#commit.branch.existingBranch',
                  actions: ['notify', 'clearSelection']
                },
                {
                  target: 'success',
                }
              ],
              ERROR: 'validSelection'
            }
          },
          success: {
            on: {
              DONE: {
                target: 'emptySelection',
                actions: ['clearSelection', 'setExistingBranch']
              }
            }
          }
        }
      },
      branch: {
        initial: 'newBranch',
        states: {
          newBranch: {
            on: {
              NEW_BRANCH_NAME_CHANGE: {
                actions: 'setNewBranchName'
              },
              SET_EXISTING_BRANCH: [
                {target: 'existingBranch', cond: (context) => context.existingBranchName !== ''},
                {target: 'existingBranchEmpty'}
              ]
            }
          },
          existingBranch: {
            on: {
              SET_NEW_BRANCH: 'newBranch',
              EXISTING_BRANCH_NAME_CHANGE: [{target: 'existingBranchEmpty', cond: (context, event) => event.value === ''}, {
                actions: 'setExistingBranchName'
              }]
            }
          },
          existingBranchEmpty: {
            on: {
              EXISTING_BRANCH_NAME_CHANGE: {
                target: 'existingBranch',
                actions: 'setExistingBranchName'
              }
            }
            
          },
          newBranchEmpty: {}
        }
      }
    }
  },
  {
    actions: {
      setExistingBranch: send('SET_EXISTING_BRANCH'),
      setNewBranchName: assign({
        newBranchName: (context, event) => event.value
      }),
      setExistingBranchName: assign({
        existingBranchName: (context, event) => event.value
      }),
    }
  });