Generated by XState Viz: https://xstate.js.org/viz

machine.js

  const uploadImageMachine = Machine({
    id: 'uploadImage',
    initial: 'idle',
    context: {
      data: undefined,
      error: undefined,
    },
    states: {
      idle: {
        on: {
          CHANGE: {
            target: "uploadToS3",
            actions: []
          },
          CANCEL: {
            target: "deleteS3Image"
          },
          SUBMIT: [
            { 
              target: "saveToDynamo",
              cond: "hasS3Key"
            },
            {
              target: "error"
            }
          ]
        },
      },
      uploadToS3: {
        invoke: {
          src: "uploadService",
          onDone: {
            target: "idle",
            actions: ["setS3State"]
          },
          onError: {
            target: "error",
            actions: ["setError"]
          }
        }
      },
      saveToDynamo: {
        invoke: {
          src: "createImageAPI",
          onDone: {
            target: "success"
          },
          onError: {
            target: "error",
            actions: ["setError"]
          }
        }
      },
      deleteS3Image: {
        invoke: {
          src: "deleteImageAPI",
          onDone: {
            target: "success",
          },
          onError: {
            target: "error",
            actions: ["setError"]
          }
        }
      },
      success: {
        type: 'final'
      },
      error: {}
    }
  },{
    guards: {
      hasS3Key: (context) => {
        return true;
      }
    }
  });