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 fetchMachine = Machine({
  id: 'metricSettingsMachine',
  initial: 'collapsed',
  context: {
    original: {
      threshold: 0,
      occurrence: 0,
      duration: 0
    },
    threshold: 0,
    occurrence: 0,
    duration: 0,
    notificationChannels: []
  },
  states: {
    collapsed: {
      on: {
        EXPAND: { target: 'expanded' }
      }
    },
    expanded: {
      type: 'parallel',
      on: {
        REMOVE: {
          target: 'collapsed',
          actions: [() => console.log('removing?')]
        }
      },
      states: {
        validationStatus: {},
        modificationStatus: {
          initial: 'init',
          on: {
            EDIT_THRESHOLD: undefined,
            EDIT_TIMINUTES: undefined,
            EDIT_NOTIFICATIONS: undefined,
            NEXT: undefined,
            '*': { target: '.init' }
          },
          states: {
            init: {
              always: [
                { target: 'modified', cond: 'hasChanges' },
                { target: 'unmodified' }
              ]
            },
            modified: {},
            unmodified: {}
          }
        },
        mode: {
          initial: 'reading',
          on: {
            EDIT_THRESHOLD: { target: '.editing.threshold' },
            EDIT_TIMINUTES: { target: '.editing.timinutes' },
            EDIT_NOTIFICATIONS: { target: '.editing.notifications' }
          },
          states: {
            reading: {},
            editing: {
              initial: 'threshold',
              states: {
                threshold: {
                  on: {
                    NEXT: 'timinutes',
                    UPDATE_THRESHOLD: {
                      actions: ['updateThreshold']
                    }
                  }
                },
                timinutes: {
                  on: {
                    NEXT: 'notifications'
                  }
                },
                notifications: {
                  on: {
                    NEXT: '#metricSettingsMachine.expanded.mode.reading'
                  }
                }
              }
            }
          }
        }
      }
    }
  }
});