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: "upload_system",
    initial: "idle",
    context: {
      files: 0,
    },
    states: {
      idle: {
        on: {
          OPEN: "active",
        },
      },
      active: {
        initial: "waitForFiles",
        states: {
          waitForFiles: {
            on: {
              ADD: {
                target: "waitForFiles",
                actions: "addFile",
              },
              UPLOAD: {
                target: "pending",
                cond: "hasFiles",
              },
              CLOSE: {
                target: "#upload_system.idle",
                actions: "removeAllFiles",
              },
            },
          },
          pending: {
            on: {
              RESOLVE: [
                {
                  target: "completed",
                  actions: "removeAllFiles",
                },
              ],
              REJECT: [
                {
                  target: "completed",
                  actions: "removeAllFiles",
                },
              ],
            },
            initial: 'uploading',
            states: {
              uploading: {
                on: {
                  CANCEL: "cancel",
                },
              },
              cancel: {
                on: {
                  YES: {
                    target: "#upload_system.idle",
                    actions: "removeAllFiles",
                  },
                  NO: "uploading",
                },
              },
            },
          },

          completed: {
            on: {
              CLOSE: "#upload_system.idle",
            },
          },
        },
      },
    },
  },
  {
    guards: {
      hasFiles: (context, event) => {
        return context.files > 0;
      },
      hasNoFiles: (context, event) => {
        return context.files === 0;
      },
    },
    actions: {
      addFile: assign({
        files: (context, event) => {
          const newValue = context.files + 1;
          console.log("Added file");
          console.log("total files", newValue);
          console.log("event", event);
          return newValue;
        },
      }),
      removeFile: assign({
        files: (context, event) => context.files - 1,
      }),
      removeAllFiles: assign({
        files: 0,
      }),
    },
  }
);