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 machineDefinition = {
  id: "address-book",
  initial: "start",
  context: { contacts: [] },
  states: {
    start: {
      on: {
        select_contact: "showing_contact",
        new_contact: "adding_contact",
      },
    },
    showing_contact: {type:'parallel', states:{a:{
      initial: "viewing",
      context: {
        contact: {
          name: "",
          address: "",
          phone_number: "",
        },
      },
      states: {
        viewing: {
          on: {
            edit_name: "editing_name",
            edit_address: "editing_address",
            edit_phone_number: "editing_phone_number",
          },
        },
        editing_name: {
          on: { save: "viewing" },
        },
        editing_address: {
          on: { save: "viewing" },
        },
        editing_phone_number: {
          on: { save: "viewing" },
        },
      },
      on: {
        deselect: "",
      },
    },b:{
      initial: "viewing",
      context: {
        contact: {
          name: "",
          address: "",
          phone_number: "",
        },
      },
      states: {
        viewing: {
          on: {
            edit_name: "editing_name",
            edit_address: "editing_address",
            edit_phone_number: "editing_phone_number",
          },
        },
        editing_name: {
          on: { save: "viewing" },
        },
        editing_address: {
          on: { save: "viewing" },
        },
        editing_phone_number: {
          on: { save: "viewing" },
        },
      },
      on: {
        deselect: "",
      },
    }}},
    adding_contact: {
      on: {
        save: "showing_contact",
      },
    },
  },
};
const fetchMachine = Machine(machineDefinition);