abstract err show logic

1 files changed, 43 insertions, 7 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