Implement local chat feature (without Firebase)

src/App.js

@@ -5,16 +5,30 @@ 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">
         <div className="row">
           <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>

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>
     )
   }
 }

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>
     )
   }