From 3c61705c062234adc954c8a42e3ea53ff1007bb6 Mon Sep 17 00:00:00 2001
From: Vitaly Takmazov
Date: Thu, 28 Jun 2018 13:28:02 +0300
Subject: MessageInput in Post

---
 vnext/src/components/Chat.js         | 10 ++++++----
 vnext/src/components/MessageInput.js |  7 ++++---
 vnext/src/components/Post.js         | 30 ++++++++++--------------------
 vnext/src/components/Thread.js       |  4 ++--
 4 files changed, 22 insertions(+), 29 deletions(-)

(limited to 'vnext')

diff --git a/vnext/src/components/Chat.js b/vnext/src/components/Chat.js
index c7a5c3ff..fa187f42 100644
--- a/vnext/src/components/Chat.js
+++ b/vnext/src/components/Chat.js
@@ -35,9 +35,9 @@ export default class Chat extends React.Component {
 
     onSend = (template) => {
         pm(template.to.uname, template.body)
-        .then(res => {
-            this.loadChat(this.props.match.params.user);
-        }).catch(console.log)
+            .then(res => {
+                this.loadChat(this.props.match.params.user);
+            }).catch(console.log)
     }
 
     render() {
@@ -56,7 +56,9 @@ export default class Chat extends React.Component {
                                     )
                                 }
                             </ul>
-                            <MessageInput data={{ mid: 0, timestamp: "0", to: { uname: uname } }} onSend={this.onSend} />
+                            <MessageInput data={{ mid: 0, timestamp: "0", to: { uname: uname } }} onSend={this.onSend}>
+                                Reply...
+                            </MessageInput>
                         </div>
                     ) : (
                             <div className="chatroom no-selection"><p>No chat selected</p></div>
diff --git a/vnext/src/components/MessageInput.js b/vnext/src/components/MessageInput.js
index 21495dd7..52ad7bc6 100644
--- a/vnext/src/components/MessageInput.js
+++ b/vnext/src/components/MessageInput.js
@@ -84,7 +84,7 @@ export default class MessageInput extends React.Component {
                         </div>
                         <textarea name="body" onChange={this.textChanged} onKeyPress={this.handleCtrlEnter}
                             ref={this.textarea} style={textInputStyle} value={this.state.value}
-                            rows="1" placeholder="Write a comment..." />
+                            rows={this.props.rows || "1"} placeholder={this.props.children} />
                         <Button onClick={this.onSubmit}><Icon name="ei-envelope" size="s"/>Send</Button>
                     </div>
                 </div>
@@ -105,7 +105,7 @@ const activeStyle = {
 const inputBarStyle = {
     border: '1px solid #ddd',
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-start',
     padding: '3px',
     flexGrow: 1
 }
@@ -119,5 +119,6 @@ const textInputStyle = {
 
 MessageInput.propTypes = {
     data: MessageType.isRequired,
-    onSend: PropTypes.func.isRequired
+    onSend: PropTypes.func.isRequired,
+    rows: PropTypes.string
 };
\ No newline at end of file
diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js
index 8dd8f37a..fd577603 100644
--- a/vnext/src/components/Post.js
+++ b/vnext/src/components/Post.js
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Button from './Button';
+import MessageInput from './MessageInput';
 
 import { post } from '../api';
 
@@ -8,17 +8,15 @@ export default class Post extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      attach : '',
+      attach: '',
       body: ''
     }
     this.fileinput = React.createRef();
     console.log(props)
   }
-  submit = (event) => {
-    if (event.preventDefault) event.preventDefault();
-    const {attach, body} = this.state;
-    const input = this.fileinput.current;
-    post(body, attach ? input.files[0] : '')
+  postMessage = (template) => {
+    const { attach, body } = template;
+    post(body, attach)
       .then(response => {
         console.log(response)
         if (response.status === 200) {
@@ -40,19 +38,11 @@ export default class Post extends React.Component {
   }
   render() {
     return (
-    <article>
-      <form id="postmsg">
-        <p style={{ textAlign: 'left' }}>
-          <b>Фото:</b> <span id="attachmentfile">
-          <input style={{ width: '100%' }} type="file" name="attach" ref={this.fileinput} value={this.state.attach} onChange={this.attachChanged}/> <i>(JPG/PNG)</i></span>
-        </p>
-        <p>
-          <textarea name="body" value={this.state.body} onChange={this.bodyChanged} className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea>
-          <br/>
-          <Button className="subm" onClick={this.submit}>POST</Button>
-        </p>
-      </form>
-    </article>
+      <article>
+        <MessageInput rows="7" data={{ mid: 0, timestamp: "0" }} onSend={this.postMessage}>
+          *weather It's very cold today!
+      </MessageInput>
+      </article>
     );
   }
 }
diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js
index e9f08ccb..d25ca228 100644
--- a/vnext/src/components/Thread.js
+++ b/vnext/src/components/Thread.js
@@ -74,7 +74,7 @@ export default class Thread extends React.Component {
             {
               msg.mid ? (
                 <Message data={msg} visitor={this.props.visitor}>
-                  {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment} />}
+                  {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
                   <Recommendations src={msg.recommendations} />
                 </Message>
               ) : (
@@ -126,7 +126,7 @@ export default class Thread extends React.Component {
                         this.props.visitor.uid > 0 ? (
                           <React.Fragment>
                             {this.state.active === msg.rid || <Button onClick={() => this.setActive(msg)}><Icon name="ei-envelope" size="s" />Reply</Button>}
-                            {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment} />}
+                            {this.state.active === msg.rid && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>}
                           </React.Fragment>
                         ) : (
                             <React.Fragment>
-- 
cgit v1.2.3