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: {
        FETCH: 'pending',
      }
    },
    pending: {
      on: {
        REJECT: 'failure',
        FULFILL: 'distributing',
      }
    },
    failure: {
      on: {
        RETRY: 'pending',
      }
    },
    distributing: { // indivudal items array
      on: {
        COMPLETE: 'selectable',
        // REJECT: 'failure',
      }
    },
    selectable: {
      initial: 'empty',
      states: {
        empty: {
          on: {
            'FILL': 'full',
          }
        },
        full: {
          on: {
            FILL: 'full', // EMPTY  old item
            SUBMIT: 'submitting',
            // SELECT: 'sending'
          }
        },
        submitting: {
          on: {
            COMPLETE: '#clear-old'
          }
        },
      }
    },
    clearing: {
      id: 'clear-old',
      on: {
        DONE: 'emptied'
      }
    }
  }
});