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 settings = Machine({
  id: "settings",
  context: {
    frequency: "weekly",
    topics: ["health", "sports"],
  },
  initial: "editing",
  states: {
    editing: {
      on: {
        CHANGE_FREQUENCY: {
          target: "editing",
          actions: "changeFrequency"
        },
        ADD_TOPIC: {
          target: "editing",
          actions: "addTopic"
        },
        REMOVE_TOPIC: {
          target: "editing",
          actions: "removeTopic"
        },
        SUBMIT: {
          target: "submitting"
        },
      }
    },
    submitting: {
      meta: {
        message: "Saving…"
      }
    },
    success: {
      meta: {
        message: "Settings saved successfully!"
      }
    },
    failure: {
      meta: {
        message: "Settings could not be saved. Please try again!"
      }
    }
  },
},
{
  actions: {
    changeFrequency: assign({
      frequency: (_ctx,e) => e.value
    }),
    addTopic: assign({
      topics: (ctx, e) => ctx.topics.concat([e.value])
    }),
    removeTopic: assign({
      topics: (ctx, e) => ctx.topics.filter(item => item !== e.value)
    })
  }
}
);