Added redux selectors to improve performance. Fixed drawer. Cleaned up code and removed some unused code.

app/src/components/MeetingDrawer/MeetingDrawer.js

@@ -30,64 +30,71 @@ const styles = (theme) =>
 			width           : '100%',
 			height          : '100%',
 			backgroundColor : theme.palette.background.paper
+		},
+		appBar :
+		{
+			display       : 'flex',
+			flexDirection : 'row'
+		},
+		tabsHeader :
+		{
+			flexGrow : 1
 		}
 	});
 
-class MeetingDrawer extends React.PureComponent
+const MeetingDrawer = (props) =>
 {
-	handleChange = (event, value) =>
-	{
-		this.props.setToolTab(tabs[value]);
-	};
+	const {
+		currentToolTab,
+		unreadMessages,
+		unreadFiles,
+		closeDrawer,
+		setToolTab,
+		classes,
+		theme
+	} = props;
 
-	render()
-	{
-		const {
-			currentToolTab,
-			unreadMessages,
-			unreadFiles,
-			closeDrawer,
-			classes,
-			theme
-		} = this.props;
-
-		return (
-			<div className={classes.root}>
-				<AppBar position='static' color='default'>
-					<Tabs
-						value={tabs.indexOf(currentToolTab)}
-						onChange={this.handleChange}
-						indicatorColor='primary'
-						textColor='primary'
-						variant='fullWidth'
-					>
-						<Tab
-							label={
-								<Badge color='secondary' badgeContent={unreadMessages}>
-									Chat
-								</Badge>
-							}
-						/>
-						<Tab
-							label={
-								<Badge color='secondary' badgeContent={unreadFiles}>
-									File sharing
-								</Badge>
-							}
-						/>
-						<Tab label='Participants' />
-						<IconButton onClick={closeDrawer}>
-							{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
-						</IconButton>
-					</Tabs>
-				</AppBar>
-				{currentToolTab === 'chat' && <Chat />}
-				{currentToolTab === 'files' && <FileSharing />}
-				{currentToolTab === 'users' && <ParticipantList />}
-			</div>
-		);
-	}
-}
+	return (
+		<div className={classes.root}>
+			<AppBar
+				position='static'
+				color='default'
+				className={classes.appBar}
+			>
+				<Tabs
+					className={classes.tabsHeader}
+					value={tabs.indexOf(currentToolTab)}
+					onChange={(event, value) => setToolTab(tabs[value])}
+					indicatorColor='primary'
+					textColor='primary'
+					variant='fullWidth'
+				>
+					<Tab
+						label={
+							<Badge color='secondary' badgeContent={unreadMessages}>
+								Chat
+							</Badge>
+						}
+					/>
+					<Tab
+						label={
+							<Badge color='secondary' badgeContent={unreadFiles}>
+								File sharing
+							</Badge>
+						}
+					/>
+					<Tab label='Participants' />
+				</Tabs>
+				<IconButton onClick={closeDrawer}>
+					{theme.direction === 'ltr' ? <ChevronLeftIcon /> : <ChevronRightIcon />}
+				</IconButton>
+			</AppBar>
+			{currentToolTab === 'chat' && <Chat />}
+			{currentToolTab === 'files' && <FileSharing />}
+			{currentToolTab === 'users' && <ParticipantList />}
+		</div>
+	);
+};
 
 MeetingDrawer.propTypes =
 {

app/src/components/MeetingDrawer/ParticipantList/ListPeer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { makePeerConsumerSelector } from '../../Selectors';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
@@ -269,26 +270,21 @@ ListPeer.propTypes =
 	classes        : PropTypes.object.isRequired
 };
 
-const mapStateToProps = (state, { name }) =>
+const makeMapStateToProps = () =>
 {
-	const peer = state.peers[name];
-	const consumersArray = peer.consumers
-		.map((consumerId) => state.consumers[consumerId]);
-	const micConsumer =
-		consumersArray.find((consumer) => consumer.source === 'mic');
-	const webcamConsumer =
-		consumersArray.find((consumer) => consumer.source === 'webcam');
-	const screenConsumer =
-		consumersArray.find((consumer) => consumer.source === 'screen');
+	const getPeerConsumers = makePeerConsumerSelector();
 
-	return {
-		peer,
-		micConsumer,
-		webcamConsumer,
-		screenConsumer
+	const mapStateToProps = (state, props) =>
+	{
+		return {
+			peer : state.peers[props.name],
+			...getPeerConsumers(state, props)
+		};
 	};
+
+	return mapStateToProps;
 };
 
 export default withRoomContext(connect(
-	mapStateToProps
+	makeMapStateToProps
 )(withStyles(styles)(ListPeer)));