114 lines
2.8 KiB
JavaScript
114 lines
2.8 KiB
JavaScript
import React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'react-redux'
|
|
import { getToasts } from '../selectors'
|
|
import { dismissToast } from '../actions/toasts'
|
|
import { CX } from '../constants'
|
|
import Toast from '../components/toast'
|
|
|
|
class ToastsContainer extends React.PureComponent {
|
|
|
|
handleOnDismiss = (key) => {
|
|
this.props.dispatch(dismissToast(key))
|
|
}
|
|
|
|
render() {
|
|
// const { notifications } = this.props
|
|
const notifications = [
|
|
{
|
|
key: '1',
|
|
title: 'Error',
|
|
to: 'to',
|
|
image: 'https://gab.com/media/user/58077e8a49705.jpg',
|
|
message: 'Unable to follow @andrew',
|
|
date: new Date(),
|
|
isImageAccount: true,
|
|
},
|
|
{
|
|
key: '2',
|
|
title: 'Success',
|
|
to: 'to',
|
|
image: 'https://gab.com/media/user/58077e8a49705.jpg',
|
|
message: 'Your gab was posted. Click here to view',
|
|
date: new Date(),
|
|
isImageAccount: false,
|
|
},
|
|
{
|
|
key: '3',
|
|
title: '',
|
|
to: 'to',
|
|
image: 'https://gab.com/media/user/58077e8a49705.jpg',
|
|
message: 'Unable to follow @andrew',
|
|
date: new Date(),
|
|
isImageAccount: true,
|
|
},
|
|
{
|
|
key: '4',
|
|
title: '',
|
|
to: 'to',
|
|
image: 'https://gab.com/media/user/58077e8a49705.jpg',
|
|
message: 'Your gab was posted. Click here to view',
|
|
date: new Date(),
|
|
isImageAccount: false,
|
|
},
|
|
{
|
|
key: '5',
|
|
title: '',
|
|
to: 'to',
|
|
message: 'Your gab was deleted',
|
|
date: new Date(),
|
|
isImageAccount: false,
|
|
},
|
|
]
|
|
|
|
const hasNotifications = Array.isArray(notifications) && notifications.length > 0
|
|
|
|
const containerClasses = CX({
|
|
d: 1,
|
|
z5: 1,
|
|
posFixed: 1,
|
|
bottom0: 1,
|
|
left0: 1,
|
|
pl15: 1,
|
|
pt15: 1,
|
|
heightMax100VH: 1,
|
|
pb10: 1,
|
|
displayNone: !hasNotifications
|
|
})
|
|
|
|
|
|
return (
|
|
<div className={containerClasses}>
|
|
{
|
|
!hasNotifications && notifications.map((notification) => (
|
|
<Toast
|
|
onDismiss={this.handleOnDismiss}
|
|
key={notification.key}
|
|
id={notification.key}
|
|
title={notification.title}
|
|
to={notification.to}
|
|
image={notification.image}
|
|
message={notification.message}
|
|
date={notification.date}
|
|
isImageAccount={notification.isImageAccount}
|
|
/>
|
|
))
|
|
}
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
const mapStateToProps = (state) => {
|
|
const notifications = getToasts(state)
|
|
if (!notifications) return {}
|
|
return { notifications }
|
|
}
|
|
|
|
ToastsContainer.propTypes = {
|
|
notifications: PropTypes.array,
|
|
}
|
|
|
|
export default connect(mapStateToProps)(ToastsContainer) |