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 metricSetting = Machine({
    id: 'metricSetting',
    initial: 'unpopulated',
    context: {
      original: {
        threshold: 0,
        duration: 0,
        occurrence: 0,
        notifications: []
      },
      threshold: 0,
      duration: 0,
      occurrence: 0,
      notifications: []
    },
    states: {
      unpopulated: {
        on: {
          ACTIVATE: 'populated'
        }
      },
      populated: {
        type: 'parallel',
        on: {
          REMOVE: {
            target: 'unpopulated',
            actions: ['clearMetric']
          }
        },
        states: {
          status: {
            initial: 'init',
            states: {
              init: {
                on: {
                  "": [
                {target: 'modified', cond: 'isChanged'},
                { 
                  target: 'unmodified'
                }
                ]
                  
                }
              },
              unmodified: {},
              modified: {}
            }
          },
          mode: {
            initial: 'read',
            on: {
              
              EDIT_THRESHOLD: { target: '.edit.threshold' },
              EDIT_TIMINUTES: { target: '.edit.timinutes' },
              EDIT_NOTIFICATIONS: { target: '.edit.notifications' }
            },
            states: {
              read: {},
              edit: {
                initial: 'threshold',
                on: {
                  SAVE: { target: 'saving' }
                },
                states: {
                  threshold: {
                    on: {
                      NEXT: {target: 'timinutes'},
                      UPDATE_THRESHOLD: {
                        actions: ['updateThreshold']
                      }
                    }
                  },
                  timinutes: {
                    on: {
                      NEXT: {target: 'notifications'},
                      UPDATE_OCCURRENCE: {
                        actions: ['updateOccurrence']
                      },
                      UPDATE_DURATION: {
                        actions: ['updateDuration']
                      }
                    }
                  },
                  notifications: {
                    
                  }
                }
              },
              saving: {
                on: {
                  SUCCESS: 'saved'
                }
              },
              saved: {
                entry: 'updateOriginals',
                after: {
                  1000: 'read'
                }
              }
            }
          },
          
        }
      }
    }
  }, {
    guards: {
      isChanged: () => false
    }
  });