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({
  id: "multi-step",
  initial: "enterUserDetails",
  context: {
    firstName: "",
    lastName: "",
    email: "",
    occupation: "",
    city: "",
    bio: "",
    errors: {}
  },
  states: {
    enterUserDetails: {
      on: {
        SET_FIRST_NAME: {
          actions: ["setFirstName"]
        },
        SET_LAST_NAME: {
          actions: ["setLastName"]
        },
        SET_EMAIL: {
          actions: ["setEmail"]
        },
        CONTINUE: {
          target: "enterPersonalDetails",
          cond: "validateUserDetails"
        }
      }
    },
    enterPersonalDetails: {
      on: {
        SET_OCCUPATION: {
          actions: ["setOccupation"]
        },
        SET_CITY: {
          actions: ["setCity"]
        },
        SET_BIO: {
          actions: ["setBio"]
        },
        BACK: "enterUserDetails",
        CONTINUE: {
          target: "confirm",
          cond: "validatePersonalDetails"
        }
      }
    },
    confirm: {
      on: {
        BACK: "enterPersonalDetails",
        CONTINUE: "success"
      }
    },
    success: {
      type: 'final'
    }
  }
}, {
  actions: {
    setFirstName: assign((context, event) => ({
      firstName: event.data,
      errors: {
        firstName: event.data ? undefined : "The first name is required"
      }
    })),
    setLastName: assign((context, event) => ({
      lastName: event.data,
      errors: {
        lastName: event.data ? undefined : "The last name is required"
      }
    })),
    setEmail: assign((context, event) => ({
      email: event.data,
      errors: {
        email: event.data ? undefined : "The email is required"
      }
    })),
    setOccupation: assign((context, event) => ({
      occupation: event.data,
      errors: {
        occupation: event.data ? undefined : "The occupation is required"
      }
    })),
    setCity: assign((context, event) => ({
      city: event.data,
      errors: {
        city: event.data ? undefined : "The city is required"
      }
    })),
    setBio: assign((context, event) => ({
      bio: event.data,
      errors: {
        bio: event.data ? undefined : "The bio is required"
      }
    }))
  },
  guards: {
    validateUserDetails(context) {
      return (
        !!context.firstName &&
        !!context.lastName &&
        !!context.email
      );
    },
    validatePersonalDetails(context) {
      return (
        !!context.occupation &&
        !!context.city &&
        !!context.bio
      );
    }
  }
});