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

machine.js

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'ready',
    context: {},
    states: {
      ready: {
        
        invoke: [{
          src: 'listenForRecipientTyping',
        }, {
          src: 'listenForIncomingMessages',
        }],
        
        initial: 'idle',
        
        states: {
          
          idle: {
            on: { 
              'RECIPIENT.TYPING.START': 'recipientTyping'
            }
          },
          
          recipientTyping: {
            on: {
              'RECIPIENT.TYPING.STOP': {
                target: 'idle'
              }
            }
          }
          
        },
        
        on: {
          
        
          'STACK.PUSH': {
            actions: 'pushMessageOnToStack'
          },
          
          'MESSAGE.SEND': [
            {
              cond: 'isValidMessage',
              //target: 'ready.sending.send',
              actions: [
                'createMessageAndPushToStack',
                'clearMessageInput'  
              ]
            },
          ],
          
          'USER.TYPING': {
            actions: 'sendUserTypingEvent'
          },
          
        },
        
      },
      
    }
  }, {
    
    guards: {
      
      isValidMessage: () => true,
      
    },
    
    services: {
      
      listenForRecipientTyping: () => {
        alert('listenForRecipientTyping')
      },
      
      listenForIncomingMessages: () => {
        alert('listenForIncomingMessages')
      }
      
    },
    
    actions: {
      
      pushMessageOnToStack: () => {
        alert('pushMessageOnToStack')
      },
      
      sendUserTypingEvent: () => {
        alert('sendTypingEvent')
      },
      
      createMessageAndPushToStack: () => {
        alert('createMessageAndPushToStack')
      },
      
      clearMessageInput: () => {
        alert('clearMessageInput')
      }
      
    }
    
  });