Xstate

by jpeter06

HTML

<script src="https://unpkg.com/xstate@4/dist/xstate.js"></script>
<button onclick="addEvent('NEXT')">
NEXT
</button>

<button onclick="addEvent('RESET')">
RESET?
</button>

<div>
state: <span id="state"></span>
</div>

JavaScript

const { createMachine, actions, assign, interpret } = XState;
// Action
const addCont = assign({ 
  count: (context, event) => context.count + 1
});
function logCont (context, event) { 
  console.log(`After: ${context.count}`)
};
const resetContext = assign({ 
  count: 0
});

// Guard
function isFull(context, event) { console.log("isFull?",context.count)
  return context.count >= context.max;
}

const zpMachine = createMachine({
    id: 'zp',
    // Initial state
    initial: 'ZP_CRE_CREACION_ZP',
    // Local context for entire machine
    context: {  },
    on:{RESET: 'ZP_CRE_CREACION_ZP'},
    // State definitions
    states: {
        ZP_CRE_CREACION_ZP: {on: { NEXT: 'ZP_CRE_CREACION_PTO_STOP_OL'  } },
        ZP_CRE_CREACION_PTO_STOP_OL: {on: { NEXT: 'ZP_CRE_CREACION_PUESTA_TIERRA'  } },
        ZP_CRE_CREACION_PUESTA_TIERRA: {on: { NEXT: 'ZP_CRE_ZP_CREADA'  } },
        ZP_CRE_ZP_CREADA: {on: { NEXT: 'ZP_CRE_ZP_CREADA_CONFIRMADA'  } },
        ZP_CRE_ZP_CREADA_CONFIRMADA: {on: { NEXT: 'ZP_ANU_ANULACION_ZP'  } },
        ZP_ANU_ANULACION_ZP: {on: { NEXT: 'ZP_ANU_ANULACION_PTO_STOP_OL'  } },
        ZP_ANU_ANULACION_PTO_STOP_OL: {on: { NEXT: 'ZP_ANU_ANULACION_COMPLETAR_ANULACION'  } },
        ZP_ANU_ANULACION_COMPLETAR_ANULACION: {on: { NEXT: 'ZP_ANU_ZP_ANULADA'  } },
        ZP_ANU_ZP_ANULADA: {on: { NEXT: 'ZP_ANU_ZP_ANULADA_CONFIRMADA'  } },
        ZP_ANU_ZP_ANULADA_CONFIRMADA: {on: { NEXT: 'ZP_ANU_FINALIZADA'  } },
        ZP_ANU_FINALIZADA: {type:'final' }
    }
  },
  { //Actions
    actions: {},
    //Guards
    guards: {},
  }
);

let state = 'ZP_CRE_CREACION_ZP';

const addEvent = function (event){
	console.log("new Event: ", event);
  state = zpMachine.transition(state, event).value;
  document.getElementById('state').innerHTML = state;
}