error print

1 files changed, 25 insertions, 3 deletions

diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 2ad9533..29ae9ca 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -3,6 +3,21 @@ import { TitleInput, PasteInput } from './Inputs'
 import OptionsContainer from './Options'
 import axios from 'axios';
 import { Redirect } from 'react-router-dom'
+import styled from 'styled-components'
+
+const ErrMsg = styled.p`
+    display: inline-block;
+    font-weight: 700;
+    margin-left: 2em;
+    color: #ff3333
+`
+
+const Error = (props) => {
+    const msg = props.msg.toString().toLowerCase()
+    return (
+        <ErrMsg> { msg } </ErrMsg>
+    );
+}
 
 class NewPaste extends React.Component {
     constructor(props) {
@@ -13,12 +28,20 @@ class NewPaste extends React.Component {
             pass: '',
             expiry: '',
             hash: '',
+            error: '',
         };
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
     }
 
+    newErr(msg) {
+        this.setState({ error: msg })
+        setTimeout(() => {
+            this.setState({ error: '' })
+        }, 3000);
+    }
+
     renderRedirect = () => {
         if (this.state.hash !== '') {
             const redirUrl = `/${this.state.hash}`
@@ -86,12 +109,10 @@ class NewPaste extends React.Component {
             data: bodyFormData,
             headers: { 'Content-Type': 'multipart/form-data' },
         }).then((response) => {
-
             // on success, redir
             this.setState({ hash: response.data.hash })
         }).catch((response) => {
-            // TODO: handle error
-            console.log(response);
+            this.newErr(response)
         });
 
         event.preventDefault();
@@ -112,6 +133,7 @@ class NewPaste extends React.Component {
                     maxLength="100000"
                     id="pasteInput" />
                 <input className="lt-button lt-shadow lt-hover" type="submit" value="new paste" />
+                <Error msg={this.state.error} />
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}