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 doFetchLocations = () => fetch('https://api.myjson.com/bins/gf800').then(res => res.json())

const doFormSubmiting = () =>  fetch('https://api.myjson.com/bins/gf800').then(res => res.json())
  
const states = {
  IDLE: 'IDLE',
  LOADING: 'LOADING',
  SUCCESS: 'SUCCESS',
  ERROR: 'ERROR',
  READY: 'READY'
}

const readyStateEvents = {
  SELECT_TAB: 'SELECT_TAB',
  SUBMIT_FORM: 'SUBMIT_FORM'
}

const formStates = {
  IDLE: 'IDLE',
  SUBMITING: 'SUBMITING',
  SUBMITED: 'SUBMITED',
  SUBMIT_ERROR: 'SUBMIT_ERROR'
}

const formEvents = {
  FETCH_LOCATIONS: 'FETCH_LOCATIONS',
  RETRY_FETCH_LOCATIONS: 'RETRY_FETCH_LOCATIONS',
  SUBMIT_FORM: 'SUBMIT_FORM',
  RETRY_SUBMIT_FORM: 'RETRY_SUBMIT_FORM'
}

const tabs = {
  ROUND: 'ROUND',
  SINGLE: 'SINGLE',
  MULTIPLE: 'MULTIPLE'
}

const tabEvents = {
  SELECT_TAB: 'SELECT_TAB'
}

const tabConfig = {
  [tabs.ROUND]: {
    DATE_PICKER: 'RANGE',
    SWAP: true,
    FORM_ROWS: 1
  },
  [tabs.SINGLE]: {
    DATE_PICKER: 'SINGLE',
    SWAP: true,
    FORM_ROWS: 1
  },
  [tabs.MULTIPLE]: {
    DATE_PICKER: 'SINGLE',
    SWAP: false,
    FORM_ROWS: 3
  }
}

const inputStates = {
  CHANGING: 'CHANGING',
  SELECTED: 'SELECTED',
  FOCUSED: 'FOCUSED'
}

const inputEvents = {
  ON_CHANGE: 'ON_CHANGE',
  ON_FOCUS: 'ON_FOCUS',
  ON_SELECT: 'ON_SELECT'
}

const formRow = {
  rowId: 0,
  from: '',
  to: '',
  date: ''
}

const formMachine = Machine({
  id: 'formMachine',
  initial: states.IDLE,
  context: {
    selectedTab: tabs.ROUND,
    formRows: []
  },
  states: {
    [states.IDLE]: {
      on: {
        FETCH_LOCATIONS: states.LOADING
      }
    },
    [states.LOADING]: {
      invoke: {
        id: 'fetchLocations',
        src: doFetchLocations,
        onDone: {
          target: states.READY
        },
        onError: {
          target: states.ERROR
        }
      }
    },
    [states.READY]: {
      initial: formStates.IDLE,
      states: {
        [formStates.IDLE]: {
          initial: inputStates.CHANGING,
          on: {
            [formEvents.SUBMIT_FORM]: {
              target: formStates.SUBMITING
            },
             [readyStateEvents.SELECT_TAB]: {
              actions: 'selectTab'
            },
            [inputEvents.ON_CHANGE]: {
              target: [`.${inputStates.CHANGING}`]
            },
             [inputEvents.ON_FOCUS]: {
              target: [`.${inputStates.FOCUSED}`]
            },
             [inputEvents.ON_SELECT]: {
              target: [`.${inputStates.SELECTED}`]
            },
          },
          states: {
            [inputStates.CHANGING]: {},
            [inputStates.FOCUSED]: {},
            [inputStates.SELECTED]: {},
          }
        },
        [formStates.SUBMITING]: {
          invoke: {
            id: 'formSubmiting',
            src: doFormSubmiting,
            onDone: {
              target: formStates.IDLE
            },
            onError: {
              target: formStates.SUBMIT_ERROR
            }
          }
        },
        [formStates.SUBMIT_ERROR]: {
          on: {
            [formEvents.RETRY_SUBMIT_FORM]: {
              target: formStates.SUBMITING
            }
          }
        }
      }
    },
    [states.ERROR]: {
      on: {
        [formEvents.FETCH_LOCATIONS]: {
          target: states.LOADING
        }
      }
    }
  }
},{
  actions: {
    selectTab: assign({
      selectedTab: (ctx, e) => tabs.MULTIPLE
    })
  }
})