Enable posting chat messages

src/app/components/ChatBox.js

@@ -1,47 +1,35 @@
 import React from 'react';
 import MessageList from './MessageList';
+import PostMessageForm from './PostMessageForm';
 import ClearButton from './ClearButton';
 
 class ChatBox extends React.Component {
     constructor( props, context ) {
         super( props, context );
-        this.state = {};
-        this.state.messages = [
-            {
-                id: 1, 
-                timestamp: 1478859071000,
-                owner: 'Chuck',
-                text: 'Hello Mark, how is it going?' 
-            },
-            {
-                id: 2,
-                timestamp: 1478859115000,
-                owner: 'Mark',
-                text: 'What do you want, Chuck?'
-            },
-            {
-                id: 3,
-                timestamp: 1478859131000,
-                owner: 'Chuck',
-                text: ':D'
-            },
-            {
-                id: 4,
-                timestamp: 1478859165000,
-                owner: 'Chuck',
-                text: 'I forgot you were not into small talk.'
-            }
-        ];
+        this.state = {
+            messages: []
+        };
 
+        this.appendChatMessage = this.appendChatMessage.bind( this );
         this.clearMessages = this.clearMessages.bind( this );
     }
+    appendChatMessage( owner, text ) {
+        let newMessage = {
+            id: this.state.messages.length + 1,
+            timestamp: new Date().getTime(),
+            owner: owner,
+            text: text
+        }; 
+        this.setState({ messages: [ ...this.state.messages, newMessage ] });
+    }    
     clearMessages() {
         this.setState( { messages: [] } );
     }
     render() {
         return (
             <div>
                 <MessageList messages={this.state.messages} />
+                <PostMessageForm appendChatMessage={this.appendChatMessage} />
                 <ClearButton clearMessages={this.clearMessages} />
             </div>
         );

src/app/components/PostMessageForm.js

@@ -0,0 +1,30 @@
+import React from 'react';
+
+class PostMessageForm extends React.Component {
+	constructor( props, context ) {
+		super( props, context );
+
+		this.handleSubmit = this.handleSubmit.bind( this );
+	}
+    handleSubmit( event ) {
+        event.preventDefault();
+        this.props.appendChatMessage( this.nameInput.value, this.messageInput.value );
+        this.nameInput.value = '';
+        this.messageInput.value = '';    
+    }	
+    render() {
+        return (
+            <form onSubmit={this.handleSubmit.bind(this)}>
+                <input type="text" 
+                       ref={name => this.nameInput = name}
+                       placeholder="Name" />
+                <input type="text" 
+                       ref={message => this.messageInput = message}
+                       placeholder="Message" />
+                <input type="submit" value="Send" />
+            </form>
+        );
+    }
+}
+
+export default PostMessageForm;