Can't get headerItems to work (CommentPost)

FetchTheDev

Hey,

For some reason this code (below) doesn't work:

extend(CommentPost.prototype, 'headerItems', function(items) {
items.add('location', 'This user lives in ' + this.props.post.user().username());
});

It gives me this error in the console:

"Uncaught TypeError: Cannot assign to read only property 'itemName' of This user lives in Somewhere, Someplace"

I got this code from the documentation, so it should work... but it doesn't.

Any ideas?

FetchTheDev

Anyone? I can't figure this out.

FetchTheDev

BUMP

Toby

Steady on there! No need to bump so frequently – I generally sleep for longer than 3 hours at a time 😉

In some instances you can't add a primitive string to an item list – it needs to be a VirtualElement object. So you need to wrap the string in a <span> tag:

items.add('location', <span>This user lives in {this.props.post.user().username()}</span>);

FetchTheDev

Toby Oh, thanks!
Can you update the documentation with that? 🙂

EDIT: That works, but is there a way to, from an extension, access the "props" of CommentPost to get user values?

Toby

The code you've written – this.props.post.user().username() – should work. Is it not working?

FetchTheDev

Toby Nope, it doesn't work.

My full code:

import { extend, override } from 'flarum/extend';
import app from 'flarum/app';

// Component imports
import CommentPost from 'flarum/components/CommentPost';
import ItemList from 'flarum/utils/ItemList';
import DiscussionRenamedPost from 'flarum/components/DiscussionRenamedPost';
import UserCard from 'flarum/components/UserCard';
import UserControls from 'flarum/utils/UserControls';

app.initializers.add('Attachments', () => {
// TODO
extend(UserCard.prototype, 'infoItems', (items) => {
    //if (items.lastSeen) delete items.lastSeen;
    //if (items.joined) delete items.joined;
});

override(DiscussionRenamedPost.prototype, 'icon', () => {
    return "star";
});

extend(CommentPost.prototype, "headerItems", (items) => {
    items.add("test", <span><i className="fa fa-star"></i> This is a test: {this.props.post.user().username()}</span>);
});
});

(If you're wondering why it's called Attachments, that's just what I'm going to implement once I figure out the extension API)

Toby

Just pushed a fix so that string primitives can now be added to item lists.

Toby

Ah, you can't use ES6 arrow functions if you are using this inside of the function. So change (items) ⇒ { to function(items) { 🙂

FetchTheDev

Toby Thanks.

Franz

Toby That's interesting and good to know. Do you know the reason why?

Toby

Franz One of the features of arrow functions is a lexical this binding. http://tc39wiki.calculist.org/es6/arrow-functions/

Franz

Toby Awesome!