working Post component

2 files changed, 48 insertions, 4 deletions

diff --git a/vnext/src/api/index.js b/vnext/src/api/index.js
index 00605d87..653360f5 100644
--- a/vnext/src/api/index.js
+++ b/vnext/src/api/index.js
@@ -56,6 +56,13 @@ export function getMessages(path, params) {
     })
 }
 
+export function post(body, attach) {
+    let form = new FormData()
+    form.append('attach', attach)
+    form.append('body', body)
+    return client.post('/post', form);
+}
+
 export function comment(mid, rid, body, attach) {
     let form = new FormData();
     form.append('mid', mid);
diff --git a/vnext/src/components/Post.js b/vnext/src/components/Post.js
index 3256bbf6..8dd8f37a 100644
--- a/vnext/src/components/Post.js
+++ b/vnext/src/components/Post.js
@@ -1,18 +1,55 @@
 import React from 'react';
 
+import Button from './Button';
+
+import { post } from '../api';
+
 export default class Post extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      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] : '')
+      .then(response => {
+        console.log(response)
+        if (response.status === 200) {
+          const msg = response.data.newMessage;
+          console.log(msg)
+          this.props.history.push(`/${this.props.visitor.uname}/${msg.mid}`);
+        }
+      }).catch(console.log);
+  }
+  attachChanged = (event) => {
+    this.setState({
+      attach: event.target.value
+    })
+  }
+  bodyChanged = (event) => {
+    this.setState({
+      body: event.target.value
+    })
+  }
   render() {
     return (
     <article>
-      <form action="/" method="post" id="postmsg" encType="multipart/form-data">
+      <form id="postmsg">
         <p style={{ textAlign: 'left' }}>
           <b>Фото:</b> <span id="attachmentfile">
-          <input style={{ width: '100%' }} type="file" name="attach"/> <i>(JPG/PNG)</i></span>
+          <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" className="newmessage" rows="7" cols="10" placeholder="*weather It's very cold today!"></textarea>
+          <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/>
-          <input type="submit" className="subm" value="   POST   "/>
+          <Button className="subm" onClick={this.submit}>POST</Button>
         </p>
       </form>
     </article>