Question: How to reactively check roles in React with v4.0.0?

[derwaldgeist]

I upgraded from Meteor 2 with roles@1.x to Meteor 3 with roles@4.0.0. With the old package, where the roles were bound to the user object, calls to Roles.isUserInRole() worked reactively. We used this a lot to enable or disable app features based on roles. It was pretty impressive when we just added new features to a user in a Zoom session.

But now, the user has to reload the page to get the upated roles information, although I publish the role information like this:

import { Meteor } from 'meteor/meteor';

Meteor.publish(null, async function() {
 if (!this.userId) return this.ready();
 return Meteor.roleAssignment.find({ 'user._id': this.userId });
});

What is the best way to get back to the old reactivity in React? A hook maybe that works reactively?

[github-actions]

Thank you for submitting this issue!

We, the Members of Meteor Community Packages take every issue seriously.
Our goal is to provide long-term lifecycles for packages and keep up
with the newest changes in Meteor and the overall NodeJs/JavaScript ecosystem.

However, we contribute to these packages mostly in our free time.
Therefore, we can't guarantee your issues to be solved within certain time.

If you think this issue is trivial to solve, don't hesitate to submit
a pull request, too! We will accompany you in the process with reviews and hints
on how to get development set up.

Please also consider sponsoring the maintainers of the package.
If you don't know who is currently maintaining this package, just leave a comment
and we'll let you know

[jankapunkt]

@StorytellerCZ I cannot say much about how its done in React, maybe you?

[StorytellerCZ]

It is something that I have been thinking a bit myself. I'm looking to test things out with using the useTracker hook. Now that roles are part of Meteor core we can think of adding roles specific hooks to the official Meteor package.

[derwaldgeist]

@StorytellerCZ I was actually able to solve this using useTracker(), for my functional components, and converted all remaining class components into FCs (might also work with withTracker(), but I was doing some cleanup anyways). Working fine now.

I basically implemented my own hook that looks like this:

const hasRole = (userId, role) => Roles.userIsInRole(userId, role);

export const useRoleFunctions = () => {
  const userId = Meteor.userId();
    return {
      hasRole: role => useTracker(() => hasRole(userId, role), [userId]),
      hasAdminRole: () => useTracker(() => hasRole(userId, 'admin'), [userId]),
      hasBusinessRole: () => useTracker(() => hasRole(userId, 'business'), [userId]),
      hasTesterRole: () => useTracker(() => hasRole(userId, 'tester'), [userId])
      ...
    };
};

and then can be used like this:

const { hasRole, hasAdminRole } = useRoleFunctions();
const isWhateverRole = hasRole('whatever');
const isAdmin = hasAdminRole();

These functions are then reactive, as I wanted them to be.

Of course, this approach could be simplified to one single hasRole hook.

The reason why I am using separate hooks for specific roles is that I can then - in one single file - control-click on one of the role-specific calls to see where exactly they are being used (instead of using a file-wide search). This is pretty convenient.

[StorytellerCZ]

Yes, I imagined just that kind of solution. 😊