Support selecting Peers from ParticipantList

app/lib/components/Filmstrip.jsx

@@ -92,12 +92,6 @@ class Filmstrip extends Component
 		}
 	}
 
-	handleSelectPeer = (selectedPeerName) =>
-	{
-		this.props.setSelectedPeer(this.props.selectedPeerName === selectedPeerName ?
-			null : selectedPeerName);
-	};
-
 	render()
 	{
 		const { peers, advancedMode } = this.props;
@@ -128,7 +122,7 @@ class Filmstrip extends Component
 						{Object.keys(peers).map((peerName) => (
 							<div
 								key={peerName}
-								onClick={() => this.handleSelectPeer(peerName)}
+								onClick={() => this.props.setSelectedPeer(peerName)}
 								className={classnames('film', {
 									selected : this.props.selectedPeerName === peerName,
 									active   : this.state.lastSpeaker === peerName

app/lib/components/ParticipantList/ParticipantList.jsx

@@ -1,48 +1,35 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import classNames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
-import * as requestActions from '../../redux/requestActions';
 import * as stateActions from '../../redux/stateActions';
 import PropTypes from 'prop-types';
 import ListPeer from './ListPeer';
 
-class ParticipantList extends React.Component
+const ParticipantList = ({ advancedMode, peers, setSelectedPeer, selectedPeerName }) => (
-{
+	<div data-component='ParticipantList'>
-	constructor(props)
+		<ul className='list'>
-	{
+			{peers.map((peer) => (
-		super(props);
+				<li
-	}
+					key={peer.name}
-
+					className={classNames('list-item', {
-	render()
+						selected : peer.name === selectedPeerName
-	{
+					})}
-		const {
+					onClick={() => setSelectedPeer(peer.name)}
-			advancedMode,
+				>
-			peers
+					<ListPeer name={peer.name} advancedMode={advancedMode} />
-		} = this.props;
+				</li>
-
+			))}
-		return (
+		</ul>
-			<div data-component='ParticipantList'>
+	</div>
-				<ul className='list'>
+);
-					{
-						peers.map((peer) =>
-						{
-							return (
-								<li key={peer.name} className='list-item'>
-									<ListPeer name={peer.name} advancedMode={advancedMode} />
-								</li>
-							);
-						})
-					}
-				</ul>
-			</div>
-		);
-	}
-}
 
 ParticipantList.propTypes =
 {
-	advancedMode : PropTypes.bool,
+	advancedMode     : PropTypes.bool,
-	peers        : PropTypes.arrayOf(appPropTypes.Peer).isRequired
+	peers            : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
+	setSelectedPeer  : PropTypes.func.isRequired,
+	selectedPeerName : PropTypes.string
 };
 
 const mapStateToProps = (state) =>
@@ -50,26 +37,13 @@ const mapStateToProps = (state) =>
 	const peersArray = Object.values(state.peers);
 
 	return {
-		peers : peersArray
+		peers            : peersArray,
+		selectedPeerName : state.room.selectedPeerName
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
+const mapDispatchToProps = {
-{
+	setSelectedPeer : stateActions.setSelectedPeer
-	return {
-		handleChangeWebcam : (device) =>
-		{
-			dispatch(requestActions.changeWebcam(device.value));
-		},
-		handleChangeAudioDevice : (device) =>
-		{
-			dispatch(requestActions.changeAudioDevice(device.value));
-		},
-		onToggleAdvancedMode : () =>
-		{
-			dispatch(stateActions.toggleAdvancedMode());
-		}
-	};
 };
 
 const ParticipantListContainer = connect(

app/lib/redux/reducers/room.js

@@ -72,7 +72,16 @@ const room = (state = initialState, action) =>
 			return { ...state, mode: action.payload.mode };
 
 		case 'SET_SELECTED_PEER':
-			return { ...state, selectedPeerName: action.payload.selectedPeerName };
+		{
+			const { selectedPeerName } = action.payload;
+
+			return {
+				...state,
+
+				selectedPeerName : state.selectedPeerName === selectedPeerName ?
+					null : selectedPeerName
+			};
+		}
 
 		default:
 			return state;

app/stylus/components/ParticipantList.styl

@@ -7,9 +7,14 @@
 
 		> .list-item {
 			padding: 0.5vmin;
-			border-bottom: 1px solid #ddd;
+			border-bottom: 1px solid #CBCBCB;
 			width: 100%;
 			overflow: hidden;
+			cursor: pointer;
+
+			&.selected {
+				border-bottom-color: #377EFF;
+			}
 		}
 	}
 }