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 WarningCardStateMachine = Machine(
  {    
    context: {
      status: "ASKED",
      hasStack: true
    },
    id: "warning-card",
    type: "parallel",
    states: {
      background: {
        initial: "collapsed",
        states: {
          collapsed: {
            on: { EXPAND: "expanded" }
          },
          expanded: {
            on: { COLLAPSE: { target: "collapsed", cond: "hasEvaluateOpened" } }
          }
        }
      },
      stack: {
        initial: "closed",
        states: {
          closed: {
            on: { OPEN_STACK: { target: "opened", cond: "hasStackGuard" } }
          },
          opened: {
            on: { CLOSE_STACK: "closed" }
          }
        }
      },
      note: {
        initial: "closed",
        states: {
          closed: {
            on: { OPEN_NOTE: { target: "opened" } }
          },
          opened: {
            entry: ["markAsRead"],
            on: { CLOSE_NOTE: "closed" }
          }
        }
      },
      evaluate: {
        initial: "closed",
        states: {
          closed: {
            on: { START_EVALUATE: "opened" }
          },
          opened: {
            on: { STOP_EVALUATE: "closed" }
          }
        }
      },
      cardStatus: {
        initial: "initial",
        states: {
          initial: {
            on: {
              "": [
                { target: "dismissed", cond: "isDismissed" },
                { target: "disqualified", cond: "isDisqualified" },
                { target: "asked", cond: "isAsked" },
                { target: "answered", cond: "isAnswered" }
              ]
            }
          },
          disqualified: {
            on: {
              DISMISS: {
                target: "dismissed",
                actions: ["updateStatus", "changeStatus"]
              }
            }
          },
          dismissed: {
            on: {
              DISQUALIFY: {
                target: "disqualified",
                actions: ["updateStatus", "changeStatus"]
              }
            }
          },
          asked: {
            on: {
              DISQUALIFY: {
                target: "disqualified",
                actions: [assign({ status: "DISQUALIFIED" }), "changeStatus"]
              },
              DISMISS: {
                target: "dismissed",
                actions: [assign({ status: "DISMISSED" }), "changeStatus"]
              }
            }
          },
          answered: {
            on: {
              DISQUALIFY: {
                target: "disqualified",
                actions: [assign({ status: "DISQUALIFIED" }), "changeStatus"]
              },
              DISMISS: {
                target: "dismissed",
                actions: [assign({ status: "DISMISSED" }), "changeStatus"]
              }
            }
          }
        }
      }
    },
    on: {
      OPEN_NOTE_AND_STACK: {
        target: [".note.opened", ".stack.opened"]
      },
      CLOSE_EVALUATE: {
        target: [".note.closed", ".evaluate.closed", ".background.collapsed"]
      },
      OPEN_EVALUATE: [
        {
          target: [
            ".evaluate.opened",
            ".background.expanded",
            ".cardStatus.initial"
          ],
          cond: "isOpened"
        },
        {
          target: [".cardStatus.dismissed", ".evaluate.closed"],
          cond: "isDisqualified",
          actions: [assign({ status: "DISMISSED" }), "changeStatus"]
        },
        {
          target: [".cardStatus.disqualified", ".evaluate.closed"],
          cond: "isDismissed",
          actions: [assign({ status: "DISQUALIFIED" }), "changeStatus"]
        }
      ]
    }
  },
  {
    actions: {
      logger: (context, events) => {
        console.log(context, events);
      },
      updateStatus: assign({
        status: (context, events) =>
          context.status === "DISMISSED" ? "DISQUALIFIED" : "DISMISSED"
      })
    },
    context: {
      status: "ASKED",
      hasStack: true
    },
    guards: {
      hasStackGuard: ({ hasStack }) => hasStack,
      hasEvaluateOpened: (context, event) => {
        return !event.data;
      },
      isDismissed: ({ status }) => status === "DISMISSED",
      isDisqualified: ({ status }) => status === "DISQUALIFIED",
      isAnswered: ({ status }) => status === "ANSWERED",
      isAsked: ({ status }) => status === "ASKED",
      isOpened: ({ status }) => status === "ASKED" || status === "ANSWERED"
    }
  }
);