Fetch display name and avatar of each user

Change-Id: I330f2bc6c0c1fe5db1df99448eb1f06d092137d4

src/features/user-admin/List.js

@@ -4,6 +4,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom'
 import { Table, TableBody, TableCell, TableHead, TableRow } from '@material-ui/core';
+import { ListItem } from '.';
 import * as actions from './redux/actions';
 
 export class List extends Component {
@@ -28,19 +29,15 @@ export class List extends Component {
         <Table className="user-list">
           <TableHead>
             <TableRow>
+              <TableCell>Avatar</TableCell>
+              <TableCell>Display Name</TableCell>
               <TableCell>Username</TableCell>
               <TableCell>Guest</TableCell>
               <TableCell>Admin</TableCell>
             </TableRow>
           </TableHead>
           <TableBody>
-            {userList.map(item => (
-              <TableRow key={item.name}>
-                <TableCell>{item.name}</TableCell>
-                <TableCell>{item.is_guest ? 'X' : ''}</TableCell>
-                <TableCell>{item.admin ? 'X' : ''}</TableCell>
-              </TableRow>
-            ))}
+            {userList.map(item => (<ListItem key={item.name} name={item.name} is_guest={item.is_guest} is_admin={item.admin} />))}
           </TableBody>
         </Table>
       </div>

src/features/user-admin/ListItem.js

@@ -0,0 +1,70 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import { Avatar, TableCell, TableRow } from '@material-ui/core';
+import * as actions from './redux/actions';
+
+export class ListItem extends Component {
+  static propTypes = {
+    mtx: PropTypes.object.isRequired,
+    userAdmin: PropTypes.object.isRequired,
+    actions: PropTypes.object.isRequired,
+    name: PropTypes.string.isRequired,
+    is_guest: PropTypes.bool,
+    is_admin: PropTypes.bool,
+  };
+
+  componentDidMount() {
+    const { fetchProfile } = this.props.actions;
+    const { name } = this.props;
+    fetchProfile(name);
+  }
+
+  render() {
+    const { name, is_guest, is_admin } = this.props;
+    const { userProfiles } = this.props.userAdmin;
+    var profile = {};
+    if (name in userProfiles) {
+      profile = userProfiles[name];
+    }
+    // create url for showing avatar image
+    var avatar_src = "";
+    if ( typeof profile.avatar_url !== 'undefined') {
+        // mxc://serverName/mediaId
+        var res = profile.avatar_url.split("/");
+        var serverName = res[2];
+        var mediaId = res[3];
+        avatar_src = "https://" + serverName + "/_matrix/media/r0/thumbnail/" + serverName + "/" + mediaId + "?width=36&height=36&method=crop";
+    }
+    return (
+      <TableRow hover>
+        <TableCell padding="none"><Avatar src={avatar_src} alt={profile.displayname} /></TableCell>
+        <TableCell>{profile.displayname}</TableCell>
+        <TableCell>{name}</TableCell>
+        <TableCell>{is_guest ? 'X' : ''}</TableCell>
+        <TableCell>{is_admin ? 'X' : ''}</TableCell>
+      </TableRow>
+    );
+  }
+}
+
+/* istanbul ignore next */
+function mapStateToProps(state) {
+  return {
+    mtx: state.common.mtx,
+    userAdmin: state.userAdmin,
+  };
+}
+
+/* istanbul ignore next */
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators({ ...actions }, dispatch)
+  };
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ListItem);

src/features/user-admin/ListItem.scss

@@ -0,0 +1,5 @@
+@import '../../styles/mixins';
+
+.user-admin-list-item {
+
+}

src/features/user-admin/index.js

@@ -1 +1,2 @@
 export { default as List } from './List';
+export { default as ListItem } from './ListItem';

src/features/user-admin/style.scss

@@ -1,2 +1,3 @@
 @import '../../styles/mixins';
 @import './List';
+@import './ListItem';

tests/features/user-admin/ListItem.test.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { ListItem } from '../../../src/features/user-admin/ListItem';
+
+describe('user-admin/ListItem', () => {
+  it('renders node with correct class name', () => {
+    const props = {
+      userAdmin: {},
+      actions: {},
+    };
+    const renderedComponent = shallow(
+      <ListItem {...props} />
+    );
+
+    expect(
+      renderedComponent.find('.user-admin-list-item').length
+    ).toBe(1);
+  });
+});