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

machine.js

const timelineUiMachine = {
  initial: 'loading_timeline',
  states: {
    loading_timeline: {
      onEntry: ['fetchTimelineData'],
      on: {
        SUCCESS: [
          {
            target: 'viewing_empty_timeline',
            cond: 'isDataOutOfRange',
            actions: ['setDbTimelineData', 'setPreviousProgramDate']
          }, {
            target: 'viewing_timeline',
            cond: 'isDataValid',
            actions: ['setDbTimelineData', 'setOptions']
          }, {
            target: 'error_loading_timeline'
          }
        ],
        FAILURE: {
          target: 'error_loading_timeline'
          // actions: ['setError', 'showError']
        }
      }
    },
    error_loading_timeline: {
      on: {
        RETRY: 'loading_timeline',
        DATE_CHANGE: {
          target: 'loading_timeline',
          actions: ['setHistoric']
        }
      }
    },
    viewing_timeline: {
      onEntry: ['calcLocalTimelineData'],
      on: {
        DATE_CHANGE: {
          target: 'loading_timeline',
          actions: ['setHistoric']
        },
        PLAN_FINISHED: {
          target: 'loading_timeline',
          actions: ['showAlertRefetchPlan']
        }
      }
    },
    viewing_empty_timeline: {
      on: {
        DATE_CHANGE: {
          target: 'loading_timeline',
          actions: ['setHistoric']
        }
      }
    }
  }
}

const timelineActionsMachine = {
  initial: 'inactive',
  states: {
    inactive: {
      onEntry: ['clearSelectedItem', 'calcLocalTimelineData'],
      on: {
        SHOW_ACTIONS: { target: 'active', actions: ['setSelectedItem'] }
      }
    },
    active: {
      onEntry: ['calcLocalTimelineData'],
      on: {
        LENGTH_ACTION: { target: 'active', actions: ['lengthAction'] },
        BACK_ACTION: { target: 'active', actions: ['backAction'] },
        FORWARD_ACTION: { target: 'active', actions: ['fwdAction'] },
        APPLY_ACTION: { target: 'submitting', actions: ['submitSelectedItem'] },
        CANCEL_ACTION: { target: 'inactive' }
      }
    },
    submitting: {
      on: {
        SUCCESS: { target: 'inactive', actions: ['updateDbTimelineData', 'calcLocalTimelineData'] },
        FAILURE: { target: 'inactive', actions: ['updateDbTimelineData', 'calcLocalTimelineData'] }
      }
    },
    error: { }
  }
}

const timelineMachine = Machine({
  id: 'timeline',
  type: 'parallel',
  context: {
    dbTimelineData: [], // timeline synced with database
    timelineData: [], // local timelineData (may be merged / edited in various ways)
    options: {},
    selectedItem: null,
    selectedResource: null,
    historicDate: new Date(),
    previousProgramDate: null
  },
  states: {
    ui: { ...timelineUiMachine },
    timelineActions: { ...timelineActionsMachine }
  }
})