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

machine.js

const repCounterMachine = Machine(
  {
    id: "repCounter",
    initial: "counting",
    context: {
      goal: 10,
      count: 10,
      doneMessage: null
    },
    states: {
      restarting: {
        entry: ["setGoal"],
        on: {
          "": "counting"
        }
      },
      counting: {
        on: {
          increase: {
            actions: ["increase"],
            cond: "countLessThanGoal"
          },
          decrease: {
            actions: ["decrease"],
            cond: "countGreaterThanZero"
          },
          set_count_to_goal: {
            actions: ["setGoal"],
            cond: "countLessThanGoal"
          },
          set_count_to_zero: {
            actions: ["setZero"],
            cond: "countNotZero"
          },
          finish: "done"
        }
      },
      done: {
        entry: ["doneMessage"],
        on: {
          retry: "counting"
        }
      }
    }
  },
  {
    actions: {
      increase: assign({ count: context => context.count + 1 }),
      decrease: assign({ count: context => context.count - 1 }),
      setGoal: assign({
        count: context => context.goal
      }),
      setZero: assign({
        count: 0
      }),
      doneMessage: assign({
        doneMessage: context =>
          `You did ${context.count} rep${context.count === 1 ? "" : "s"}`.trim()
      })
    },
    guards: {
      countGreaterThanZero: context => context.count > 0,
      countNotZero: context => context.count !== 0,
      countLessThanGoal: context => context.count < context.goal
    }
  }
);