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: 'uploading',
                cond: 'hasFiles',
              },
              CLOSE: {
                target: '#upload_system.idle',
                actions: 'removeAllFiles',
              },
            },
          },

          uploading: {
            type: 'parallel',
            states: {
              inProgress: {
                on: {
                  RESOLVE: [
                    {
                      target: '#upload_system.active.completed',
                      actions: 'removeAllFiles',
                    },
                  ],
                  REJECT: [
                    {
                      target: '#upload_system.active.completed',
                      actions: 'removeAllFiles',
                    },
                  ],
                },
              },
              cancel: {
                on: {
                  YES: {
                    target: '#upload_system.idle',
                    actions: 'removeAllFiles',
                  },
                  NO: 'cancel',
                },
              },
            },
          },
          completed: {
            on: {
              CLOSE: '#upload_system.idle',
            },
          },
        },
      },
      // success: {
      //   on: {
      //     '': {
      //       target: 'active.uploading.inProgress',
      //       cond: 'hasFiles',
      //     },
      //     '': {
      //       target: 'completed',
      //       cond: 'hasNoFiles',
      //     },
      //   },
      // },
      // error: {
      //   on: {
      //     '': {
      //       target: 'active.uploading.inProgress',
      //       cond: 'hasFiles',
      //     },
      //     '': {
      //       target: 'completed',
      //       cond: 'hasNoFiles',
      //     },
      //   },
      // },
    },
  },
  {
    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,
      }),
    },
  }
);