57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import { connect } from 'react-redux';
|
|
import { Icon, SlideModal } from 'UI';
|
|
import withToggle from 'HOCs/withToggle';
|
|
import { save, edit } from 'Duck/alerts';
|
|
|
|
import styles from './alertManager.css';
|
|
import AlertForm from './AlertForm';
|
|
|
|
@connect(state => ({
|
|
alert: state.getIn([ 'alerts', 'instance' ]),
|
|
loading: state.getIn([ 'alerts', 'saveRequest', 'loading' ]),
|
|
filter: state.getIn([ 'filters', 'appliedFilter' ]),
|
|
}), {
|
|
save,
|
|
edit,
|
|
})
|
|
@withToggle('isModalDisplayed', 'toggleModal')
|
|
export default class AlertManager extends React.PureComponent {
|
|
write = (e, { name, value }) => {
|
|
this.props.edit({ [ name ]: value });
|
|
}
|
|
|
|
save = () => {
|
|
const { toggleModal, alert, filter } = this.props;
|
|
this.props.save(alert.set('filter', filter))
|
|
.then(toggleModal);
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
isModalDisplayed, alert, toggleModal, loading,
|
|
} = this.props;
|
|
return (
|
|
<React.Fragment>
|
|
<div className={ styles.button } onClick={ toggleModal }>
|
|
<Icon name="search_notification" color="teal" size="16" />
|
|
</div>
|
|
<SlideModal
|
|
title="Alert"
|
|
isDisplayed={ isModalDisplayed }
|
|
onClose={ toggleModal }
|
|
size="small"
|
|
content={
|
|
<div className={ styles.wrapper }>
|
|
<AlertForm
|
|
alert={ alert }
|
|
onSave={ this.save }
|
|
write={ this.write }
|
|
loading={ loading }
|
|
/>
|
|
</div>
|
|
}
|
|
/>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|