From 215cdc7a98be2cf71cba72e86619dc9f530dbffd Mon Sep 17 00:00:00 2001
From: Chris Blanchard <cablanchard@gmail.com>
Date: Sun, 20 Sep 2015 17:42:34 +0100
Subject: [PATCH] Fix word wrapping and groundwork for loading previous
 messages

---
 lib/react/message.jsx | 14 +++++++++++++-
 public/css/app.css    |  8 ++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/lib/react/message.jsx b/lib/react/message.jsx
index 9a3e91f..9899cb6 100644
--- a/lib/react/message.jsx
+++ b/lib/react/message.jsx
@@ -38,6 +38,12 @@ var Chatroom = React.createClass({
 		socket.emit("message:refresh", {});
 	},
 
+	loadMoreMessages() {
+		socket.emit("message:refresh", {
+			// before: 
+		});
+	},
+
 	sendMessage(message) {
 		socket.emit("newMessage", {message: message});
 	},
@@ -58,6 +64,12 @@ var Chatroom = React.createClass({
 				<div className="panel-heading">Gather Chat</div>
 				<div className="panel-body">
 					<ul className="chat" id="chatmessages" ref="messageContainer">
+						<li className="text-center">
+							<a href="#"
+								className="btn btn-primary btn-xs">
+								Load more messages
+							</a>
+						</li>
 						{messages}
 					</ul>
 				</div>
@@ -132,7 +144,7 @@ var ChatMessage = React.createClass({
 							{this.state.createdAt}
 						</small>
 					</div>
-					<p>{this.messageContent()}</p>
+					<p className="wordwrap">{this.messageContent()}</p>
 				</div>
 			</li>
 		);
diff --git a/public/css/app.css b/public/css/app.css
index 80f7152..024d41b 100644
--- a/public/css/app.css
+++ b/public/css/app.css
@@ -8,6 +8,14 @@ html, body {
 
 /*Chat*/
 
+.wordwrap { 
+	white-space: pre-wrap;      /* CSS3 */   
+	white-space: -moz-pre-wrap; /* Firefox */    
+	white-space: -pre-wrap;     /* Opera <7 */   
+	white-space: -o-pre-wrap;   /* Opera 7 */    
+	word-wrap: break-word;      /* IE */
+}
+
 #chatroom {
 	margin-top: 1em;
 }