display chat history

Author: justadudewhohacks

client/Chatroom.jsx

@@ -83,23 +83,27 @@ export default class Chatroom extends React.Component {
   constructor(props, context) {
     super(props, context)
 
+    const { chatHistory } = props
+
     this.state = {
-      chatHistory: [],
+      chatHistory,
       input: ''
     }
 
     this.onInput = this.onInput.bind(this)
     this.onSendMessage = this.onSendMessage.bind(this)
     this.onMessageReceived = this.onMessageReceived.bind(this)
     this.updateChatHistory = this.updateChatHistory.bind(this)
+    this.scrollChatToBottom = this.scrollChatToBottom.bind(this)
   }
 
   componentDidMount() {
     this.props.registerHandler(this.onMessageReceived)
+    this.scrollChatToBottom()
   }
 
   componentDidUpdate() {
-    this.panel.scrollTo(0, this.panel.scrollHeight)
+    this.scrollChatToBottom()
   }
 
   componentWillUnmount() {
@@ -133,6 +137,10 @@ export default class Chatroom extends React.Component {
     this.setState({ chatHistory: this.state.chatHistory.concat(entry) })
   }
 
+  scrollChatToBottom() {
+    this.panel.scrollTo(0, this.panel.scrollHeight)
+  }
+
   render() {
     return (
       <div style={{ height: '100%' }}>

client/Root.jsx

@@ -36,10 +36,10 @@ export default class Root extends React.Component {
     if (!this.state.user)
       return onNoUserSelected()
 
-    return this.state.client.join(chatroomName, (err) => {
+    return this.state.client.join(chatroomName, (err, chatHistory) => {
       if (err)
         return console.error(err)
-      return onEnterSuccess()
+      return onEnterSuccess(chatHistory)
     })
   }
 
@@ -81,9 +81,12 @@ export default class Root extends React.Component {
       return <Redirect to="/" />
     }
 
+    const { chatHistory } = history.location.state
+
     return (
       <Chatroom
         chatroom={chatroom}
+        chatHistory={chatHistory}
         user={this.state.user}
         onLeave={
           () => this.onLeaveChatroom(
@@ -129,7 +132,10 @@ export default class Root extends React.Component {
                               chatroomName => this.onEnterChatroom(
                                 chatroomName,
                                 () => props.history.push('/user'),
-                                () => props.history.push(chatroomName)
+                                chatHistory => props.history.push({
+                                  pathname: chatroomName,
+                                  state: { chatHistory }
+                                })
                               )
                             }
                           />

server/Chatroom.js

@@ -6,8 +6,8 @@ module.exports = function ({ name, image }) {
     members.forEach(m => m.emit('message', message))
   }
 
-  function addEntry(user, entry) {
-    chatHistory = chatHistory.concat({ user, entry })
+  function addEntry(entry) {
+    chatHistory = chatHistory.concat(entry)
   }
 
   function getChatHistory() {