How to Make an Extension to the Discussion Track New Updates

clarkwinkelmann

nalin1729 you can access this.discussion from DiscussionPage.sidebarItems.

I think the subscription extension adding the "Follow" button underneath "Reply" is a good example of what you're trying to achieve? https://github.com/flarum/subscriptions/blob/v0.1.0-beta.13/js/src/forum/addSubscriptionControls.js#L27

You need to use a regular function() {} and not an arrow function () => {} to access the this object.

nalin1729

clarkwinkelmann Hi Clark, thanks for the tip about accessing this.discussion from sidebarItems.

Unfortunately, I don't think it solved my problem, because I still need to refresh before seeing the updates reflected.
Actually, I've noticed that this.discussion doesn't change value even when navigating from one discussion to another. So for example if when I first load the page and navigate to one discussion and I ask for this.discussion (by pressing the button I created) it returns the right data. But immediately afterward when I change to another discussion and ask for this.discussion, it returns the same data from the first discussion, not the current one that is on the page.

How can I force this.discussion to be updated to the most recent value without actually forcing the user to refresh the page?

clarkwinkelmann

nalin1729 that's odd. Can you share the code that presents this behavior?

If you avoid storing anything globally, you should be fine. Reading the value from this or props properties from the parent and passing them down to props to the child components without storing them in global variables.

nalin1729

clarkwinkelmann

In my index.js:

const mentionExtension = function(items) {
  items.add('MentionInfo', Button.component({
    // Various attributes
    onclick: () => {
      app.modal.show(new MentionModal({
        discussion: this.discussion
      }));
    },
  }
  ));
}

app.initializers.add('my/extension', () => {
  extend(DiscussionPage.prototype, 'sidebarItems', mentionExtension);
});

And in mentionModal.js:

export default class MentionModal extends Modal {
    content() {
        let domElements = [];
        let data = this.props.discussion.store.data.posts;

        // HERE: If I console.log(data) then it has the right info (it has the new post)!
        for (var item in data) {
            let obj = data[item].data;
            if (obj['type'] !== 'posts') continue;
            if (obj.relationships.discussion.data.id !== this.props.discussion.data.id) continue;

            let mentions = obj.relationships.mentionedBy;

            if (mentions) mentions = mentions.data;
            else continue;

            if (mentions.length === 0) {
                domElements.push(m("div", `Post with ID ${obj.id} has no replies`));
            }

            else {
                mentions.forEach((currentValue) => {
                    domElements.push(m("div", `Post with ID ${obj.id} was replied to by post with ID ${currentValue.id}`));
                });
            }
        }
        return domElements;
     }
  }

I think I was able to fix the problem with changing discussions, but I still have the problem where adding a new response does not create a new entry in my modal until the user refreshes. What's even weirder is if I console log the the data that I'm working with in the commented out line above, the new post shows up, but it isn't being registered in the modal, no matter how many times I click the button, until I refresh.

nalin1729

clarkwinkelmann Also, is this.discussion.store.data.posts the recommended place to get the data that I want (the mentions)? I noticed there is redundant data in the discussion object, and that this.discussion.store seems to retain all the posts that have been retrieved from the server thus far (even those not from the current discussion). If there is a cleaner solution, please let me know - thanks!

clarkwinkelmann

nalin1729 I think the problem is that not all posts objects have a discussion relationship, depending on how those were loaded via the API. So your loop will probably miss many of the posts that are actually in the discussion.

The best would be for your extension to load its own data from the API, either by making multiple requests to Flarum's native endpoint used for paginated discussion browsing (I don't remember the path), or by creating your own endpoint which will return the data pre-formatted or just with the required relationships. This will ensure all data has been loaded in a way you can recognize from your extension, and also ensure it works when other extensions customize the loaded data.

If you just want to tap into the posts that are currently visible, you could look into this.streamon DiscussionPage. (which is an instance of PostStream). Or you can directly check this.discussion.posts() / this.discussion.postIds() (both use the same data source) which will contain a summary of all posts in that discussion. That's what PostStream uses behind the scenes to know which posts exist.

It's worth noting that all this code is being rewritten for beta 14, so make sure you check the beta13 tag on GitHub if you're browsing Flarum source code.

By the way:

this.props.discussion.store can be replaced with app.store
store.data.posts can be replaced with app.store.all('posts')
obj.relationships.discussion can be replaced with obj.discussion() (returns false if no discussion, otherwise a Discussion model object)
obj.relationships.discussion.data.id can then become obj.discussion() && obj.discussion().id()

nalin1729

clarkwinkelmann Thanks for the detailed reply! Could you just point me to the place where all of the endpoints are document?

clarkwinkelmann

nalin1729 unfortunately there isn't really a centralized documentation for that at this point.

For REST API endpoint, you can check the browser network console to see how Flarum loads data or check out the controllers in the source code.

For the javascript API for the Store, you can check out the source code for Store.js or see how other extensions interact with it.

nalin1729

clarkwinkelmann Is there at least any documentation about Discussion and its methods? Seems like this an element that I will be using a lot.

For example, can I be guaranteed that the output of postIds and posts will be in sorted order by post ID?

And finally, can you explain a little more in detail what forms the query and options parameters to the find method in Store.js do? Specifically, what form of data to they take in? For example, how would I retrieve all posts associated with the same discussion?

clarkwinkelmann

nalin1729 the documentation is the source code 💩

I'm not sure I can answer all your question without spending some time in the code.

The javascript model classes source code is here https://github.com/flarum/core/tree/v0.1.0-beta.13/js/src/common/models

But those classes mostly define shortcuts to access the attributes and relationships. Which relationships are loaded depends on what is requested during a database request.

Requests follow the JSON:API https://jsonapi.org/ specification. The query and options parameters are directly applied to the REST request and follow that specification.

To find which includes and sort options are available on a REST endpoint, you need to check out the source code of the matching controller. For example when requesting GET /api/discussion/<id>, the matching controller will be https://github.com/flarum/core/blob/v0.1.0-beta.13/src/Api/Controller/ShowDiscussionController.php and on this controller 'posts', 'posts.discussion', 'posts.user', 'posts.user.groups', 'posts.editedUser', 'posts.hiddenUser' relationships are included by default, with 'user', 'lastPostedUser', 'firstPost', 'lastPost' being optionally returned.

The difficult part about documenting the API is that extensions can make many changes to it. The default and optional includes can be changed by extensions. Extensions can also register their own relationships.

All "list" REST endpoints also implement pagination. You won't be able to get "all" posts from a single request if there are more than 50 (the maximum results you can request by default)

nalin1729

clarkwinkelmann Got it, thanks!