Generated by XState Viz: https://xstate.js.org/viz

machine.js

// Master machine for radio buttons
const inputGroupMachine = Machine({
  id: 'input-group',
  initial: 'emptied',
  states: {
    emptied: {
      on: {
        '': {
          actions: 'loadNew',
          target: 'pending',
        },
      }
    },
    pending: {
      on: {
        REJECT: 'failure',
        FULFILL: 'distributing',
      }
    },
    failure: {
      on: {
        RETRY: 'pending',
      }
    },
    distributing: { // render indivudal items array
      on: {
        COMPLETE: 'selectable',
        // REJECT: 'failure',
      }
    },
    selectable: {
      initial: 'empty',
      states: {
        empty: {
          on: {
            FILL: 'full',
            SKIP: '#skip-current',
          }
        },
        full: {
          on: {  
            FILL: 'full', // EMPTY  old item
            SKIP: '#skip-current',
            SUBMIT: 'submitting',
            // SELECT: 'sending'
          }
        },
        submitting: {
          on: {
            COMPLETE: '#empty-old'
          }
        },
      }
    },
    skipping: {
      id: 'skip-current',
      on: {
        '': {
          actions: 'skipCurrent',
          target: 'emptying',
        },
      }
    },
    emptying: {
      id: 'empty-old',
      on: {
        '': {
          actions: 'emptyOld',
          target: 'emptied',
        },
      }
    },
  }
},
{
  actions: {
    emptyOld: (context, event) => {
      console.log('loading new group...')
    },
    loadNew: (context, event) => {
      console.log('loading new group...')
    },
    skipCurrent: (context, event) => {
      console.log('skip this...')
    },
  },
}
);