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

machine.js

const glanceMachine = Machine(
  {
    id: 'glanceMachine',
    initial: 'idle',
    context: {
      expanded: 'open',
      criteria: {},
      stats: {},
    },
    states: {
      idle: {
        entry: ['clearStats'],
        on: {
          FETCH: {
            target: 'pending',
            cond: 'isExpanded',
          },
          OPEN: {
            actions: ['setExpandedOpen'],
            target: 'pending'
          }
        },
      },
      pending: {
        entry: ['setCriteria'],
        invoke: {
          src: () => null,
          onDone: {
            target: 'success',
            actions: assign({
              stats: (_, event) => transformStats(event.data),
            }),
          },
          onError: {
            target: 'failure',
          },
        },
      },
      success: {
        on: {
          FETCH: {
            target: 'pending',
            cond: 'isExpanded',
          },
          OPEN: {
            target: 'pending',
            actions: ['setExpandedOpen'],
          },
          CLOSED: {
            target: 'idle',
            actions: ['setExpandedClosed'],
          },
        },
      },
      failure: {
        on: {
          FETCH: {
            target: 'pending',
            cond: 'isExpanded',
          },
          OPEN: {
            target: 'pending',
            actions: ['setExpandedOpen'],
          },
          CLOSED: {
            target: 'idle',
            actions: ['setExpandedClosed'],
          },
        },
      },
    },
  },
  {
    actions: {
      setCriteria: assign({
        criteria: (context, event) => ({ ...context.criteria, ...event.criteria }),
      }),
      setExpandedOpen: assign({ expanded: 'open' }),
      setExpandedClosed: assign({ expanded: 'closed' }),
      clearStats: assign({ stats: {} }),
    },
    guards: {
      isExpanded: context => context.expanded === 'open',
    },
  },
)