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 fetchMachine = Machine({
      initial: "editing",
      context: {
        values: {},
        errors: {},
        newValues: {},
      },
      states: {
        editing: {
          initial: "pristine",
          on: {
            CHANGE: {
              actions: ["onChange", "onNewValueChange"],
            },
            SUBMIT: "submitting",
            DISCARD: {
              actions: ["clearForm"]
            }
          },
          states: {
            pristine: {},
            error: {},
          },
        },
        submitting: {
          invoke: {
            src: "onSubmit",
            onDone: "success",
            onError: {
              target: "editing.error",
              actions: ["onError"],
            },
          },
        },
        success: {
          id: "success",
          on: {
            AGAIN: "editing",
          },
        },
      },
    },
    {
      actions: {
        onChange: assign({
          values: (ctx, e) => ({
            ...ctx.values,
            [e.key]: { value: e.value },
          }),
        }),
        onNewValueChange: assign({
          newValues: (ctx, e) => ({
            ...ctx.newValues,
            [e.key ? e.key : e.value.id]: { value: e.value.id ? e.value.value : e.value },
          })
        }),
        clearForm: assign({
          values: {},
          newValues: {},
          errors: {},
        }),
        onError: assign({
          errors: (_ctx, e) => e.data,
        }),
      },
    });