From d64138897d8e6199466db1aa0b11a5bad837811b Mon Sep 17 00:00:00 2001
From: igoradamenko <mail@igoradamenko.com>
Date: Fri, 11 May 2018 20:30:23 +0300
Subject: [PATCH] improve error handling in input

---
 .../input/__error/input__error.scss           |  9 ++++++
 web/app/components/input/index.js             |  1 +
 web/app/components/input/input.jsx            | 30 ++++++++++++++-----
 3 files changed, 32 insertions(+), 8 deletions(-)
 create mode 100644 web/app/components/input/__error/input__error.scss

diff --git a/web/app/components/input/__error/input__error.scss b/web/app/components/input/__error/input__error.scss
new file mode 100644
index 00000000..18f29da4
--- /dev/null
+++ b/web/app/components/input/__error/input__error.scss
@@ -0,0 +1,9 @@
+.input__error {
+  margin: 0;
+  padding: 10px 12px;
+  font-size: 14px;
+  line-height: 18px;
+  border-top: 8px solid #eee;
+  background: #ffd7d7;
+  color: #9a0000;
+}
diff --git a/web/app/components/input/index.js b/web/app/components/input/index.js
index 2dc45601..b170442c 100644
--- a/web/app/components/input/index.js
+++ b/web/app/components/input/index.js
@@ -9,5 +9,6 @@ require('./__button/_type/_preview/input__button_type_preview.scss');
 require('./__button/_type/_send/input__button_type_send.scss');
 
 require('./__buttons/input__buttons.scss');
+require('./__error/input__error.scss');
 require('./__field/input__field.scss');
 require('./__preview/input__preview.scss');
diff --git a/web/app/components/input/input.jsx b/web/app/components/input/input.jsx
index f47b5fca..761734cf 100644
--- a/web/app/components/input/input.jsx
+++ b/web/app/components/input/input.jsx
@@ -8,11 +8,12 @@ export default class Input extends Component {
 
     this.state = {
       preview: null,
+      isErrorShown: false,
     };
 
-    this.autoResize = this.autoResize.bind(this);
     this.send = this.send.bind(this);
     this.getPreview = this.getPreview.bind(this);
+    this.onInput = this.onInput.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
@@ -36,11 +37,18 @@ export default class Input extends Component {
     }
   }
 
+  onInput() {
+    this.autoResize();
+
+    this.setState({
+      preview: null,
+      isErrorShown: false,
+    });
+  }
+
   autoResize() {
     this.fieldNode.style.height = '';
     this.fieldNode.style.height = `${this.fieldNode.scrollHeight}px`;
-
-    this.setState({ preview: null });
   }
 
   send(e) {
@@ -51,7 +59,7 @@ export default class Input extends Component {
 
     if (!text || !text.trim()) return;
 
-    this.setState({ isFieldDisabled: true });
+    this.setState({ isFieldDisabled: true, isErrorShown: false });
 
     api.send({ text, ...(pid ? { pid } : {}) })
       .then(({ id }) => {
@@ -65,7 +73,7 @@ export default class Input extends Component {
         this.setState({ preview: null });
       })
       .catch(() => {
-        // TODO: do smth?
+        this.setState({ isErrorShown: true });
       })
       .finally(() => this.setState({ isFieldDisabled: false }));
   }
@@ -75,20 +83,22 @@ export default class Input extends Component {
 
     if (!text || !text.trim()) return;
 
+    this.setState({ isErrorShown: false });
+
     api.getPreview({ text })
       .then(preview => this.setState({ preview }))
       .catch(() => {
-        // TODO: do smth?
+        this.setState({ isErrorShown: true });
       });
   }
 
-  render(props, { isFieldDisabled, preview }) {
+  render(props, { isFieldDisabled, isErrorShown, preview }) {
     return (
       <form className={b('input', props)} onSubmit={this.send}>
         <textarea
           className="input__field"
           placeholder="Your comment here"
-          onInput={this.autoResize}
+          onInput={this.onInput}
           onKeyDown={this.onKeyDown}
           ref={r => (this.fieldNode = r)}
           required
@@ -97,6 +107,10 @@ export default class Input extends Component {
           {props.children}
         </textarea>
 
+        {
+          isErrorShown && <p className="input__error">Something went wrong. Please try again a bit later.</p>
+        }
+
         <div className="input__buttons">
           <button
             className={b('input__button', {}, { type: 'preview' })}