feat(collections): Show Relevant Public Collections on Entity Pages

[akashgp09]

Problem

This PR Fixes: BB-614

Solution

• Loaded the collections property in the frontend newly added to the ORM
• created a new component <EntityRelatedCollections /> which shows all the related public collections of a entity on the enitity page

Areas of Impact

• author.js
• work.js
• edition.js
• edition-group.js
• publisher.js
• related-collections.js
• helpers/middleware.ts

[coveralls]

Coverage increased (+0.05%) to 60.91% when pulling 5f98958 on akashgp09:related-collections into 82e5222 on bookbrainz:master.

[MonkeyDo]

I think this mechanism would be better suited for the bookbrainz-data-js repo.

I looked into it, the syntax takes some getting used to but there is a way to fetch the collections an entity appears in using the standard BookshelfJS withRelated relations.

The idea after that is to simply add collections to the relations we load for each entity type here:
https://github.com/bookbrainz/bookbrainz-site/blob/master/src/server/helpers/middleware.ts#L146-L153

In the ORM, adding this to the Author model (it would be needed on each entity model) does the trick:

collections() {
  return this.belongsToMany('UserCollection').through('UserCollectionItem', 'bbid', 'collection_id', 'bbid');
},

With that, the entity once loaded in react will have the collections property available to pass to a component without the need for new routes.
And we can add tests for it in bookbrainz-data-js that way it's more robust.

Afterwards we can even look at requesting the collection owner to display it alongside, using collections.owner in the middleware relations.

[akashgp09]

I think this mechanism would be better suited for the bookbrainz-data-js repo.

Yeah, this would really make the solution simpler.
Thanks for the review, I Will make the changes soon :)

[MonkeyDo]

This is currently working quite nicely, but after reviewing again I think we need one more adjustment.

We should filter out the private collections that a user shouldn't have access to on the server side, before sending the props to the client side (where they could be accessed despite rendering only public collections on screen).

The method I have in mind would also allow us to show private collections from the current logged in user along with the public collections.

Filtering the collections should probably be done in makeEntityLoader, just before caching the entity in the response (res.locals.entity = entity;).

Something like this in makeEntityLoader should do it:

if (entity.collections) {
	entity.collections = entity.collections.filter(collection => collection.public === true ||
	parseInt(collection.ownerId, 10) === parseInt(req.user?.id, 10));
}

And then removing the if (collection.public) check in the EntityRelatedCollections component.

I think it would also be better to move the Related Entities section below the EntityLinks component (relationships and identifiers) which are more important information.

Sorry about not spotting all that before !

[akashgp09]

We should filter out the private collections that a user shouldn't have access to on the server side, before sending the props to the client side (where they could be accessed despite rendering only public collections on screen).

Aah Yes !!! that's really important. Thanks for all the feedbacks, I will make these changes in a bit.

[MonkeyDo]

Good to go, thank you !
Great new feature :)