Extending UserCard's View() Method

Digitalam

Hi! 🙂 I'm writing an extension that mainly affects the UserCard component.

My idea is to add another nickname right next to the username (wrapped in a h2 element). But the only way to do that, as far as I know, is to override the view() method in the UserCard component. And what follows are a tonne of errors. 🤣

So is there any way to do it without breaking the system? I've watched a bunch of @clarkwinkelmann videos (Very informative btw! Learnt a lot!) and the closest I can get to is from his Status Extension. 🙏

datitisev

Digitalam Are the errors you get caused by your extension, core, or another extension?

If multiple extensions override the same view() there's a greater chance something will break. Usually when doing that you want to use filtering functions looking for a specific class name and not using the index that way your code can adapt.

If you could post these errors (usually the important one is the first one that happens, and the rest just redraw issues)

Digitalam

It looks like it's coming from my own extension.

What I did was override the view method by returning my own component.

override(UserCard.prototype, "view", function() {
  return (ProfileCard, {/* attrs */})
}

The errors are thousands of TypeError: Cannot read property 'view' of undefined

But when I didn't use a component and instead write everything in my index.js file, everything seems to be working fine. 😮

askvortsov

Digitalam Is this syntax even valid? Try using JSX

clarkwinkelmann

Digitalam if you're returning a native Mithril component, use m(ProfileCard, {/* attrs */}) (m helper function)

If you're returning a Flarum component you can alternatively use ProfileCard.component({/* attrs */})

The JSX syntax works for both native and Flarum components <ProfileCard attr={value}>

Digitalam

Oops omg! I guess I'm blind! Thanks guys!

Anyway, if I may, I ran into another problem. Something to do with user relationships.

In my index.js file, before loading my component, I have const relation = user.myRelation() and I logged it.

When I hover over the user on a user's post, it throws me false. And whatever attributes I chained to it throws me TypeError: user.TypeUser(...).name() is not a function

Note: All goes well if I hover over the authed user's profile first. No error thrown there.

Any help? 🙏

clarkwinkelmann

Digitalam a relationship will return false if the relationship is not loaded.

This could be because it wasn't included in the API payload, or it could be because it was in the API payload but its type couldn't be matched to a javascript model and was ignored.

If it works in some order and not other, it's probably because the data isn't loaded at that time. If you need the data earlier you might need to add additional logic to load that relationship. Can you share how you loaded your new relationship? On which controller(s) did you include it?

Digitalam

clarkwinkelmann Ooh I see, I'll put my code below, thanks! 🙂

extend.php

(new Extend\Model(User::class))
        ->hasOne('relation', 'Digitalam\Relation\Relation'),

    (new Extend\Routes('api'))
        ->get('/relation', 'relation.index', ListRelationsController::class)
        ->get('/relation/{id:[0-9]+}', 'relation.show', ShowRelationController::class)
        ->post('/relation', 'relation.create', CreateRelationController::class)
        ->patch('/relation/{id:[0-9]+}', 'relation.update', UpdateRelationController::class),


    (new Extend\ApiSerializer(BasicUserSerializer::class))
        ->hasOne('relation', RelationSerializer::class),

    (new Extend\ApiController(ListUserController::class))
        ->addInclude('relation'),
    (new Extend\ApiController(ShowUserController::class))
        ->addInclude('relation'),
    (new Extend\ApiController(UpdateUserController::class))
        ->addInclude('relation'),
    (new Extend\ApiController(CreateUserController::class))
        ->addInclude('relation'),

Relation.js

export default class Relation extends Model {
  id = Model.attribute("id");
  name = Model.attribute("name");

index.js (In app.initializers.add)

app.store.models["Relation"] = Relation; // Imported Relations model already
User.prototype.Relation = Model.hasOne("Relation");

override(UserCard.prototype, "view", function (view) {
  const relationName = user.relation().name()
  const relationId = user.relation().id()

  return m(myComponent, {/*attrs*/});
}

So far, visiting the api routes of my model, it can post, patch and get just as normal.

Digitalam

Hi! After thinking about it and debugging for a while... I figured the better question should be:

How to include data into the API payload? Is it through a model? Or a ForumAttribute class, perhaps?

Ps: Should I split this into a new discussion? 😅

Digitalam

Ah I solved it! For any future users with problems with passing data to the frontend:

I extended the ShowForumController with a new class LoadForumRelationRelationship. That way, my relation data is passed directly into the payload.

Also, I added addInclude to a few controllers since I'm extending the UserCard component.

extend.php

    (new Extend\ApiSerializer(UserSerializer::class))
        ->hasOne('Relation', TypeUserSerializer::class),

    (new Extend\ApiController(ListUsersController::class))
        ->addInclude('Relation'),
    (new Extend\ApiController(ShowUserController::class))
        ->addInclude('Relation'),
    (new Extend\ApiController(UpdateUserController::class))
        ->addInclude('Relation'),
    (new Extend\ApiController(CreateUserController::class))
        ->addInclude('Relation'),

    (new Extend\ApiController(ShowDiscussionController::class))
        ->addInclude('posts.user.Relation'),
    
    (new Extend\ApiController((ListPostsController::class)))
        ->addInclude("user.Relation"),
    (new Extend\ApiController((ShowPostsController::class)))
        ->addInclude("user.Relation"),

    (new Extend\ApiController(ShowForumController::class))
        ->addInclude("Relation")
        ->prepareDataForSerialization(LoadForumRelationRelationship::class)

LoadForumRelationRelationship.php

class LoadForumRelationRelationship
{
    public function __invoke(ShowForumController $controller, &$data, ServerRequestInterface $request)
    {
        $data['Relation'] = Relation::all();
    }
}

Oh and I added the relationship to my Relation serializer as well! 🙂