React и бэкэнд. Как отобразить пользователей с их правами и представить ситуативный набор кнопок?

Question

[NikolayAlb]

Добрый вечер. В данный момент пишу (пытаюсь) систему команды. Т.е. мы с фронтенда дергаем апи сервера, прикрепляем/открепляем существующих юзеров от проекта, и также несложный поиск.
Примерно так схематично должно всё выглядеть:

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

Непосредственно компоненты участников, их удаление и добавление по поиску, самой формы поиска - я реализовал.
Но я столкнулся со сложностью реализации, когда существует еще понятие роли пользователя в проекте:

• Создатель проекта - не может удалить себя, соответственно и кнопки удаления для него быть не должно видно, но может добавлять остальных юзеров.
  
• Менеджер проекта - Может добавлять и удалять юзеров, но не может удалять создателя (но себя удалить может).
  
• Обычный участник - Может удалить себя, но при этом не имеет доступа к компоненту поиска и соответственно, добавления других юзеров.
  

Но еще нужно каким-то образом реализовать приписки к пользователям ('creator'/'manager'). На сервере не проблема создать определенный ответ - ответ со списком ролей/bool ролей и т.д., но какой-бы способ я не выдумывал - либо реализация на фронтенде получается очень корявой, либо бэкэнд формирует слишком избыточный ответ, как со списком ролей, так и с флагами этих ролей, но и при таком случае во фронтенде у нас появляются крупные конструкции ифов.

Возможно есть какие-то best practice реализации подобного вывода, или может посоветуйте как лучше сделать?

Answer 1

[Антон Спирин]

Вам хватит простых условий:

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>
  );
}

Если в приложении много элементов которые зависят от ролей и полномочий можно написать контейнер с интерфейсом вида:

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

Тут permissions можно коннектить в PermissionsСhecker из стора и сверять с полученными в свойстве requiredPermissions и в случае наличия необходимых прав в store, возвращать дочерний компонент, в противном случае null.

Comments

[NikolayAlb]

А каким образом JS должен получить me/project? У меня не SPA, весь роутинг на стороне сервера. И еще что делать с ключами для кнопок? Реакт ругается, что без ключей нельзя, а с ключом айди пользователя - ругается, что ключи не должны повторяться. А так идею понял.

[Антон Спирин]

NikolayAlb, ну если у вас не SPA, можно на стороне сервера передавать в шаблон начальное состояние:

<script>
  window.initialState = {{ initialState }};  // на примере шаблонизатора handlebars
</script>

Дальше уже передавать его в redux или еще куда.

По поводу ключей, надо либо чтобы id пользователей не повторялись, либо можно использовать index:
{data.map((item, index) => <Item key={index} />)}

[NikolayAlb]

Антон Спирин, понял, я в черновом варианте примерно так и инициализировал isCreator/isManager. Ладно, благодарю.

[NikolayAlb]

Антон Спирин, насчет ключа - я не это имел в виду. Имена уникальны. У меня через map итерируется компонент MemberComponent:

{this.state.members.map( (member) => <MemberComponent key={'member_'+member.name} member={member} links={links} canDelete={this.authCanDelete} detachUser={this.detachUser.bind(this)}/> )}

Но в самом MemberComponent у меня есть вот такая иерархия:

MemberComponent:
    MemberControlPanel:
        DeleteButton
        CreatorBadge
        ManagerBadge

Вот реакт ругается на отсутствие ключей у всех вложенных компонентов. А Index не передается во вложенные компоненты, как я понял.

[NikolayAlb]

NikolayAlb, все, я просто добавил приписку к имени, думаю это правильно решение:
key={'manager_badge_'+this.props.member.name}