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

machine.js

const get_jobs_created_ids = (context, event) => new Promise((resolve, reject) => {
    // return reject('No query specified');
    const data = event.value;
    const formData = new FormData();
    Array.from(data.files).forEach((file) => {
        formData.append('files', file);
    });

    axios.post(`${baseUrl}/uploads/`, formData, {
        withCredentials: true,
        headers: {'content-type': 'multipart/form-data'},
    }).then((res) => {
        console.log(res.data);
        resolve(res.data);
    }).catch(
        (error) => {
            if (error.response) {
                /*
                 * The request was made and the server responded with a
                 * status code that falls out of the range of 2xx
                 */
                // console.log(error.response.data);
                // console.log(error.response.status);
                // console.log(error.response.headers);
                reject(error.response.data)
            } else if (error.request) {
                /*
                 * The request was made but no response was received, `error.request`
                 * is an instance of XMLHttpRequest in the browser and an instance
                 * of http.ClientRequest in Node.js
                 */
                console.log(error.request);

            } else {
                // Something happened in setting up the request and triggered an Error
                console.log('Error', error.message);
            }
            // console.log(error.config);
        }
    );
});

const uploadMachine = Machine(
    {
        id: 'uploads',
        initial: 'idle',
        context: {
            status: [],
            job_ids: [],
            error: ''

        },
        states: {
            idle: {
                on: {
                    FILL_UPLOADS_FORM: {
                        target: 'create_jobs'
                    }
                }
            },
            create_jobs: {
                invoke: {
                    src: get_jobs_created_ids,
                    onDone: {
                        target: 'jobs_creation_success',
                        actions: assign(
                            (context, event) => {
                                // console.log('success')
                                // console.log(context)
                                // console.log(event)
                                return event.data
                            }
                        )
                    },
                    onError: {
                        target: 'jobs_creation_failure',
                        actions: assign({
                            error: (context, event) => {
                                // console.log('failure');
                                return event.data
                            }
                        })
                    },
                }
            },
            jobs_creation_success: {
                invoke: {
                    src: (context,
                          event
                    ) => new Promise((resolve, reject) => {
                        if (context.status[0] === 'complete') {
                            console.log('resolve')
                            console.log(context);
                            console.log(event);
                            // resolve('yes')
                        } else {
                            console.log('reject')
                            console.log(context);
                            console.log(event);
                            reject('no')
                        }
                    }),
                    onDone: {
                        target: 'status_complete', actions: ['setJobResults']
                    },
                    onError: {
                        target: 'status_progress', actions: ['setJobResults']
                    }
                }

            },
            status_complete: {
                type: 'final'
            },
            status_progress: {
                after: {
                    1000: [
                        {
                            target: 'pending'
                        }
                    ]
                }
            },
            jobs_creation_failure: {
                on: {
                    FILL_UPLOADS_FORM: {
                        target: 'create_jobs'
                    }
                }
            },

        }
    }
);