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 LOAD_OFFICE = 'LOAD_OFFICE';
const LOAD_OFFICE_SUCCESS = 'LOAD_OFFICE_SUCCESS';
const LOAD_OFFICE_FAIL = 'LOAD_OFFICE_FAIL';

const SELECT_AREA = 'SELECT_AREA';
const UNSELECT_AREA = 'UNSELECT_AREA';

const SELECT_TEAM = 'SELECT_TEAM';

const SELECT_OBJECT = 'SELECT_OBJECT';

const SAVE_ASSIGNMENTS = 'SAVE_ASSIGNMENTS';
const SAVE_ASSIGNMENTS_SUCCESS = 'SAVE_ASSIGNMENTS_SUCCESS';
const SAVE_ASSIGNMENTS_FAIL = 'SAVE_ASSIGNMENTS_FAIL';

const SELECT_AREA_TYPE = 'SELECT_AREA_TYPE';
const UNSELECT_AREA_TYPE = 'UNSELECT_AREA_TYPE';

const CANCEL = 'CANCEL';
  
  const fetchMachine = Machine({
    id: 'Root',

    context: {
      officeId: null,
      selectedAreaId: null,
      selectedTeamId: null,
      selectedObjectIds: null,
      selectedAreaType: null,
    },

    type: 'parallel',

    states: {
      // NOTE: main page state
      main: {
        invoke: {
          id: 'MainService',
          src: 'mainService',
        },

        on: {
          [LOAD_OFFICE_SUCCESS]: {
            target: '#Root.main.idle',
            // this action is configured at runtime to allow machine to update react context
            actions: 'updateEntities',
          },

          [LOAD_OFFICE_FAIL]: {
            target: '#Root.main.idle',
          },

          [SAVE_ASSIGNMENTS_SUCCESS]: {
            target: '#Root.main.idle',
          },

          [SAVE_ASSIGNMENTS_FAIL]: {
            target: '#Root.main.idle',
            actions: 'updateEntities',
          },

          [CANCEL]: {
            target: '#Root.main.idle',
            actions: 'reset',
          },
        },

        initial: 'loading',

        states: {
          loading: {
            entry: 'loadOffice',
          },

          // default state
          idle: {
            on: {
              [SELECT_AREA]: {
                target: '#Root.main.selected',
                actions: 'selectArea',
              },
            },
          },

          // area selected
          selected: {
            on: {
              [UNSELECT_AREA]: {
                target: '#Root.main.idle',
                actions: 'unselectArea',
              },

              [SELECT_TEAM]: {
                target: '#Root.main.assigning',
                actions: 'selectTeam',
              },
            },
          },

          // seat assignment
          assigning: {
            on: {
              [SELECT_OBJECT]: {
                actions: 'selectObject',
              },
              [SAVE_ASSIGNMENTS]: {
                actions: 'saveAssignments',
              },
            },
          },
        },
      },

      // NOTE: hold stuff like modal states, error states, etc
      global: {
        type: 'parallel',

        states: {
          selection: {
            initial: 'unselected',
            states: {
              selected: {},
              unselected: {},
            },
            on: {
              [SELECT_AREA_TYPE]: {
                target: '#Root.global.selection.selected',
                actions: 'selectAreaType',
              },
              [UNSELECT_AREA_TYPE]: {
                target: '#Root.global.selection.unselected',
                actions: 'unselectAreaTypye',
              },
            },
          },
        },
      },
    },
  });