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: 'UpdateOrder',
    initial: 'editing',
    context: {
      csrf: '',
      orderId: '',
      orderStatus: '',
      errors: '',
      order: {},
    },
    states: {
      editing: {
        initial: 'pristine',
        on: {
          CHANGE: {
            target: '.dirty',

            actions: [
              'onChange',
              'clearError',
            ],
          },
          SUBMIT: [{
            target: 'submitting',
            cond: 'searchValid',
          }, {
            target: '.invalidEntry',
          }],
        },
        states: {
          pristine: {
            entry: ['clearForm'],
          },
          dirty: {},
          error: {},
          invalidEntry: {},
        },
      },
      submitting: {
        invoke: {
          src: 'onSubmit',
          onDone: {
            target: 'success',
            actions: ['onSuccess'],
          },
          onError: {
            target: 'editing.error',
            actions: ['onError'],
          },
        },
      },
      success: {
        on: {
          RESET: {
            target: 'editing.pristine',
            actions: ['clearForm'],
          },
        },
      },
    },
  }, {
    actions: {
      onChange: assign({
        orderId: (ctx, e) => {
          console.log(e.orderId)
          if (e.orderId !== undefined) {
            ctx.orderId = e.orderId
            console.log('mid return', e.orderId)
            return e.orderId
          }
          console.log('bottom return')
          return ctx.orderId
        },
        orderStatus: (ctx, e) => {
          if (e.orderStatus !== undefined) {
            ctx.orderStatus = e.orderStatus
            return e.orderStatus
          }
          return ctx.orderStatus
        },
      }),

      onError: assign({
        errors: (ctx, e) => e.data.message,
      }),

      onSuccess: assign({
        order: (ctx, e) => e.data,
      }),

      clearForm: assign({
        orderId: '',
        orderStatus: '',
        errors: '',
        order: {},
      }),
      clearError: assign({
        errors: '',
      }),
    },
    guards: {
      searchValid: (context, event) => {
        return !!context.orderId
      },
    },
  })