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

machine.js

const groupGoalMachine = Machine({
  id: 'groupGoal',
  initial: 'listing',
  context: {
    goal:null
  },
  states: {
    listing: {
      entry: ['emptyGoal'],
      on: {
        ADD: {target:'adding',
        actions: ['newGoal']
        },
        EDIT: {target:'editing', actions:['editGoal']}
      }
    },
    adding: {
      on: {
        RESOLVE: 'listing',
        REJECT: 'listing'
      }
    },
    editing: {
      on: {
        RESOLVE: 'listing',
        REJECT: 'listing'
      }
    },

  },

},{  actions: {
    newGoal:(context, event) => {
      context.goal = {}
    },
    editGoal:(context, event) => {
      context.goal = {id: 2, description: 'Hi there'}
    } ,  emptyGoal:(context, event) => {
      context.goal = null
    }
  }});