cerebrate/webroot/js/api-helper.js

/** AJAXApi class providing helpers to perform AJAX request */
class AJAXApi {
    static genericRequestHeaders = {
        'X-Requested-With': 'XMLHttpRequest'
    };
    static genericRequestConfigGET = {
        headers: new Headers(Object.assign({}, AJAXApi.genericRequestHeaders))
    }
    static genericRequestConfigPOST = {
        headers: new Headers(Object.assign({}, AJAXApi.genericRequestHeaders)),
        redirect: 'manual',
        method: 'POST',
    }
    static genericRequestConfigGETJSON = {
        headers: new Headers(Object.assign({}, AJAXApi.genericRequestHeaders, {Accept: 'application/json'}))
    }

    /**
     * @namespace
     * @property {boolean}         provideFeedback         - Should a toast be used to provide feedback upon request fulfillment
     * @property {(jQuery|string)} statusNode              - The node on which the loading overlay should be placed (OverlayFactory.node)
     * @property {Object}          statusNodeOverlayConfig - The configuration (OverlayFactory.options) of the overlay applied on the status node
     * @property {Object}          errorToastOptions       - The options supported by Toaster#defaultOptions
     * @property {Object}          successToastOptions     - The options supported by Toaster#defaultOptions
     */
    static defaultOptions = {
        provideFeedback: true,
        statusNode: false,
        statusNodeOverlayConfig: {},
        errorToastOptions: {
            delay: 10000
        },
        successToastOptions: {
        },
    }
    options = {}
    loadingOverlay = false

    /**
     * Instantiate an AJAXApi object.
     * @param  {Object} options - The options supported by AJAXApi#defaultOptions
     */
    constructor(options) {
        this.mergeOptions(AJAXApi.defaultOptions)
        this.mergeOptions(options)
    }

    /**
     * Based on the current configuration, provide feedback to the user via toast, console or do not
     * @param {Object} toastOptions - The options supported by Toaster#defaultOptions
     * @param {boolean} isError     - If true and toast feedback is disable, write the feedback in the console
     * @param {boolean} skip        - If true, skip the feedback regardless of the configuration
     */
    provideFeedback(toastOptions, isError=false, skip=false) {
        const alteredToastOptions = Object.assign(
            {},
            isError ? AJAXApi.defaultOptions.errorToastOptions : AJAXApi.defaultOptions.successToastOptions,
            toastOptions
        )
        if (!skip) {
            if (this.options.provideFeedback) {
                UI.toast(alteredToastOptions)
            } else {
                if (isError) {
                    console.error(alteredToastOptions.body)
                }
            }
        }
    }

    /**
     * Merge newOptions configuration into the current object
     * @param {Object} The options supported by AJAXApi#defaultOptions
     */
    mergeOptions(newOptions) {
        this.options = Object.assign({}, this.options, newOptions)
    }

    /**
     *
     * @param  {FormData} formData       - The data of a form
     * @param  {Object}   dataToMerge    - Data to be merge into formData
     * @return {FormData} The form data merged with the additional dataToMerge data
     */
    static mergeFormData(formData, dataToMerge) {
        for (const [fieldName, value] of Object.entries(dataToMerge)) {
            formData.set(fieldName, value)
        }
        return formData
    }

    /**
     * @param {string} url           - The URL to fetch
     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions
     * @return {Promise<string>} Promise object resolving to the fetched HTML
     */
    static async quickFetchURL(url, options={}) {
        const constAlteredOptions = Object.assign({}, {provideFeedback: false}, options)
        const tmpApi = new AJAXApi(constAlteredOptions)
        return tmpApi.fetchURL(url, constAlteredOptions.skipRequestHooks)
    }

    /**
     * @param {string} url           - The URL to fetch
     * @param {Object} [options={}]  - The options supported by AJAXApi#defaultOptions
     * @return {Promise<Object>} Promise object resolving to the fetched HTML
     */
    static async quickFetchJSON(url, options={}) {
        const constAlteredOptions = Object.assign({}, {provideFeedback: false}, options)
        const tmpApi = new AJAXApi(constAlteredOptions)
        return tmpApi.fetchJSON(url, constAlteredOptions.skipRequestHooks)
    }

    /**
     * @param {string} url          - The URL to fetch
     * @param {Object} [options={}] - The options supported by AJAXApi#defaultOptions
     * @return {Promise<HTMLFormElement>} Promise object resolving to the fetched form
     */
    static async quickFetchForm(url, options={}) {
        const constAlteredOptions = Object.assign({}, {provideFeedback: false}, options)
        const tmpApi = new AJAXApi(constAlteredOptions)
        return tmpApi.fetchForm(url, constAlteredOptions.skipRequestHooks)
    }

    /**
     * @param {HTMLFormElement} form    - The form to be posted
     * @param {Object} [dataToMerge={}] - Additional data to be integrated or modified in the form
     * @param {Object} [options={}]     - The options supported by AJAXApi#defaultOptions
     * @return {Promise<Object>} Promise object resolving to the result of the POST operation
     */
    static async quickPostForm(form, dataToMerge={}, options={}) {
        const constAlteredOptions = Object.assign({}, {}, options)
        const tmpApi = new AJAXApi(constAlteredOptions)
        return tmpApi.postForm(form, dataToMerge, constAlteredOptions.skipRequestHooks)
    }

    /**
     * @param {string} url              - The URL from which to fetch the form
     * @param {Object} [dataToMerge={}] - Additional data to be integrated or modified in the form
     * @return {Promise<Object>} Promise object resolving to the result of the POST operation
     */
    static async quickFetchAndPostForm(url, dataToMerge={}, options={}) {
        const constAlteredOptions = Object.assign({}, {}, options)
        const tmpApi = new AJAXApi(constAlteredOptions)
        return tmpApi.fetchAndPostForm(url, dataToMerge, constAlteredOptions.skipRequestHooks, constAlteredOptions.skipFeedback)
    }

    /**
     * @param {string}  url                      - The URL to fetch
     * @param {boolean} [skipRequestHooks=false] - If true, default request hooks will be skipped
     * @param {boolean} [skipFeedback=false]     - Pass this value to the AJAXApi.provideFeedback function
     * @return {Promise<string>} Promise object resolving to the fetched HTML
     */
    async fetchURL(url, skipRequestHooks=false, skipFeedback=false) {
        if (!skipRequestHooks) {
            this.beforeRequest()
        }
        let toReturn
        try {
            const response = await fetch(url, AJAXApi.genericRequestConfigGET);
            if (!response.ok) {
                throw new Error(`Network response was not ok. \`${response.statusText}\``)
            }
            const dataHtml = await response.text();
            this.provideFeedback({
                variant: 'success',
                title: 'URL fetched',
            }, false, skipFeedback);
            toReturn = dataHtml;
        } catch (error) {
            this.provideFeedback({
                variant: 'danger',
                title: 'There has been a problem with the operation',
                body: error.message
            }, true, skipFeedback);
            toReturn = Promise.reject(error);
        } finally {
            if (!skipRequestHooks) {
                this.afterRequest()
            }
        }
        return toReturn
    }

    /**
     * @param {string}  url                      - The URL to fetch
     * @param {boolean} [skipRequestHooks=false] - If true, default request hooks will be skipped
     * @param {boolean} [skipFeedback=false]     - Pass this value to the AJAXApi.provideFeedback function
     * @return {Promise<string>} Promise object resolving to the fetched JSON
     */
    async fetchJSON(url, skipRequestHooks=false, skipFeedback=false) {
        if (!skipRequestHooks) {
            this.beforeRequest()
        }
        let toReturn
        try {
            const response = await fetch(url, AJAXApi.genericRequestConfigGETJSON);
            if (!response.ok) {
                throw new Error(`Network response was not ok. \`${response.statusText}\``)
            }
            const dataJson = await response.json();
            this.provideFeedback({
                variant: 'success',
                title: 'URL fetched',
            }, false, skipFeedback);
            toReturn = dataJson;
        } catch (error) {
            this.provideFeedback({
                variant: 'danger',
                title: 'There has been a problem with the operation',
                body: error.message
            }, true, skipFeedback);
            toReturn = Promise.reject(error);
        } finally {
            if (!skipRequestHooks) {
                this.afterRequest()
            }
        }
        return toReturn
    }

    /**
     * @param {string}  url                      - The URL to fetch
     * @param {boolean} [skipRequestHooks=false] - If true, default request hooks will be skipped
     * @param {boolean} [skipFeedback=false]     - Pass this value to the AJAXApi.provideFeedback function
     * @return {Promise<HTMLFormElement>} Promise object resolving to the fetched HTML
     */
    async fetchForm(url, skipRequestHooks=false, skipFeedback=false) {
        if (!skipRequestHooks) {
            this.beforeRequest()
        }
        let toReturn
        try {
            const response = await fetch(url, AJAXApi.genericRequestConfigGET);
            if (!response.ok) {
                throw new Error(`Network response was not ok. \`${response.statusText}\``)
            }
            const formHtml = await response.text();
            let tmpNode = document.createElement("div");
            tmpNode.innerHTML = formHtml;
            let form = tmpNode.getElementsByTagName('form');
            if (form.length == 0) {
                throw new Error('The server did not return a form element')
            }
            toReturn = form[0];
        } catch (error) {
            this.provideFeedback({
                variant: 'danger',
                title: 'There has been a problem with the operation',
                body: error.message
            }, true, skipFeedback);
            toReturn = Promise.reject(error);
        } finally {
            if (!skipRequestHooks) {
                this.afterRequest()
            }
        }
        return toReturn
    }

     /**
     * @param {HTMLFormElement}  form                     - The form to be posted
     * @param {Object} [dataToMerge={}]          - Additional data to be integrated or modified in the form
     * @param {boolean} [skipRequestHooks=false] - If true, default request hooks will be skipped
     * @param {boolean} [skipFeedback=false]     - Pass this value to the AJAXApi.provideFeedback function
     * @return {Promise<Object>} Promise object resolving to the result of the POST operation
     */
    async postForm(form, dataToMerge={}, skipRequestHooks=false, skipFeedback=false) {
        if (!skipRequestHooks) {
            this.beforeRequest()
        }
        let toReturn
        let feedbackShown = false
        try {
            try {
                let formData = new FormData(form)
                formData = AJAXApi.mergeFormData(formData, dataToMerge)
                let requestConfig = AJAXApi.genericRequestConfigPOST
                let options = {
                    ...requestConfig,
                    body: formData,
                };
                const response = await fetch(form.action, options);
                if (!response.ok) {
                    throw new Error(`Network response was not ok. \`${response.statusText}\``)
                }
                const clonedResponse = response.clone()
                try {
                    const data = await response.json()
                    if (data.success) {
                        this.provideFeedback({
                            variant: 'success',
                            body: data.message
                        }, false, skipFeedback);
                        toReturn = data;
                    } else {
                        this.provideFeedback({
                            variant: 'danger',
                            title: 'There has been a problem with the operation',
                            body: data.message
                        }, true, skipFeedback);
                        feedbackShown = true
                        this.injectFormValidationFeedback(form, data.errors)
                        toReturn = Promise.reject(data.errors);
                    }
                } catch (error) {
                    this.provideFeedback({
                        variant: 'danger',
                        title: 'There has been a problem with the operation',
                        body: error.message
                    }, true, feedbackShown);
                    toReturn = Promise.reject(error);
                }
            } catch (error) {
                this.provideFeedback({
                    variant: 'danger',
                    title: 'There has been a problem with the operation',
                    body: error.message
                }, true, feedbackShown);
                toReturn = Promise.reject(error);
            }
        } catch (error) {
            toReturn = Promise.reject(error);
        } finally {
            if (!skipRequestHooks) {
                this.afterRequest()
            }
        }
        return toReturn
    }

    /**
     * @param {string} url                       - The URL from which to fetch the form
     * @param {Object} [dataToMerge={}]          - Additional data to be integrated or modified in the form
     * @param {boolean} [skipRequestHooks=false] - If true, default request hooks will be skipped
     * @return {Promise<Object>} Promise object resolving to the result of the POST operation
     */
    async fetchAndPostForm(url, dataToMerge={}, skipRequestHooks=false, skipFeedback=false) {
        if (!skipRequestHooks) {
            this.beforeRequest()
        }
        let toReturn
        try {
            const form = await this.fetchForm(url, true, true);
            toReturn = await this.postForm(form, dataToMerge, true, skipFeedback)
        } catch (error) {
            toReturn = Promise.reject(error);
        } finally {
            if (!skipRequestHooks) {
                this.afterRequest()
            }
        }
        return toReturn
    }

    /**
     * @param {HTMLFormElement} form - The form form which the POST operation is coming from
     * @param {Object} [validationErrors={}]   - Validation errors reported by the server
     */
    injectFormValidationFeedback(form, validationErrors) {
        const formHelper = new FormValidationHelper(form)
        formHelper.injectValidationErrors(validationErrors)
    }

    /** Based on the configuration, show the loading overlay */
    beforeRequest() {
        if (this.options.statusNode !== false) {
            this.toggleLoading(true)
        }
    }

    /** Based on the configuration, hide the loading overlay */
    afterRequest() {
        if (this.options.statusNode !== false) {
            this.toggleLoading(false)
        }
    }

    /** Show or hide the loading overlay */
    toggleLoading(loading) {
        if (this.loadingOverlay === false) {
            this.loadingOverlay = new OverlayFactory(this.options.statusNode, this.options.statusNodeOverlayConfig);
        }
        if (loading) {
            this.loadingOverlay.show()
        } else {
            this.loadingOverlay.hide()

        }
    }
}