2 files changed, 79 insertions, 11 deletions

diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 15d36309..a276225b 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -1,32 +1,83 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import { MessageType } from './Types';
 
+import Icon from './Icon';
+
 export default class MessageInput extends React.Component {
     constructor(props) {
         super(props)
-        this.resize = this.resize.bind(this);
+        this.textChanged = this.textChanged.bind(this);
+        this.attachmentChanged = this.attachmentChanged.bind(this);
+        this.openfile = this.openfile.bind(this);
+
+        this.onSubmit = this.onSubmit.bind(this);
+
         this.textarea = React.createRef();
+        this.fileinput = React.createRef();
+        this.state = {
+            isActive: false,
+            mid: this.props.data.mid,
+            rid: this.props.data.rid || 0,
+            body: '',
+            attach: ''
+        }
     }
+
+    onSubmit(event) {
+        event.preventDefault();
+        this.props.onSend({
+            mid: this.state.mid,
+            rid: this.state.rid,
+            body: this.state.body,
+            attach: this.state.attach
+        })
+    }
+
     componentDidMount() {
-        this.resize()
+        this.textarea.current.focus()
     }
-    resize() {
+    textChanged(event) {
+        this.setState({
+            body: event.target.value
+        })
         const el = this.textarea.current;
         const offset = el.offsetHeight - el.clientHeight;
         const height = el.scrollHeight + offset;
         el.style.height = `${height + offset}px`;
     }
+    attachmentChanged(event) {
+        this.setState({
+            attach: event.target.value
+        })
+    }
+    openfile() {
+        const input = this.fileinput.current;
+        if (this.state.attach) {
+            this.setState({
+                attach: ''
+            })
+        } else {
+            input.click()
+        }
+    }
     render() {
-        const msg = this.props.data;
         return (
             <form className="msg-comment-target">
-                <input type="hidden" name="mid" value={msg.mid} />
                 <div className="msg-comment">
-                    <div className="ta-wrapper">
-                        <textarea name="body" onChange={this.resize}
-                            ref={this.textarea} style={textInputStyle}
-                            rows="3" placeholder="Write a comment..." />
+                    <div style={inputBarStyle}>
+                        <div style={this.state.attach ? activeStyle : inactiveStyle}
+                            onClick={this.openfile}>
+                            <Icon name="ei-camera" size="s" />
+                            <input type="file" accept="image/jpg,image/png" onClick={e => e.stopPropagation()}
+                                style={{ display: 'none' }} ref={this.fileinput} value={this.state.attach}
+                                onChange={this.attachmentChanged} />
+                        </div>
+                        <textarea name="body" onChange={this.textChanged}
+                            ref={this.textarea} style={textInputStyle} value={this.state.value}
+                            rows="1" placeholder="Write a comment..." />
+                        <button className="badge" onClick={this.onSubmit}>Send</button>
                     </div>
                 </div>
             </form>
@@ -34,6 +85,22 @@ export default class MessageInput extends React.Component {
     }
 }
 
+const inactiveStyle = {
+    cursor: 'pointer'
+};
+const activeStyle = {
+    cursor: 'pointer',
+    color: 'green'
+};
+
+const inputBarStyle = {
+    border: '1px solid #DDD',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '3px',
+    flexGrow: 1
+}
+
 const textInputStyle = {
     overflow: 'hidden',
     resize: 'none',
@@ -42,5 +109,6 @@ const textInputStyle = {
 }
 
 MessageInput.propTypes = {
-    data: MessageType
+    data: MessageType.isRequired,
+    onSend: PropTypes.func.isRequired
 };
\ No newline at end of file
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index 6830a821..96b7e093 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -61,7 +61,7 @@ export default class Thread extends React.Component {
             {
               this.loaded() ? (
                 <Message data={msg} visitor={this.props.visitor}>
-                  <MessageInput data={msg} />
+                  <MessageInput data={msg} onSend={console.log} />
                   <Recommendations src={msg.recommendations} />
                 </Message>
               ) : (