Move Sidebar into a separate component

app/lib/components/Room.jsx

@@ -16,6 +16,7 @@ import ToolArea from './ToolArea/ToolArea';
 import FullScreenView from './FullScreenView';
 import Draggable from 'react-draggable';
 import { idle } from '../utils';
+import Sidebar from './Sidebar';
 
 // Hide toolbars after 10 seconds of inactivity.
 const TIMEOUT = 10 * 1000;
@@ -58,42 +59,11 @@ class Room extends React.Component
 	{
 		const {
 			room,
-			me,
 			toolAreaOpen,
 			amActiveSpeaker,
-			screenProducer,
+			onRoomLinkCopy
-			onRoomLinkCopy,
-			onLogin,
-			onShareScreen,
-			onUnShareScreen,
-			onNeedExtension,
-			onLeaveMeeting
 		} = this.props;
 
-		let screenState;
-		let screenTip;
-
-		if (me.needExtension)
-		{
-			screenState = 'need-extension';
-			screenTip = 'Install screen sharing extension';
-		}
-		else if (!me.canShareScreen)
-		{
-			screenState = 'unsupported';
-			screenTip = 'Screen sharing not supported';
-		}
-		else if (screenProducer)
-		{
-			screenState = 'on';
-			screenTip = 'Stop screen sharing';
-		}
-		else
-		{
-			screenState = 'off';
-			screenTip = 'Start screen sharing';
-		}
-
 		return (
 			<Appear duration={300}>
 				<div data-component='Room'>
@@ -105,6 +75,7 @@ class Room extends React.Component
 						}}
 					>
 						<Notifications />
+
 						<ToolAreaButton />
 
 						{room.advancedMode ?
@@ -166,60 +137,7 @@ class Room extends React.Component
 							</div>
 						</Draggable>
 
-						<div className={classnames('sidebar room-controls', {
+						<Sidebar />
-							'visible' : this.props.room.toolbarsVisible
-						})}
-						>
-							<div
-								className={classnames('button', 'screen', screenState)}
-								data-tip={screenTip}
-								data-type='dark'
-								onClick={() =>
-								{
-									switch (screenState)
-									{
-										case 'on':
-										{
-											onUnShareScreen();
-											break;
-										}
-										case 'off':
-										{
-											onShareScreen();
-											break;
-										}
-										case 'need-extension':
-										{
-											onNeedExtension();
-											break;
-										}
-										default:
-										{
-											break;
-										}
-									}
-								}}
-							/>
-
-							{me.loginEnabled ?
-								<div
-									className={classnames('button', 'login', 'off', {
-										disabled : me.loginInProgress
-									})}
-									data-tip='Login'
-									data-type='dark'
-									onClick={() => onLogin()}
-								/>
-								:null
-							}
-
-							<div
-								className={classnames('button', 'leave-meeting')}
-								data-tip='Leave meeting'
-								data-type='dark'
-								onClick={() => onLeaveMeeting()}
-							/>
-						</div>
 
 						<ReactTooltip
 							effect='solid'
@@ -254,11 +172,6 @@ Room.propTypes =
 	toolAreaOpen       : PropTypes.bool.isRequired,
 	screenProducer     : appPropTypes.Producer,
 	onRoomLinkCopy     : PropTypes.func.isRequired,
-	onShareScreen      : PropTypes.func.isRequired,
-	onUnShareScreen    : PropTypes.func.isRequired,
-	onNeedExtension    : PropTypes.func.isRequired,
-	onLeaveMeeting     : PropTypes.func.isRequired,
-	onLogin            : PropTypes.func.isRequired,
 	setToolbarsVisible : PropTypes.func.isRequired
 };
 
@@ -287,26 +200,7 @@ const mapDispatchToProps = (dispatch) =>
 					text : 'Room link copied to the clipboard'
 				}));
 		},
-		onLeaveMeeting : () =>
+
-		{
-			dispatch(requestActions.leaveRoom());
-		},
-		onShareScreen : () =>
-		{
-			dispatch(requestActions.enableScreenSharing());
-		},
-		onUnShareScreen : () =>
-		{
-			dispatch(requestActions.disableScreenSharing());
-		},
-		onNeedExtension : () =>
-		{
-			dispatch(requestActions.installExtension());
-		},
-		onLogin : () =>
-		{
-			dispatch(requestActions.userLogin());
-		},
 		setToolbarsVisible : (visible) =>
 		{
 			dispatch(stateActions.setToolbarsVisible(visible));

app/lib/components/Sidebar.jsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import * as appPropTypes from './appPropTypes';
+import * as requestActions from '../redux/requestActions';
+
+const Sidebar = ({
+	toolbarsVisible, me, screenProducer, onLogin, onShareScreen,
+	onUnShareScreen, onNeedExtension, onLeaveMeeting
+}) =>
+{
+	let screenState;
+	let screenTip;
+
+	if (me.needExtension)
+	{
+		screenState = 'need-extension';
+		screenTip = 'Install screen sharing extension';
+	}
+	else if (!me.canShareScreen)
+	{
+		screenState = 'unsupported';
+		screenTip = 'Screen sharing not supported';
+	}
+	else if (screenProducer)
+	{
+		screenState = 'on';
+		screenTip = 'Stop screen sharing';
+	}
+	else
+	{
+		screenState = 'off';
+		screenTip = 'Start screen sharing';
+	}
+
+	return (
+		<div className={classnames('sidebar room-controls', {
+			'visible' : toolbarsVisible
+		})}
+		>
+			<div
+				className={classnames('button', 'screen', screenState)}
+				data-tip={screenTip}
+				data-type='dark'
+				onClick={() =>
+				{
+					switch (screenState)
+					{
+						case 'on':
+						{
+							onUnShareScreen();
+							break;
+						}
+						case 'off':
+						{
+							onShareScreen();
+							break;
+						}
+						case 'need-extension':
+						{
+							onNeedExtension();
+							break;
+						}
+						default:
+						{
+							break;
+						}
+					}
+				}}
+			/>
+
+			{me.loginEnabled ?
+				<div
+					className={classnames('button', 'login', 'off', {
+						disabled : me.loginInProgress
+					})}
+					data-tip='Login'
+					data-type='dark'
+					onClick={() => onLogin()}
+				/>
+				:null
+			}
+
+			<div
+				className={classnames('button', 'leave-meeting')}
+				data-tip='Leave meeting'
+				data-type='dark'
+				onClick={() => onLeaveMeeting()}
+			/>
+		</div>
+	);
+};
+
+Sidebar.propTypes = {
+	toolbarsVisible : PropTypes.bool.isRequired,
+	me              : appPropTypes.Me.isRequired,
+	onShareScreen   : PropTypes.func.isRequired,
+	onUnShareScreen : PropTypes.func.isRequired,
+	onNeedExtension : PropTypes.func.isRequired,
+	onLeaveMeeting  : PropTypes.func.isRequired,
+	onLogin         : PropTypes.func.isRequired,
+	screenProducer  : appPropTypes.Producer
+};
+
+const mapStateToProps = (state) =>
+	({
+		toolbarsVisible : state.room.toolbarsVisible,
+		screenProducer  : Object.values(state.producers)
+			.find((producer) => producer.source === 'screen'),
+		me : state.me
+	});
+
+const mapDispatchToProps = {
+	onLeaveMeeting  : requestActions.leaveRoom,
+	onShareScreen   : requestActions.enableScreenSharing,
+	onUnShareScreen : requestActions.disableScreenSharing,
+	onNeedExtension : requestActions.installExtension,
+	onLogin         : requestActions.userLogin
+};
+
+export default connect(
+	mapStateToProps,
+	mapDispatchToProps
+)(Sidebar);