state machine

machine.js

const someMachine = Machine({
  id: "actionPlan",
  initial: "view",
  type: "parallel",
  context: {
    goals: [],
    canEditCarePlan: false,
    canEditActionPlan: false,
    draftGoal: {},
  },
  states: {
    view: {
      entry: ["clearEditing"],
      on: {
        ADD_GOAL: {
          target: "modal.goal",
          actions: ["setEditLevelGoal"],
        },
        ADD_OBJECTIVE: {
          target: "modal.objective",
          actions: ["setEditLevelObjective"],
        },
        ADD_ACTION: {
          target: "modal.action",
          actions: ["setEditLevelAction"],
        },
        EDIT_GOAL: {
          target: "modal.goal",
          actions: ["setEditing", "setEditLevelGoal", "populateDraftGoal"],
        },
        EDIT_OBJECTIVE: {
          target: "modal.objective",
          actions: [
            "setEditing",
            "setEditLevelObjective",
            "populateDraftObjective",
          ],
        },
        EDIT_ACTION: {
          target: "modal.action",
          actions: ["setEditing", "setEditLevelAction", "populateDraftAction"],
        },
      },
    },
    modal: {
      initial: "goal",
      states: {
        goal: {
          on: {
            SET_GOAL_TITLE: { target: "goal", actions: ["goalTitle"] },
            SET_GOAL_STATUS: { target: "goal", actions: ["goalStatus"] },
            SET_GOAL_CATEGORY: { target: "goal", actions: ["goalCategory"] },
            ADD_GOAL_SERVICE: {
              target: "goal",
              actions: ["goalService"],
            },
            DELETE_GOAL_SERVICE: {
              target: "goal",
              actions: ["serviceDelete"],
              cond: "notFinalService",
            },
            SET_SERVICE_TYPE: { target: "goal", actions: ["serviceType"] },
            SET_SERVICE_FREQUENCY: {
              target: "goal",
              actions: ["serviceFrequency"],
            },
            // buttons
            NEXT: { target: "objective", cond: "goalAllFilled" },
          },
        },
        objective: {
          on: {
            SET_OBJECTIVE_TITLE: {
              target: "objective",
              actions: ["objectiveTitle"],
            },
            // buttons
            NEXT: { target: "action", cond: "objectiveAllFilled" },
            BACK: { target: "goal" },
          },
        },
        action: {
          on: {
            SET_ACTION_TITLE: {
              target: "action",
              actions: ["actionTitle"],
            },
            SET_ACTION_RESPONSIBLE: {
              target: "action",
              actions: ["actionResponsible"],
            },
            SET_ACTION_TARGET_DATE: {
              target: "action",
              actions: ["actionTargetDate"],
            },
            SET_ACTION_STATUS: {
              target: "action",
              actions: ["actionStatus"],
            },
            SET_ACTION_JUSTIFICATION: {
              target: "action",
              actions: ["actionJustification"],
            },
            // buttons
            NEXT: {
              target: "goal",
              cond: "actionAllFilled",
              actions: ["save"],
            },
            BACK: { target: "objective" },
          },
        },
      },
      on: {
        SAVE: { target: "view", actions: ["saveGoal"] },
        CANCEL: "view",
      },
    },
    mode: {
      initial: "create",
      states: {
        create: { on: { MODE: "edit" } },
        edit: { on: { MODE: "create" } },
      },
    },
    level: {
      initial: "goal",
      states: {
        goal: { on: { LEVEL: "objective" } },
        objective: { on: { LEVEL: "action" } },
        action: { on: { LEVEL: "goal" } },
      },
    },
  },
});