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 segmentStates = {
    initial: 'blank',
    states: {
      blank: {
        on: {
          CREATE_FILTER: 'filter_created'
        },
      },
      filter_created: {
        on: {
          APPLY_FILTER: 'under_review'
        }
      },
      under_review: {
        on: {
          MODIFY_FILTER: 'filter_modified'
        }
      },
      filter_modified: {
        on: {
          APPLY_FILTER: 'under_review'
        }
      },
      used_by_campaign: {
        type: 'final',
        internal: false
      }
    }
  };
  
  
  const fetchMachine = Machine({
    id: 'campaign',
    initial: 'initial',
    context: {
      members: 3,
      executions: 0
    },
    on: {
      CREATE_SEGMENT: '.type_selected.blank',
    },
    states: {
      initial: {
        on: {
          SELECT_TYPE: 'type_selected',
        }
      },
      type_selected: {
        ...segmentStates,
        on: {
          SELECT_SEGMENT: '.used_by_campaign',
          ASSIGN_SEGMENT: 'segment_assigned'
        },
      },
      segment_assigned: {
        on: {
          TEST_SEGMENT: 'tested',
          CANCEL: 'initial'
        }
      },
      tested: {
        on: {
          LAUNCH: 'launched'
        }
      },
      launched: {
        always: [
          {target: 'finished', cond: 'allExecuted'},
          {target: 'running', cond: 'executing'}
        ],
        on: {
          ABORT: 'aborted',
          EXECUTE: {
            target: 'running',
            actions: ['execute']
          }
        }
      },
      running: {
        always: [
          {target: 'finished', cond: 'allExecuted'},
          {target: 'running', cond: 'executing'}
        ],
        on: {
          ABORT: 'aborted',
          EXECUTE: {
            target: 'running',
            actions: ['execute']
          }
        }
      },
      aborted: {
        type: 'final'
      },
      finished: {
        type: 'final'
      }
    }
  },
  {
    guards: {
      allExecuted: (context, event) => {
        context.members == context.executions;
      },
      executing: (context, event) => {
        context.members != context.executions;
      }
    }
  },
  {
    actions: {
      execute: (context, event) => {
        console.log("Executing Dialog....");
        context.executions += 1;
        console.log("Total Dialog Executed", context.executions);
      }
    }
  }
);