frontend/src/components/Err.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

import React from 'react';
import styled, { css } from 'styled-components'

export const ErrMsg = styled.p`
    display: inline;
    font-weight: 700;
    color: #ff3333;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(.25,.8,.25,1);

    ${props => 
        (props.active) && css`
            opacity: 1
        `
    };
`

class Error extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            active: false,
            msg: '&nbsp;',
        };

        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