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 createProjectWizardMachine = Machine({
  id: "create-project-wizard",
  type: "parallel",
  context: {
    data: {
      id: "",
      name: "",
      domain: "",
      gcmKey: "",
    },
    canContinue: false,
    projectIdAvailable: false,
    domain: {
      txtValid: false,
      duplicate: false,
    },
  },
  states: {
    wizard: {
      initial: "projectNaming",
      states: {
        projectNaming: {
          on: {
            NEXT_STEP: {
              target: "domainValidation",
              cond: (context, _event) => {
                return (
                  context.data.name.length > 4 && context.projectIdAvailable
                );
              },
            },
          },
        },
        domainValidation: {
          on: {
            PREV_STEP: {
              target: "projectNaming",
            },
            SKIP: {
              target: "addGCMKey",
            },
            CHECK_VALIDATION: {
              target: "#domainChecker",
            },
            NEXT_STEP: {
              target: "addGCMKey",
              cond: "canContinue",
            },
          },
        },
        addGCMKey: {
          on: {
            PREV_STEP: {
              target: "domainValidation",
            },
            SKIP: {
              target: "appSettings",
            },
            NEXT_STEP: {
              target: "appSettings",
              cond: "canContinue",
            },
          },
        },
        appSettings: {
          on: {
            PREV_STEP: {
              target: "addGCMKey",
            },
            SKIP: {
              target: "finish",
            },
            NEXT_STEP: {
              target: "finish",
              cond: "canContinue",
            },
          },
        },
        finish: {
          type: "final",
          on: {
            PREV_STEP: {
              target: "appSettings",
            },
            SUBMIT: {
              target: "projectNaming",
            },
          },
        },
      },
    },
    form: {
      initial: "editing",
      states: {
        editing: {
          on: {
            CHANGE_PROJECT_NAME: {
              target: "#projectId.idle",
              actions: [
                assign({
                  data: (context, event) => ({
                    ...context.data,
                    name: event.target.value,
                  }),
                }),
                send((ctx, ev) => ({
                  type: "FETCHING",
                  projectId: ctx.data.name,
                })),
              ],
            },
          },
        },
        submitting: {},
        error: {},
        success: {},
      },
    },
    projectId: {
      id: "projectId",
      initial: "idle",
      states: {
        idle: {
          on: {
            FETCHING: {
              target: "fetching",
            },
          },
        },
        fetching: {
          invoke: {
            id: "checkProjectIdAvailability",
            src: (context, event) => {
              return new Promise((res, rej) => {
                setTimeout(() => res("bababa"), 5000);
              });
            },
            onDone: {
              target: "success",
              actions: assign({
                projectIdAvailable: true,
              }),
            },
            onError: {
              target: "failed",
              actions: assign({
                projectIdAvailable: false,
              }),
            },
          },
        },
        success: {
          type: "final",
        },
        failed: {
          type: "final",
        },
      },
    },

    domainChecking: {
      id: "domainChecker",
      initial: "idle",
      states: {
        idle: {
          on: {
            FETCHING: {
              target: "fetching",
            },
          },
        },
        fetching: {
          invoke: {
            id: "checkDomainTxtValidation",
            src: (context, event) => {
              return new Promise((res, rej) => {
                setTimeout(() => res("bababa"), 5000);
              });
            },
            onDone: {
              target: "success",
            },
            onError: {
              target: "failed",
            },
          },
        },
        success: {
          type: "final",
          entry: assign({
            domain: (ctx, evt) => ({
              ...ctx.domain,
              txtValid: true,
              duplicate: false,
            }),
          }),
        },
        failed: {
          type: "final",
          entry: assign({
            domain: (ctx, evt) => ({
              ...ctx.domain,
              txtValid: false,
              duplicate: true,
            }),
          }),
        },
      },
    },
  },
});