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

machine.js

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'ready',
    context: {
      retries: 0
    },
    states: {
      ready: {
        invoke: {
          src: 'listenForTypingOnChannel',
        },
        type: 'parallel',
        states: {
          sending: {
            entry: [
              'createMessageAndPushToStack',
              'clearMessageInput'
            ],
          },
          receiving: {
            entry: [
              'createMessageAndPushToStack', 
              'clearMessageInput'
            ],
          },
        },
        on: {
          SEND_MESSAGE: [
            {
              cond: 'isValidMessage',
              target: '.sending'
            },
          ],
          RECEIVE_MESSAGE: [
            {
              cond: 'isValidMessage',
              target: '.receiving'
            },
          ],
          TYPING: {
            actions: 'sendTypingEvent'
          },
          USER_TYPING: {
            actions: 'receiveTypingEvent'
          }
        }
      },
    },
  });