Major cleanup

app/lib/components/Chat/Chat.jsx

@@ -1,17 +1,28 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import * as stateActions from '../../redux/stateActions';
-import * as requestActions from '../../redux/requestActions';
+import { withRoomContext } from '../../RoomContext';
 import MessageList from './MessageList';
 
 class Chat extends Component
 {
+	createNewMessage(text, sender, name, picture)
+	{
+		return {
+			type : 'message',
+			text,
+			time : Date.now(),
+			name,
+			sender,
+			picture
+		};
+	}
+
 	render()
 	{
 		const {
+			roomClient,
 			senderPlaceHolder,
-			onSendMessage,
 			disabledInput,
 			autofocus,
 			displayName,
@@ -23,7 +34,19 @@ class Chat extends Component
 				<MessageList />
 				<form
 					data-component='Sender'
-					onSubmit={(e) => { onSendMessage(e, displayName, picture); }}
+					onSubmit={(e) =>
+					{
+						e.preventDefault();
+						const userInput = e.target.message.value;
+
+						if (userInput)
+						{
+							const message = this.createNewMessage(userInput, 'response', displayName, picture);
+
+							roomClient.sendChatMessage(message);
+						}
+						e.target.message.value = '';
+					}}
 				>
 					<input
 						type='text'
@@ -47,8 +70,8 @@ class Chat extends Component
 
 Chat.propTypes =
 {
+	roomClient        : PropTypes.any.isRequired,
 	senderPlaceHolder : PropTypes.string,
-	onSendMessage     : PropTypes.func,
 	disabledInput     : PropTypes.bool,
 	autofocus         : PropTypes.bool,
 	displayName       : PropTypes.string,
@@ -71,27 +94,8 @@ const mapStateToProps = (state) =>
 	};
 };
 
-const mapDispatchToProps = (dispatch) =>
-{
-	return {
-		onSendMessage : (event, displayName, picture) =>
-		{
-			event.preventDefault();
-			const userInput = event.target.message.value;
-
-			if (userInput)
-			{
-				dispatch(stateActions.addUserMessage(userInput));
-				dispatch(requestActions.sendChatMessage(userInput, displayName, picture));
-			}
-			event.target.message.value = '';
-		}
-	};
-};
-
-const ChatContainer = connect(
-	mapStateToProps,
-	mapDispatchToProps
-)(Chat);
+const ChatContainer = withRoomContext(connect(
+	mapStateToProps
+)(Chat));
 
 export default ChatContainer;

app/lib/components/Chat/MessageList.jsx

@@ -30,41 +30,47 @@ class MessageList extends Component
 
 		return (
 			<div data-component='MessageList' id='messages'>
-				{ chatmessages.length > 0 ?
-					chatmessages.map((message, i) =>
-					{
-						const messageTime = new Date(message.time);
+				<Choose>
+					<When condition={chatmessages.length > 0}>
+						{
+							chatmessages.map((message, i) =>
+							{
+								const messageTime = new Date(message.time);
 
-						const picture = (message.sender === 'response' ?
-							message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
+								const picture = (message.sender === 'response' ?
+									message.picture : this.props.myPicture) || 'resources/images/avatar-empty.jpeg';
 
-						return (
-							<div className='message' key={i}>
-								<div className={message.sender}>
-									<img className='message-avatar' src={picture} />
+								return (
+									<div className='message' key={i}>
+										<div className={message.sender}>
+											<img className='message-avatar' src={picture} />
 
-									<div className='message-content'>
-										<div
-											className='message-text'
-											// eslint-disable-next-line react/no-danger
-											dangerouslySetInnerHTML={{ __html : marked.parse(
-												message.text,
-												{ sanitize: true, renderer: linkRenderer }
-											) }}
-										/>
+											<div className='message-content'>
+												<div
+													className='message-text'
+													// eslint-disable-next-line react/no-danger
+													dangerouslySetInnerHTML={{ __html : marked.parse(
+														message.text,
+														{ sanitize: true, renderer: linkRenderer }
+													) }}
+												/>
 
-										<span className='message-time'>
-											{message.name} - {this.getTimeString(messageTime)}
-										</span>
+												<span className='message-time'>
+													{message.name} - {this.getTimeString(messageTime)}
+												</span>
+											</div>
+										</div>
 									</div>
-								</div>
-							</div>
-						);
-					})
-					:<div className='empty'>
-						<p>No one has said anything yet...</p>
-					</div>
-				}
+								);
+							})
+						}
+					</When>
+					<Otherwise>
+						<div className='empty'>
+							<p>No one has said anything yet...</p>
+						</div>
+					</Otherwise>
+				</Choose>
 			</div>
 		);
 	}