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)
  
  // will prevent components from adding more constraints
  const sendMsgToBus = (msg) => console.log(msg)
  
  const queryMachine = Machine({
    id: 'queryBuilder',
    initial: 'disabled',
    context: {
      count: 0
    },
    states: {
      disabled: {
        on: {
          CONSTRAINT_ADDED: {
            target: 'idle',
            actions: 'addConstraint'
          }
          
        }
      },
      idle: {
        on: {
          CONSTRAINT_ADDED: [
            {
              target: 'idle',
              cond: ctx => ctx.count < 5,
              actions: 'addConstraint'
            },
            {
              target: 'maxConstraints'
            }
          ],
          CONSTRAINT_REMOVED: [
            {
              target: 'disabled',
              cond: ctx => ctx.count === 1,
              actions: 'removeConstraint'
            },
            {
              target: 'idle',
              actions: 'removeConstraint'
            }
          ]
        }
      },
      maxConstraints: {
        entry: 'lockConstraints',
        on: {
          CONSTRAINT_REMOVED: {
            target: 'idle',
            actions: ['removeConstraint', 'unlockConstraints']
          }
        }
      }
    }
  },{
    actions: {
      addConstraint: assign({
        count: ctx => ctx.count + 1
      }),
      removeConstraint: assign({
        count: ctx => ctx.count - 1
      }),
      lockConstraints: () => sendMsgToBus('CONSTRAINTS_LOCKED'),
      unlockConstraints: () => sendMsgToBus('CONSTRAINTS_UNLOCKED')
    }
  });