import PropTypes from 'prop-types'; import React from 'react'; import { bindActionCreators } from 'redux'; import { connect } from 'react-redux'; import { useTranslation } from 'react-i18next'; import * as ToastActions from '../actions/toast'; import ExitIcon from '../../../images/exit.svg'; function Toast(props) { const { t } = useTranslation('WebEditor'); return ( <section className="toast"> <p> {t(props.text)} </p> <button className="toast__close" onClick={props.hideToast} aria-label="Close Alert" > <ExitIcon focusable="false" aria-hidden="true" /> </button> </section> ); } Toast.propTypes = { text: PropTypes.string.isRequired, hideToast: PropTypes.func.isRequired }; function mapStateToProps(state) { return state.toast; } function mapDispatchToProps(dispatch) { return bindActionCreators(ToastActions, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(Toast);