can't add new badges

karman

hi! i want to add new badges to users in discussions. like this: https://prnt.sc/v3eof6
my code:

import app from 'flarum/app'
import { extend } from 'flarum/extend';
import PostUser from 'flarum/components/PostUser';
import Badge from 'flarum/components/Badge';

 app.initializers.add('studio/fix-chat', () =>{
     extend(PostUser.prototype,'badges',function(badges){
         badges.add('sticky', Badge.component({
            type: 'sticky',
            label: app.translator.trans('flarum-sticky.forum.badge.sticky_tooltip'),
            icon: 'fas fa-thumbtack'
          }));
     })
 })

but it's doesn't work, badges will not appear
Any hints or suggestions would be greatly appreciated.

clarkwinkelmann

karman is this code based on an example from somewhere? PostUser has no method named badges, and never had, to my knowledge.

Have you tried Discussion.prototype.badges ? It's what the Subscription extension uses for example:

https://github.com/flarum/subscriptions/blob/v0.1.0-beta.13/js/src/forum/addSubscriptionBadge.js

If that doesn't help, please specify which version of Flarum you are working with and how do you include/compile that code? Is it an extension?

karman

clarkwinkelmann thanks for your help, i am trying to create a new extension
this extension should add many icons to the user only in post like this https://prnt.sc/v3h2g7
maybe I don't understand, but in my mind component Discussion doesn't work with badges in post
Adding badges to discussions is easy for me,and so hard in posts. And i have 14 flarum version

karman

clarkwinkelmann I learned more in this thread, and now i try to create extension for PostUser to add new badges to user, beacause PostUser don't have the method I needi. This is my code:

import app from 'flarum/app'
import { extend } from 'flarum/extend';
import PostUser from 'flarum/components/PostUser';
import Badge from 'flarum/components/Badge';
import ItemList from 'flarum/common/helpers/ItemList';


class HighlightAuthor extends PostUser {
    content(){
        const badges = new ItemList();
        badges.add('hidden', <Badge type="hidden" icon="fas fa-gavel" label={app.translator.trans('core.lib.badge.hidden_tooltip')} />);
        return badges;
    }
}
 app.initializers.add('studio/fix-chat', function(){
     console.log('load');
     extend(HighlightAuthor.prototype,'content',function(badge){

        badge.add('gavel', Badge.component({
            type: 'sticky',
            label: 'karman',
            icon: 'fas fa-gavel'
          }));

     })
 })

its not working, but i don't know why. I will be grateful for any help, even a little advice

clarkwinkelmann

karman the badges on the user avatar in the discussion list are User.prototype.badges

There's however no way of knowing whether they are rendered in a discussion or somewhere else in the application.

To insert badges only on the post, you would have to extend PostUser.prototype.view and manipulate the virtual DOM that contains the badges.

karman

clarkwinkelmann thank you very much for helping
beginner developers!

askvortsov

One thing that might work is extending User.prototype.badges, but only adding badges if app.current.matches(DiscussionPage). They'd still show up in the user cards that appear on hover though.

karman

askvortsov thanks. with your help i did it! 😀