Method called twice in html_load controller

[thewebartisan7]

** Describe the bug **
In the html_load controller the method turbo() is called twice.
Here https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/html_load_controller.js#L10
and here https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/html_load_controller.js#L20

The same about csrf() method, since turbo:load is fired also in first page load, it's called here:
https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/html_load_controller.js#L19
and here: https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/html_load_controller.js#L28

** Suggested change **

By just removing method connect(), it should works fine, because in initialize method is called turbo() which call also csrf() via turbo:load event.

import ApplicationController from "./application_controller";
import axios from 'axios';

export default class extends ApplicationController {
    /**
     *
     */
    initialize() {
        this.axios();
        this.turbo();
    }

    /**
     * Initialization & configuration Turbo
     */
    turbo() {
        document.addEventListener("turbo:load", () => {
            this.csrf();
        });
    }

    /**
     * Creating an instance Axios
     */
    axios() {
        window.axios = axios;
    }

    /**
     * We'll load the axios HTTP library which allows us to easily issue requests
     * to our Laravel back-end. This library automatically handles sending the
     * CSRF token as a header based on the value of the "XSRF" token cookie.
     */
    csrf() {
        const token = document.head.querySelector('meta[name="csrf_token"]');

        if (!token) {
            return;
        }

        /**
         * Next we will register the CSRF Token as a common header with Axios so that
         * all outgoing HTTP requests automatically have it attached. This is just
         * a simple convenience so we don't have to attach every token manually.
         */
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
        window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        document.addEventListener("turbo:before-fetch-request", (event) => {
            event.detail.fetchOptions.headers["X-CSRF-TOKEN"] = token.content;
        });

    }

    /**
     *
     */
    goToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
}

Before submitting PR, can you please tell me if I am missing something?
After a quick test it work fine also with above changes.

[thewebartisan7]

I think that I understand why you are calling csrf() twice, because all initialize and connect controllers method are fired before turbo:load, and if there is any ajax request via axios, then may happen that csrf_token it's not set.

Am I right?

However, we don't need to call turbo() in initialize and connect, I think. Or am I missing something?

So below should be enough:

import ApplicationController from "./application_controller";
import axios from 'axios';

export default class extends ApplicationController {
    /**
     *
     */
    initialize() {
        this.axios();
        this.turbo();
        this.csrf();
    }

    /**
     * Initialization & configuration Turbo
     */
    turbo() {
        document.addEventListener("turbo:load", () => {
            this.csrf();
        });
    }

    /**
     * Creating an instance Axios
     */
    axios() {
        window.axios = axios;
    }

    /**
     * We'll load the axios HTTP library which allows us to easily issue requests
     * to our Laravel back-end. This library automatically handles sending the
     * CSRF token as a header based on the value of the "XSRF" token cookie.
     */
    csrf() {
        const token = document.head.querySelector('meta[name="csrf_token"]');

        if (!token) {
            return;
        }

        /**
         * Next we will register the CSRF Token as a common header with Axios so that
         * all outgoing HTTP requests automatically have it attached. This is just
         * a simple convenience so we don't have to attach every token manually.
         */
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
        window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        document.addEventListener("turbo:before-fetch-request", (event) => {
            event.detail.fetchOptions.headers["X-CSRF-TOKEN"] = token.content;
        });

    }

    /**
     *
     */
    goToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
}

I am just trying to understand the logic behind this stimulus controller, I am aware that even calling twice will not create an issue.

[thewebartisan7]

For avoid to call twice the csrf() I think that we can use turbo:visit event which is fired before any connect or initialize method, and it's not fired during first page load.

import ApplicationController from "./application_controller";
import axios from 'axios';

export default class extends ApplicationController {
    /**
     *
     */
    initialize() {
        this.axios();
        this.turbo();
        this.csrf();
    }

    /**
     * Initialization & configuration Turbo
     */
    turbo() {
        document.addEventListener("turbo:visit", () => {
            this.csrf();
        });
    }

    /**
     * Creating an instance Axios
     */
    axios() {
        window.axios = axios;
    }

    /**
     * We'll load the axios HTTP library which allows us to easily issue requests
     * to our Laravel back-end. This library automatically handles sending the
     * CSRF token as a header based on the value of the "XSRF" token cookie.
     */
    csrf() {
        const token = document.head.querySelector('meta[name="csrf_token"]');

        if (!token) {
            return;
        }

        /**
         * Next we will register the CSRF Token as a common header with Axios so that
         * all outgoing HTTP requests automatically have it attached. This is just
         * a simple convenience so we don't have to attach every token manually.
         */
        window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
        window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

        document.addEventListener("turbo:before-fetch-request", (event) => {
            event.detail.fetchOptions.headers["X-CSRF-TOKEN"] = token.content;
        });

    }

    /**
     *
     */
    goToTop() {
        window.scrollTo({top: 0, behavior: 'smooth'});
    }
}

[tabuna]

Hi, sorry for not answering for a long time, it should be good now. Feel free to open it again if you see problems.

[thewebartisan7]

I didn't test, but checking here https://github.com/orchidsoftware/platform/blob/master/resources/js/controllers/html_load_controller.js#L10-L14 it seem that it's called twice since turbo:load is called also in first page load.