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

app/src/components/Containers/Me.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import { meProducersSelector } from '../Selectors';
 import { withRoomContext } from '../../RoomContext';
 import { withStyles } from '@material-ui/core/styles';
 import PropTypes from 'prop-types';
@@ -133,21 +134,11 @@ Me.propTypes =
 
 const mapStateToProps = (state) =>
 {
-	const producersArray = Object.values(state.producers);
-	const micProducer =
-		producersArray.find((producer) => producer.source === 'mic');
-	const webcamProducer =
-		producersArray.find((producer) => producer.source === 'webcam');
-	const screenProducer =
-		producersArray.find((producer) => producer.source === 'screen');
-
 	return {
-		connected      : state.room.state === 'connected',
-		me             : state.me,
-		micProducer    : micProducer,
-		webcamProducer : webcamProducer,
-		screenProducer : screenProducer,
-		activeSpeaker  : state.me.name === state.room.activeSpeakerName
+		connected     : state.room.state === 'connected',
+		me            : state.me,
+		...meProducersSelector(state),
+		activeSpeaker : state.me.name === state.room.activeSpeakerName
 	};
 };
 

app/src/components/Containers/Peer.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { connect } from 'react-redux';
+import { makePeerConsumerSelector } from '../Selectors';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as appPropTypes from '../appPropTypes';
@@ -423,26 +424,21 @@ Peer.propTypes =
 	theme                    : 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,
-		windowConsumer : state.room.windowConsumer,
-		activeSpeaker  : name === state.room.activeSpeakerName
+	const mapStateToProps = (state, props) =>
+	{
+		return {
+			peer           : state.peers[props.name],
+			...getPeerConsumers(state, props),
+			windowConsumer : state.room.windowConsumer,
+			activeSpeaker  : props.name === state.room.activeSpeakerName
+		};
 	};
+
+	return mapStateToProps;
 };
 
 const mapDispatchToProps = (dispatch) =>
@@ -462,6 +458,6 @@ const mapDispatchToProps = (dispatch) =>
 };
 
 export default withRoomContext(connect(
-	mapStateToProps,
+	makeMapStateToProps,
 	mapDispatchToProps
 )(withStyles(styles, { withTheme: true })(Peer)));