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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const muteActorMachine = Machine({
    id: 'muteActor',
    initial: 'unmuted',
    context: {
      tweet: 'HtmlTweetElement',
      screenName: 'mpocock1'
    },
    states: {
      unmuted: {
        on: {
          click: 'muting'
        }
      },
      muting: {
        entry: sendParent('MUTE_ACCOUNT'),
        on: {
          MUTE_SUCCESS: 'muted',
          MUTE_ERROR: 'error'
        },
      },
      error: {
        after: {
          5000: 'unmuted'
        }
      },
      muted: {
        entry: [
          'removeTweetElement', 
          sendParent('TWEET_REMOVED')
        ],
        type: 'final'
      }
    }
  });
  
  const muteAccountMachine = Machine({
    id: 'muteAccount',
    initial: 'idle',
    context: {
      queue: [],
      current: undefined,
      actors: []
    },
    invoke: { src: 'addedTweet$' },
    on: {
      TWEET_ADDED: { actions: 'createMuteActor' },
      TWEET_REMOVED: { actions: 'stopMuteActor' }
    },
    states: {
      idle: {
        on: {
          MUTE_ACCOUNT: {
            target: 'muting',
            actions: 'enqueueMuteAccount'
          }
        }
      },
      muting: {
        entry: 'setCurrent',
        exit: 'clearCurrent',
        invoke: {
          src: 'requestMuteAccount',
          onDone: 'complete',
          onError: 'error'
        },
        on: {
          MUTE_ACCOUNT: {
            actions: 'enqueueMuteAccount'
          }
        },
      },
      waiting: {
        after: {
          5000: 'muting'
        }
      },
      complete: {
        entry: ['notifySuccess', 'sendMuteSuccess'],
        always: [
          { target: 'idle', cond: 'queueIsEmpty' },
          { target: 'waiting' }
        ]
      },
      error: {
        entry: ['notifyError', 'sendMuteError'],
        after: {
          5000: 'complete'
        }
      }
    }
  })