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 hasViewed = (name) => ({viewed}) => viewed.includes(name);
  const hasNotViewed = (name) => !hasViewed(name);
  const setViewed = (name) => assign({ viewed: ({viewed}) => [...viewed, name]  })
  
  const hasBlockSettings = ({ hasBlockSettings }) => hasBlockSettings;
  const hasNoBlockSettings = ({ hasBlockSettings }) => !hasBlockSettings;
  
  const hasMedia = ({ hasMedia }) => hasMedia;
  const hasNoMedia = ({ hasMedia }) => !hasMedia;
  
  const fetchMachine = Machine({
    id: 'editor-onboarding',
    initial: 'idle',
    context: {
      viewed: [],
      hasBlockSettings: false,
      hasMedia: false,
    },
    states: {
      idle: {
        on: {
          ADD_BLOCK: { target: 'block_actions', cond: hasNotViewed('block_actions') },
          ADD_BLOCK_WITH_SETTINGS: {
            target: 'block_actions', cond: hasNotViewed('block_actions'),
            actions: assign({ hasBlockSettings: () => true })},
          ADD_BLOCK_WITH_SETTINGS_AND_MEDIA: {
            target: 'block_actions', cond: hasNotViewed('block_actions'),
            actions: assign(() => ({ hasBlockSettings: true, hasMedia: true }))},
          START_WRITING: 'block_actions'
        }
      },
      block_actions: {
        on: {
          DISMISS: [
            { target: 'block_settings', cond: hasBlockSettings, actions: setViewed('block_actions') },
            { target: 'help', cond: hasNoBlockSettings, actions: setViewed('block_actions') },
          ],
        },
      },
      block_settings: {
        on: {
          DISMISS: [
            { target: 'media_actions', cond: hasMedia, actions: setViewed('block_settings') },
            { target: 'help', cond: hasNoMedia, actions: setViewed('block_settings') },
          ]
        }
      },
      media_actions: {
        on: {
          DISMISS: [{ target: 'help', cond: hasNotViewed('help'), actions: setViewed('media_actions') },{ target: 'idle', actions: setViewed('media_actions') }]
        }
      },
      help: {
        on: {
          DISMISS: [{ target: 'complete', cond: hasNotViewed('block_settings') },{ target: 'idle' }
          ],
        }
      },
      complete: {
        type: 'final'
      }
    }
  });