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

machine.js

const filterSubStates = filterName => ({
  initial: "disabled",
  states: {
    disabled: {
      on: { [`ENABLE_${filterName}`]: "enabled" }
    },
    enabled: {
      initial: "asc",
      on: {
        [`DISABLE_${filterName}`]: "disabled"
      },
      states: {
        asc: {
          on: { [`TOGGLE_SORT_ORDER_FOR_${filterName}`]: "desc" }
        },
        desc: {
          on: { [`TOGGLE_SORT_ORDER_FOR_${filterName}`]: "asc" }
        }
      }
    }
  }
});

const filterMachine = Machine({
  id: "filter",
  type: "parallel",
  on: {
    RESET: {
      target: ["byEmail.disabled", "byId.disabled", "byName.disabled"]
    }
  },
  states: {
    byEmail: {
      ...filterSubStates("EMAIL")
    },
    byId: {
      ...filterSubStates("ID")
    },
    byName: {
      ...filterSubStates("NAME")
    }
  }
});