abstract err show logic

4 files changed, 60 insertions, 49 deletions

diff --git a/frontend/src/components/Err.js b/frontend/src/components/Err.js
index 8562a74..dc78398 100644
--- a/frontend/src/components/Err.js
+++ b/frontend/src/components/Err.js
@@ -1,18 +1,54 @@
 import React from 'react';
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 
 const ErrMsg = styled.p`
     display: inline;
     font-weight: 700;
     margin-left: 2em;
-    color: #ff3333
+    color: #ff3333;
+    opacity: 0;
+    transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);
+
+    ${props => 
+        (props.active) && css`
+            opacity: 1
+        `
+    };
 `
 
-const Error = (props) => {
-    const msg = props.msg.toString().toLowerCase()
-    return (
-        <ErrMsg> {msg} </ErrMsg>
-    );
+class Error extends React.Component {
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            active: false,
+            msg: '',
+        };
+
+        this.showMessage = this.showMessage.bind(this);
+    }
+
+    showMessage(msg, duration = 3000) {
+        this.setState({ 
+            active: true,
+            msg: msg
+        })
+
+        // fadeout after duration ms if duration != -1
+        if (duration !== -1) {
+            setTimeout(() => {
+                this.setState({ active: false })
+            }, duration);
+        }
+    }
+
+    render() {
+        const msg = this.state.msg.toString().toLowerCase()
+        return (
+            <ErrMsg active={this.state.active}> {msg} </ErrMsg>
+        );
+    }
 }
 
 export default Error
\ No newline at end of file
diff --git a/frontend/src/components/NewPaste.js b/frontend/src/components/NewPaste.js
index 1409c22..f48f48b 100644
--- a/frontend/src/components/NewPaste.js
+++ b/frontend/src/components/NewPaste.js
@@ -19,13 +19,7 @@ class NewPaste extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    newErr(msg, duration = 5000) {
-        this.setState({ error: msg })
-        setTimeout(() => {
-            this.setState({ error: '' })
-        }, duration);
+        this.ErrorLabel = React.createRef();
     }
 
     renderRedirect = () => {
@@ -64,10 +58,10 @@ class NewPaste extends React.Component {
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt)
+                    this.ErrorLabel.current.showMessage(errTxt)
                 } else {
                     // some weird err (e.g. network)
-                    this.newErr(error)
+                    this.ErrorLabel.current.showMessage(error)
                 }
             });
     }
@@ -87,7 +81,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} />
+                <Error ref={this.ErrorLabel} />
                 <OptionsContainer
                     pass={this.state.pass}
                     expiry={this.state.expiry}
diff --git a/frontend/src/components/PasswordModal.js b/frontend/src/components/PasswordModal.js
index 4b37dfe..ff4a0df 100644
--- a/frontend/src/components/PasswordModal.js
+++ b/frontend/src/components/PasswordModal.js
@@ -35,8 +35,8 @@ class PasswordModal extends React.Component {
 
     constructor(props) {
         super(props);
-
         this.submitPassword = this.submitPassword.bind(this);
+        this.ErrorLabel = React.createRef();
     }
 
     submitPassword(event) {
@@ -64,7 +64,7 @@ class PasswordModal extends React.Component {
                     </RightPad>
                     <LeftPad>
                         <input className="lt-button lt-shadow lt-hover" type="submit" value="continue" />
-                        <Error msg={this.props.error} />
+                        <Error ref={this.ErrorLabel} />
                     </LeftPad>
                 </form>
             </Modal>
diff --git a/frontend/src/components/ViewPaste.js b/frontend/src/components/ViewPaste.js
index d7bd355..7232825 100644
--- a/frontend/src/components/ViewPaste.js
+++ b/frontend/src/components/ViewPaste.js
@@ -30,35 +30,14 @@ class ViewPaste extends React.Component {
 
         this.handleChange = this.handleChange.bind(this);
         this.validatePass = this.validatePass.bind(this);
+        this.ErrorLabel = React.createRef();
+        this.PasswordModal = React.createRef();
     }
 
     handleChange(event) {
         this.setState({ enteredPass: event.target.value });
     }
 
-    newErr(msg, duration = 5000) {
-        this.setState({ error: msg })
-
-        // if duration -1, dont clear
-        if (duration !== -1) {
-            setTimeout(() => {
-                this.setState({ error: '' })
-            }, duration);
-        }
-    }
-
-    newPassErr() {
-        // shake thing
-        // set err field and clear input
-        this.setState({ 
-            passError: "incorrect pass",
-            enteredPass: "",
-        })
-        setTimeout(() => {
-            this.setState({ passError: '' })
-        }, 3000);
-    }
-
     drawRightMode() {
         switch (this.state.mode) {
             // TODO: add other renderers
@@ -83,17 +62,19 @@ class ViewPaste extends React.Component {
 
                 // 401 unauth (bad pass)
                 if (resp.status === 401) {
-                    this.newPassErr()
+                    this.PasswordModal.current
+                        .ErrorLabel.current
+                        .showMessage("incorrect pass")
                     return
                 }
 
                 // otherwise, just log it lmao
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt)
+                    this.ErrorLabel.current.showMessage(errTxt)
                 } else {
                     // some weird err (e.g. network)
-                    this.newErr(error)
+                    this.ErrorLabel.current.showMessage(error)
                 }
             });
     }
@@ -102,11 +83,11 @@ class ViewPaste extends React.Component {
         return (
             <div>
                 <PasswordModal
+                    ref={this.PasswordModal}
                     hasPass={this.state.hasPass}
                     validPass={this.state.validPass}
                     value={this.state.enteredPass}
                     onChange={this.handleChange}
-                    error={this.state.passError}
                     validateCallback={this.validatePass} />
                 <TitleInput
                     value={this.state.title}
@@ -118,7 +99,7 @@ class ViewPaste extends React.Component {
                 <PasteInfo
                     expiry={this.state.expiry}
                     mode={this.state.mode} />
-                <Error msg={this.state.error} />
+                <Error ref={this.ErrorLabel} />
             </div>
         );
     }
@@ -155,12 +136,12 @@ class ViewPaste extends React.Component {
                 // some weird err
                 if (resp !== undefined) {
                     const errTxt = `${resp.statusText}: ${resp.data}`
-                    this.newErr(errTxt, -1)
+                    this.ErrorLabel.current.showMessage(errTxt, -1)
                     return
                 }
 
                 // some weird err (e.g. network)
-                this.newErr(error, -1)
+                this.ErrorLabel.current.showMessage(error, -1)
             })
     }
 }