React and backend. How to display users with their rights and present a situational set of buttons?

Question

Laravel

Good evening. I am currently writing (trying) a command system. Those. we pull the api server from the frontend, attach / detach existing users from the project, and also a simple search.
Everything should look like this schematically:

Участник [имя] [кнопка удаления участника]
Участник [имя] [кнопка удаления участника]
...
[форма поиска]
Найденный пользователь [Имя] [кнопка добавления пльзователя в участники]
...

Directly the components of the participants, their removal and addition by search, the search form itself - I implemented it.
But I ran into implementation complexity when there is also the concept of a user's role in the project:

• The creator of the project - cannot delete himself, respectively, and the delete button for him should not be visible, but he can add other users.
  
• Project Manager - Can add and remove users, but cannot remove the creator (but can remove himself).
  
• Normal member - Can delete himself, but does not have access to the search component and, accordingly, the addition of other users.
  

But you still need to somehow implement subscriptions to users ('creator'/'manager'). On the server, it's not a problem to create a specific response - a response with a list of roles / bool roles, etc., but whatever way I invent - either the implementation on the frontend turns out to be very clumsy, or the backend generates too redundant a response, as with a list of roles, and with the flags of these roles, but even in this case, large if constructions appear in the frontend.
Perhaps there are some best practices for implementing such a conclusion, or can you advise how best to do it?

Answer 1

Simple conditions will suffice for you:

render() {
  const { me, project, users } = this.props;
  const isMeModerator = isModerator(me);
  const isMeCreator = me.id === project.creator_id;
  const shouldShowSearchForm = isMeModerator || isMeCreator;

  return (
    <div>
      {shouldShowSearchForm && <Search />}
      <ul>
         {users.map(user => {
           const isUserCreator = user.id === project.creator_id;
           const shouldShowDeleteButton = (isMeModerator || isMeCreator) && !isUserCreator;

           return (
             <li key={user.id}>
               {user.name}
               {shouldShowDeleteButton && <Button>Delete</Delete>}
               {isUserCreator && <CreatorLabel />}
             </li>
           );  
         }}
      </ul>
    </div>
  );
}

If the application has many elements that depend on roles and permissions, you can write a container with a view interface:

<PermissionsChecker requiredPermissions={permissions}>
  <SomeComponent />
</PermissionsChecker>

Here permissions can be connected to PermissionsChecker from the store and checked against those received in the requiredPermissions property, and if the necessary rights are present in the store, return the child component, otherwise null.