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 filteringUsers = (context, event) => {
    return context.filter.length > 0
  }
  
  const fetchMachine = Machine({
    id: 'Project Settings',
    initial: 'start',
    context: {
      title: 'Untitled',
      description: '',
      filter: '',
      users: [
        'fe-admin',
      ]
    },
    states: {
      start: {
        on: {
          EDIT_TITLE: 'editing Title',
          EDIT_DESCRIPTION: 'editing Description',
          SELECT_SEARCH: 'Quick Search',
          SELECT_ADD_USER: 'Choose User to Add',
        }
      },
      'editing Title': {
        on: {
          CHANGE: {
            target: 'editing Title',
            actions: assign({
              title: (context, event) => {
                return event.text
              }
            })
          },
          BLUR: [{
            target: 'filtered users',
            cond: filteringUsers
          },
          { target: 'start' }]
        }
      },
      'editing Description': {
        on: {
          CHANGE: {
            target: 'editing Description',
            actions: assign({
              description: (context, event) => {
                return event.text
              }
            })
          },
          BLUR: [{
            target: 'filtered users',
            cond: filteringUsers
          },
          { target: 'start' }]
        }
      },
      'Quick Search': {
        on: {
          CHANGE: [{
            target: ['Quick Search','filtered users'],
            actions: assign({
              filter: (context, event) => {
                return event.text
              }
            }),
            cond: filteringUsers
          }, {
            target: ['Quick Search','start'],
            actions: assign({
              filter: (context, event) => {
                return event.text
              }
            })
          }],
          BLUR: [{
            target: 'filtered users',
            cond: filteringUsers
          },
          { target: 'start' }]
        }
      },
      'Choose User to Add': {
        on: {
          SELECT: {
            target: 'start',
            actions: assign({
              users: (context, event) => {
                return [...context, event.user]
              }
            })
          },
        }
      },
      'filtered users': {
        
      }
    }
  });