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

machine.js

// services
const fetchConfig = () => Promise.resolve({ hereId: 'foo', hereCode: 'bar' })
const fetchOrder = () => Promise.resolve({ status: 'done', pods: [1, 2, 3] })
const fetchOrder2 = () => {
  if (Math.random() > 0.5) {
    return Promise.resolve({ status: 'done', pods: [1, 2, 3] })
  } else {
    return Promise.reject({ errorMessage: 'foo' })
  }
}
const fetchIntl = () => Promise.resolve({ messages: { foo: 'bar' } })

const fetchMachine = Machine(
  {
    id: 'tracking-app',
    initial: 'loading',
    context: {
      hereId: '',
      hereCode: '',
      orderData: {
        // 'orderNotFound' | 'territoryNotFound' | 'tokenNotFound' | 'tokenNotValid' | 'bodyNotValid'
        status: '',
        pods: [],
      },
      messages: {},
      errorMessage: '',
    },
    states: {
      loading: {
        initial: 'config',
        states: {
          config: {
            invoke: {
              id: 'getConfig',
              src: () => fetchConfig(),
              onDone: {
                target: '#tracking-app.loading.order',
                actions: assign({
                  hereId: (_context, event) => event.data.hereId,
                  hereCode: (_context, event) => event.data.hereCode,
                }),
              },
              onError: {
                target: '#tracking-app.offline',
              },
            },
          },
          order: {
            invoke: {
              id: 'getOrder',
              src: () => fetchOrder(),
              onDone: {
                target: '#tracking-app.loading.intl',
                actions: assign({
                  status: (_context, event) => event.data.status,
                  pods: (_context, event) => event.data.pods,
                }),
              },
              onError: {
                target: '#tracking-app.orderError',
                actions: assign({
                  errorMessage: (_context, event) => event.data.errorMessage,
                }),
              },
            },
          },
          intl: {
            invoke: {
              id: 'getIntl',
              src: () => fetchIntl(),
              onDone: {
                target: '#tracking-app.orderDetail',
                actions: assign({
                  messages: (_context, event) => event.data.messages,
                }),
              },
              onError: {
                target: '#tracking-app.offline',
              },
            },
          },
        },
      },

      orderDetail: {
        type: 'parallel',
        states: {
          ui: {
            initial: 'map',
            states: {
              map: {
                on: {
                  GO_TO_PODS: 'pods',
                },
              },
              pods: {
                on: {
                  GO_TO_MAP: 'map',
                },
              },
            },
          },
          poll: {
            initial: 'idle',
            states: {
              idle: {
                after: { POLL_DELAY: 'fetch' },
              },
              fetch: {
                invoke: {
                  src: () => fetchOrder2(),
                  onDone: {
                    target: 'idle',
                    actions: assign({
                      status: (_context, event) => event.data.status,
                      pods: (_context, event) => event.data.pods,
                      errorMessage: (_context, _event) => '',
                    }),
                  },
                  onError: {
                    target: 'evaluateError',
                    actions: assign({
                      errorMessage: (_context, event) => event.data.errorMessage,
                    }),
                  },
                },
              },
              evaluateError: {
                // on: {
                //   always: [
                //     { target: '#tracking-app.orderDeleted', cond: 'isOrderDeleted' },
                //     { target: '#tracking-app.deadLink', cond: 'isDeadLink' },
                //     { target: 'disasterRecover' },
                //   ],
                // },
                after: {
                  0: [
                    { target: '#tracking-app.orderDeleted', cond: 'isOrderDeleted' },
                    { target: '#tracking-app.deadLink', cond: 'isDeadLink' },
                    { target: 'idle' },
                  ],
                },
              },
            },
          },
        },
      },

      orderError: {
        initial: 'evaluateError',
        states: {
          evaluateError: {
            // on: {
            //   always: [
            //     { target: '#tracking-app.orderDeleted', cond: 'isOrderDeleted' },
            //     { target: '#tracking-app.deadLink', cond: 'isDeadLink' },
            //     { target: '#tracking-app.offline' },
            //   ],
            // },
            after: {
              0: [
                { target: '#tracking-app.orderDeleted', cond: 'isOrderDeleted' },
                { target: '#tracking-app.deadLink', cond: 'isDeadLink' },
                { target: '#tracking-app.offline' },
              ],
            },
          },
        },
      },

      // dead states
      offline: { type: 'final' },
      deadLink: { type: 'final' },
      orderDeleted: { type: 'final' },
    },
  },
  {
    guards: {
      isOrderDeleted: (context, _event) => context.errorMessage === 'orderNotFound',
      isDeadLink: (context, _event) =>
        context.errorMessage === 'territoryNotFound' ||
        context.errorMessage === 'tokenNotFound' ||
        context.errorMessage === 'tokenNotValid' ||
        context.errorMessage === 'bodyNotValid',
    },
    delays: {
      POLL_DELAY: (context, _event) => {
        console.log('context.errorMessage', context.errorMessage)
        return !!context.errorMessage ? 1000 : 5000
      },
    },
  }
)