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

machine.js

  const fetchMachine = Machine({
    id: "powerUp",
    initial: "inactive",
    context: {
      count: 0,
      selected: {
        sender: undefined,
        filter: undefined
      },
      filters: undefined,
      filterIndex: 0,
      canSubmit: false
    },
    states: {
      inactive: {
        on: { FOCUS_SENDER: "editSender" }
      },
      editSender: {
        on: {SELECT_SENDER: "getFilters"}
      },
      getFilters: {
         entry: [
          assign({
            getFilterValues: ctx =>
              (ctx.filters = _.filter(config, [
                "sender.id",
                ctx.selected.sender.id
              ]))
          })
        ],
        on: { 
          RETURN_FILTERS: "editFilter"
        }
      },
       editFilter: {
        entry: [
          assign({
            filters: ctx =>
              (ctx.filters = _.filter(config, [
                "sender.id",
                ctx.selected.sender.id
              ]))
          }),
          assign({
            selectedFilter: ctx => _.unset(ctx.selected, "filter")
          }),
          assign({
            canSubmit: ctx =>
              (ctx.canSubmit =
                !_.isEmpty(ctx.selected.sender) &&
                !_.isEmpty(ctx.selected.filter))
          })
        ],
        on: { 
          EDIT_SENDER: "editFilter", 
          EDIT_FILTER: "validate"
        }
      },
      validate: {
        on: { EDIT_SENDER: "editFilter" },
        entry: [
          assign({
            canSubmit: ctx =>
              (ctx.canSubmit =
                !_.isEmpty(ctx.selected.sender) &&
                !_.isEmpty(ctx.selected.filter))
          })
        ]
      }
    }
  });