Add roles section to UserDetails

src/components/tools/user-details.js

@@ -23,6 +23,7 @@ import {
 } from '../../prop-types/common';
 import Avatar from '../user/avatar';
 import FollowButton from '../follow-button';
+import UserRoles from './user-roles';
 
 
 export default function UserDetails({ current_user, following, triggers, user }) {
@@ -52,6 +53,7 @@ export default function UserDetails({ current_user, following, triggers, user })
               {user.getIn(['more', 'bio'])}
             </div>
           }
+          <UserRoles roles={user.getIn(['user', 'more', 'roles'])} />
           <FollowButton
             active_user={current_user}
             following={following}

src/components/tools/user-roles.js

@@ -0,0 +1,35 @@
+/*
+ This file is a part of libertysoil.org website
+ Copyright (C) 2016  Loki Education (Social Enterprise)
+
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU Affero General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU Affero General Public License for more details.
+
+ You should have received a copy of the GNU Affero General Public License
+ along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+import React from 'react';
+
+
+export default function UserRoles({ roles }) {
+  if (!roles || !roles.size) {
+    return null;
+  }
+
+  const roleElements = roles.map(role => (
+    <span key={role.get('id')} title={role.get('description')}>{role.get('title')}</span>
+  ));
+
+  return (
+    <div>
+      {roleElements}
+    </div>
+  );
+}