You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
1.2 KiB
49 lines
1.2 KiB
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { animated, Transition } from 'react-spring'
|
|
import { Box } from 'rebass'
|
|
import errorToUserFriendly from 'lib/utils/userFriendlyErrors'
|
|
import { Notification } from 'components/UI'
|
|
|
|
class GlobalError extends React.Component {
|
|
static propTypes = {
|
|
error: PropTypes.string,
|
|
clearError: PropTypes.func.isRequired
|
|
}
|
|
|
|
componentDidUpdate(prevProps) {
|
|
const { clearError, error } = this.props
|
|
if (!prevProps.error && error) {
|
|
setTimeout(clearError, 10000)
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { error, clearError } = this.props
|
|
|
|
return (
|
|
<Transition
|
|
native
|
|
items={error}
|
|
from={{ opacity: 0 }}
|
|
enter={{ opacity: 1 }}
|
|
leave={{ opacity: 0 }}
|
|
>
|
|
{show =>
|
|
show &&
|
|
(springStyles => (
|
|
<Box mt="22px" px={3} width={1} css={{ position: 'absolute', 'z-index': 100 }}>
|
|
<animated.div style={springStyles}>
|
|
<Notification variant="error" onClick={clearError}>
|
|
{errorToUserFriendly(error)}
|
|
</Notification>
|
|
</animated.div>
|
|
</Box>
|
|
))
|
|
}
|
|
</Transition>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default GlobalError
|
|
|