Merge pull request #56 from havfo/feat/list-me

Show Me in the users tab

app/lib/components/ParticipantList/ListMe.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { Me } from '../appPropTypes';
+
+const ListMe = ({ me }) =>
+{
+	const picture = me.picture || 'resources/images/avatar-empty.jpeg';
+
+	return (
+		<li className='list-item'>
+			<div data-component='ListPeer'>
+				<img className='avatar' src={picture} />
+
+				<div className='peer-info'>
+					{me.displayName}
+				</div>
+
+				<div className='indicators'>
+					{me.raisedHand && (
+						<div className='icon raise-hand on' />
+					)}
+				</div>
+			</div>
+		</li>
+	);
+};
+
+ListMe.propTypes = {
+	me : Me.isRequired
+};
+
+const mapStateToProps = (state) => ({
+	me : state.me
+});
+
+export default connect(
+	mapStateToProps
+)(ListMe);

app/lib/components/ParticipantList/ParticipantList.jsx

@@ -5,6 +5,7 @@ import * as requestActions from '../../redux/requestActions';
 import * as stateActions from '../../redux/stateActions';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
+import ListMe from './ListMe';
 
 class ParticipantList extends React.Component
 {
@@ -23,6 +24,8 @@ class ParticipantList extends React.Component
 		return (
 			<div data-component='ParticipantList'>
 				<ul className='list'>
+					<ListMe />
+
 					{
 						peers.map((peer) =>
 						{