From c1a99a74383d545388d79f90baa0996c7b87d5aa Mon Sep 17 00:00:00 2001
From: Liren <liren90@gmail.com>
Date: Thu, 13 Jul 2017 12:38:04 +0800
Subject: [PATCH] Implement local chat feature (without Firebase)

---
 src/App.js          | 18 +++++++++++--
 src/chat_form.js    | 63 +++++++++++++++++++++++++++++++++++----------
 src/chat_message.js | 44 ++++++++++++++++---------------
 3 files changed, 89 insertions(+), 36 deletions(-)

diff --git a/src/App.js b/src/App.js
index db10e54..e7d2984 100644
--- a/src/App.js
+++ b/src/App.js
@@ -5,6 +5,20 @@ import Firebase from './firebase'
 import './App.css'
 
 class App extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      messages: []
+    }
+    this.sendMessage = this.sendMessage.bind(this)
+  }
+
+  sendMessage(messageObj) {
+    this.setState({
+      messages: this.state.messages.concat(messageObj)
+    })
+  }
+
   render() {
     return (
       <div className="container">
@@ -12,9 +26,9 @@ class App extends React.Component {
           <div className="panel panel-default">
             <div className="panel-heading">Welcome to this friendly chatroom</div>
             <div className="panel-body">
-                <ChatMessage />
+                <ChatMessage messages={ this.state.messages }/>
               <div className="panel-footer">
-                <ChatForm />
+                <ChatForm sendMessage={ this.sendMessage } />
               </div>
             </div>
           </div>
diff --git a/src/chat_form.js b/src/chat_form.js
index f13d5ef..27538ee 100644
--- a/src/chat_form.js
+++ b/src/chat_form.js
@@ -1,24 +1,61 @@
 import React from 'react'
 
 export default class ChatForm extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      user: 'Annonymous',
+      text: ''
+    }
+    this.handleTextInput = this.handleTextInput.bind(this)
+    this.handleFormSubmit = this.handleFormSubmit.bind(this)
+  }
+
+  handleTextInput(e) {
+    this.setState({
+      [e.target.name]: e.target.value
+    })
+  }
+
+  handleFormSubmit(e) {
+    e.preventDefault()
+    this.props.sendMessage(this.state)
+    this.setState({text: ''})
+  }
+
   render() {
     return(
-      <div className="input-group">
-        <span className="input-group-btn">
+      <form onSubmit={ this.handleFormSubmit } disabled={ true }>
+        <div className="input-group">
+          <span className="input-group-btn">
+            <input 
+              className="form-control"
+              name="user"
+              value={this.state.user}
+              onChange={ this.handleTextInput }
+              type="text"
+              placeholder="Name"
+              style={{width: '110px', textAlign: 'center'}}
+            />
+          </span>
+          <div className="input-group-addon">says: </div>
           <input 
             className="form-control"
+            name="text"
+            value={this.state.text}
+            onChange={ this.handleTextInput }
             type="text"
-            placeholder="Name"
-            style={{width: '80px', textAlign: 'center'}} />
-        </span>
-        <div className="input-group-addon">says: </div>
-        <input 
-          className="form-control"
-          type="text" />
-        <span className="input-group-btn">
-          <button className="btn btn-default" type="button">Send</button>
-        </span>
-      </div>
+          />
+          <span className="input-group-btn">
+            <input
+              className="btn btn-default"
+              type="submit"
+              value="Send"
+              disabled={ this.state.user === "" || this.state.text === "" }
+            />
+          </span>
+        </div>
+        </form>
     )
   }
 }
\ No newline at end of file
diff --git a/src/chat_message.js b/src/chat_message.js
index 24bcccc..1f520e5 100644
--- a/src/chat_message.js
+++ b/src/chat_message.js
@@ -1,30 +1,32 @@
 import React from 'react'
 
 export default class ChatMessage extends React.Component {
-  render() {
-    return(
-      <div className="container" id="chat-message-container">
-        
-        <div className="row message-bubble">
-          <p className="text-muted">Liren</p>
-          <span>Let's use ReactJS and Firebase to make this chat works!</span>
-        </div>
-
-        <div className="row message-bubble">
-          <p className="text-muted">Tom</p>
-          <span>Cool!</span>
-        </div>
+  scrollToBottom() {
+    let element = document.getElementById('chat-message-container');
+    element.scrollTop = element.scrollHeight;
+  }
 
-        <div className="row message-bubble">
-          <p className="text-muted">Sheng</p>
-          <span>Yeaaboooooiiiiiiiiiiiiii</span>
-        </div>
+  componentDidMount() {
+    this.scrollToBottom()
+  }
 
-        <div className="row message-bubble">
-          <p className="text-muted">Kevin</p>
-          <span>As you can see, App component is the parent of ChatForm and ChatMessage components.</span>
-        </div>
+  componentDidUpdate(prevProps, prevState) {
+    this.scrollToBottom()
+  }
 
+  render() {
+    return(
+      <div className="container" id="chat-message-container">
+        {
+          this.props.messages.map( (message, index) => {
+            return(
+              <div key={index} className="row message-bubble">
+                <p className="text-muted">{message.user}</p>
+                <span>{message.text}</span>
+              </div>
+            )
+          })
+        }
       </div>
     )
   }