Extension that calls an API is not updating the UI (My first extension)

FlamingoIRL

Hey all. Newbie here. I've tried searching and tried ChatGPT but I can't figure this out.

I've managed to get an extension set up and integrated. On loading my flarum index page, it calls an API and presents a "loading" text on the UI. When the API returns successfully it is not updating the UI. If I browse to a new page, the UI then loads correctly.

I am seeing that m.request(...) and m.redraw() are not redrawing as I expect.

I was extending the DiscussionList.prototype 'view'. I found that the DiscussionList has special redraw logic. As a test, I switched my extension to the IndexPage but it's still not refreshing.

Any help, pointers or thoughts appreciated! Code below:

import { extend } from 'flarum/extend';
import IndexPage from 'flarum/components/IndexPage';
import m from 'mithril';

app.initializers.add('myExtension-extension', () => {
    extend(IndexPage.prototype, 'view', function (vdom) {
        // Initialize state
        let myValue = "-";
        let isLoading = true;

        // Fetch upvote data from your API
        m.request({
            method: 'GET',
            url: app.forum.attribute('apiUrl') + '/myvalues/data'
        }).then(result => {
            myValue = result.data.attributes.myValue;
            isLoading = false;

            m.redraw();
        }).catch(err => {
            myValue = 0;
            isLoading = false;

            m.redraw();
        });

        // Render logic
        if (isLoading) {
            vdom.children.unshift(m('div', '...Loading...'));
        } else {
        .....
        }

FlamingoIRL

I am able to get this to load the data after I changed the above to use app.request instead of m.request and I used background: false in the request. My understanding is that this should be avoided.. so I am still open to better suggestions.

clarkwinkelmann

You should not retrieve any data inside of the view method. The view is where the current state/data is used to generate the page template. That method runs many times for the same page. Doing a request there will at best not work and at worst lead to an infinite loop.

The best place to retrieve data is probably in oninit (same extend but replace view with oninit). Keep the view extend and only leave the part that modifies vdom there. To share your state between oninit and view, you can replace your local variables with properties on the IndexPage object. Simply use this.yourVariableName as this will automatically point to the page object in the extend callback. Ideally prefix the name of the variable with your extension or feature name, as "isLoading" could be too generic and conflict with Flarum or other extensions.

The init/view/vdom concepts are from the Mithril framework. I recommend taking a look at their documentation. To familiarize yourself with Mithril concepts, you could try building a simple Mithril component without Flarum. I believe they have some examples that retrieve data from an API to display it in their documentation. Flarum's extend() syntax is just a way to modify existing Mithril components but it still works the same underneath.

Don't hesitate if you have any question though, we are here to help 😃

FlamingoIRL

Thanks for the response! With your suggestions and some playing around, it's now working.