add sending comment to server on submit input

web/app/components/input/input.jsx

@@ -1,10 +1,13 @@
 import { h, Component } from 'preact';
 
+import api from 'common/api';
+
 export default class Input extends Component {
   constructor(props) {
     super(props);
 
     this.autoResize = this.autoResize.bind(this);
+    this.send = this.send.bind(this);
   }
 
   autoResize() {
@@ -12,9 +15,25 @@ export default class Input extends Component {
     this.setState({ height: this.fieldNode.scrollHeight });
   }
 
+  send(e) {
+    const text = this.fieldNode.value;
+
+    e.preventDefault();
+    api.send({ text })
+      .then(({ id }) => {
+        // TODO: maybe we should run onsubmit before send; like in optimistic ui
+        if (this.props.onSubmit) {
+          this.props.onSubmit({ text, id });
+        }
+      })
+      .catch(() => {
+        // TODO: do smth?
+      });
+  }
+
   render(props, { height }) {
     return (
-      <div className={b('input', props)}>
+      <form className={b('input', props)} onSubmit={this.send}>
         <textarea
           className="input__field"
           onInput={this.autoResize}
@@ -25,8 +44,8 @@ export default class Input extends Component {
         {props.children}
         </textarea>
 
-        <button className="input__button" type="button">Send</button>
-      </div>
+        <button className="input__button" type="submit">Send</button>
+      </form>
     );
   }
 }

web/app/components/input/input.scss

@@ -1,4 +1,5 @@
 .input {
   position: relative;
+  display: block;
   font-size: 0;
 }

web/app/components/root/root.jsx

@@ -7,16 +7,27 @@ import Input from 'components/input';
 import Thread from 'components/thread';
 
 export default class Root extends Component {
+  constructor(props) {
+    super(props);
+
+    this.addThread = this.addThread.bind(this);
+  }
+
   componentDidMount() {
     // TODO: add preloader
+    // there must be request for checking auth
     api.find({ url }).then(({ comments } = {}) => this.setState({ comments }));
   }
 
-  render({}, { comments = [] }) {
+  addThread() {
+    // nothing here yet
+  }
+
+  render({}, { comments = [], user = {} }) {
     return (
       <div>
         <div className="root" id={id}>
-          <Input mix="root__input"/>
+          <Input mix="root__input" onSubmit={this.addThread}/>
 
           {
             comments.map(thread => <Thread data={thread} mods={{ level: 0 }} mix="root__thread"/>)