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.
69 lines
1.5 KiB
69 lines
1.5 KiB
import React from 'react';
|
|
import { connect } from 'react-redux';
|
|
import classnames from 'classnames';
|
|
import PropTypes from 'prop-types';
|
|
import * as appPropTypes from './appPropTypes';
|
|
import * as stateActions from '../redux/stateActions';
|
|
import { Appear } from './transitions';
|
|
|
|
const Notifications = ({ notifications, onClick }) =>
|
|
{
|
|
return (
|
|
<div data-component='Notifications'>
|
|
{
|
|
notifications.map((notification) =>
|
|
{
|
|
return (
|
|
<Appear key={notification.id} duration={250}>
|
|
<div
|
|
className={classnames('notification', notification.type)}
|
|
onClick={() => onClick(notification.id)}
|
|
>
|
|
<div className='icon' />
|
|
|
|
<div className='body'>
|
|
<If condition={notification.title}>
|
|
<p className='title'>{notification.title}</p>
|
|
</If>
|
|
|
|
<p className='text'>{notification.text}</p>
|
|
</div>
|
|
</div>
|
|
</Appear>
|
|
);
|
|
})
|
|
}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
Notifications.propTypes =
|
|
{
|
|
notifications : PropTypes.arrayOf(appPropTypes.Notification).isRequired,
|
|
onClick : PropTypes.func.isRequired
|
|
};
|
|
|
|
const mapStateToProps = (state) =>
|
|
{
|
|
const { notifications } = state;
|
|
|
|
return { notifications };
|
|
};
|
|
|
|
const mapDispatchToProps = (dispatch) =>
|
|
{
|
|
return {
|
|
onClick : (notificationId) =>
|
|
{
|
|
dispatch(stateActions.removeNotification(notificationId));
|
|
}
|
|
};
|
|
};
|
|
|
|
const NotificationsContainer = connect(
|
|
mapStateToProps,
|
|
mapDispatchToProps
|
|
)(Notifications);
|
|
|
|
export default NotificationsContainer;
|