Files
freeCodeCamp/common/app/Flash/Flash.jsx
Berkeley Martinez 1ee9d9259c feat(Flash): Normalize flash types with object
help prevent typo errors
2018-01-30 17:14:33 -08:00

44 lines
1022 B
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { CloseButton } from 'react-bootstrap';
import { connect } from 'react-redux';
import ns from './ns.json';
import { alertTypes } from '../../utils/flash.js';
import {
latestMessageSelector,
clickOnClose
} from './redux';
const propTypes = {
clickOnClose: PropTypes.func.isRequired,
message: PropTypes.string,
type: PropTypes.oneOf(Object.keys(alertTypes))
};
const mapStateToProps = latestMessageSelector;
const mapDispatchToProps = { clickOnClose };
export function Flash({ type, clickOnClose, message }) {
if (!message) {
return null;
}
return (
<div className={`${ns}-container bg-${type}`}>
<div className={`${ns}-content`}>
<p className={ `${ns}-message` }>
{ message }
</p>
<CloseButton onClick={ clickOnClose }/>
</div>
</div>
);
}
Flash.displayName = 'Flash';
Flash.propTypes = propTypes;
export default connect(
mapStateToProps,
mapDispatchToProps
)(Flash);