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 settingsMachine = Machine(
  {
    id: 'settings',
    initial: "editing",
    context: {
      interests: [],
      frequency: "weekly",
      message: "",

      errors: {},
    },
    states: {
      editing: {
        initial: "pristine",
        pristine: {
          on: {
            SUBMIT: {
              actions: assign({
                message: (_ctx, e) => e.value
              })
            }
          }
        },
        on: {
          CHANGE_FREQUENCY: {
            target: "editing.dirty",
            actions: ["changeFrequency"],
          },
          REMOVE_INTEREST: {
            target: "editing.dirty",
            actions: ["removeInterest"],
          },
          ADD_INTEREST: {
            target: "editing.dirty",
            actions: ["addInterest"],
          },
          SUBMIT: "submitting",
        },
        states: {
          pristine: {},
          dirty: {},
          error: {},
        },
      },
      submitting: {
        invoke: {
          src: "onSubmit",
          onDone: "success",
          onError: {
            target: "editing.error",
            actions: ["onError"],
          },
        },
      },
      success: {
        on: {
          AGAIN: "editing",
        },
      },
    },
  },
  {
    actions: {
      changeFrequency: assign({
        frequency: (_ctx, e) => e.value,
      }),
      removeInterest: assign({
        interests: (ctx, e) => ctx.interests.filter((item) => item !== e.value),
      }),
      addInterest: assign({
        interests: (ctx, e) => ctx.interests.concat([e.value]),
      }),
      onError: assign({
        errors: (_ctx, e) => e.data,
      }),
    },
  }
);