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

machine.js

const postingStates = {
    initial: 'posting',
    states: {
      posting: { // posting processing starts
        entry: ['handlePost'], // handle POST
        on: {
          SUCCESS: "success", // POST succeeded
          ERROR: "error", // POST failed
        }
      },
      success: {
        on: {
          // NOTE: v4.11+ uses 'always' instead of ''
          '': '#FeedEditorCTA.completed' 
        }, // reach outside nested state to core machine
      },
      error: {
        on: {
          // NOTE: v4.11+ uses 'always' instead of ''
          '': '#FeedEditorCTA.failed'
        },
      }, // handle error state
    },
    actions: {
      handlePost: (context, event) => { // action to handle posting data to server
        console.log("POST xhr")
      }
    }
  }
  
  const FeedEditorMachine = Machine({
    id: 'FeedEditorCTA',
    initial: 'initial',
    states: {
      initial: { // starting point
        on: { 
          FOCUS: 'focus' // user clicks on comp
        }
      },
      focus: {
        entry: ["sendMetrics"], // send metric ping
        on: {
          ACTIVE: 'active', // user enters content
          // an UNFOCUS event is always sent when
          // a user blurs away. However, since we
          // only have a listener on "focus", if 
          // we're "active" and "unfocus", 
          // nothing will occur, as desired.
          UNFOCUS: 'initial' // user blurs away
        }
      },
      active: {
        on: {
          POST: 'post', // user clicks post button
          INACTIVE: 'focus', // when no content present
        }
      },
      post: {
        ...postingStates, // nested state for posting
      },
      completed: { // interaction is completed ok
        entry: ['sendMetrics']
      },
      failed: { // interaction did not complete ok
        entry: ['sendMetrics']
      },
    },
    actions: {
       sendMetrics: (context, event) => { // our telemetry ping
         console.log("metrics sent here")
       },
      }
  });