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

machine.js

const doMatch = () => '';
const isValidInput = () => true;

const calculator = Machine({
  id: 'calculator',
  initial: 'idle',
  context: {
    input: '',
    result: '',
    buttonText: 3,
  },
  states: {
    idle: {
      on: {
        clear: 'cleared',
        calculate: {
          cond: (context, event) => isValidInput(context.input + event.payload),
          target: 'calculated',
        },
        input: {
          cond: (context, event) => isValidInput(context.input + event.payload),
          target: 'inputting',
        },
        fetch: 'loading',
      },
    },
    loading: {
      invoke: {
        src: (context, event) =>fetch('https://jsonplaceholder.typicode.com/users/1')
             .then(res => res.json()),
        onDone: {
          target: 'success',
          actions: [
            assign({
              buttonText: (context, event) => event.data.id,
            }),
          ],
        },
        onError: {
          target: 'failure',
        },
      },
    },
    inputting: {
      entry: assign({
        result: (context) => {
          const prevChar = context.input[context.input.length - 1];
          return prevChar === '=' ? '' : context.result;
        },
        input: (context, event) => {
          const prevChar = context.input[context.input.length - 1];
          if (prevChar === '=') {
            return context.result + event.payload;
          }
          return context.input + event.payload;
        },
      }),
      always: 'idle',
    },
    calculated: {
      entry: assign({
        input: (context, event) => context.input + event.payload,
        result: (context, event) => doMath(context.input + event.payload),
      }),
      always: 'idle',
    },
    cleared: {
      entry: assign({
        input: '',
        result: '',
      }),
      always: 'idle',
    },
    success: {
      type: 'final',
    },
    failure: {
      on: {
        RETRY: 'loading',
      },
    },
  },
})