diff --git a/opentech/static_src/src/app/src/components/MessageBar/index.js b/opentech/static_src/src/app/src/components/MessageBar/index.js index e60dfcb47236e8675841e81a9ce834a7de8ca155..53ec08acd79a2f18689ee02d392c462f16cb2954 100644 --- a/opentech/static_src/src/app/src/components/MessageBar/index.js +++ b/opentech/static_src/src/app/src/components/MessageBar/index.js @@ -3,14 +3,14 @@ import PropTypes from 'prop-types' import { MESSAGE_TYPES } from '@actions/messages' -const MessageBar = ({ message, type, onDismiss }) => { - const modifierClass = type ? `messages__text--${type}` : ''; +const MessageBar = ({ message, type, onDismiss, dismissMessage='OK' }) => { + const modifierClass = type ? `messages__text--${type}` : ''; return ( <li className={`messages__text ${modifierClass}`}> <div className="messages__inner"> <p className="messages__copy">{message}</p> - {onDismiss && <button className="button messages__button" onClick={onDismiss}>Ok</button>} + {onDismiss && <button className="button messages__button" onClick={onDismiss}>{dismissMessage}</button>} </div> </li> ) @@ -20,6 +20,7 @@ MessageBar.propTypes = { type: PropTypes.oneOf(Object.values(MESSAGE_TYPES)), message: PropTypes.string, onDismiss: PropTypes.func, + dismissMessage: PropTypes.string, } export default MessageBar diff --git a/opentech/static_src/src/app/src/components/MessagesList/index.js b/opentech/static_src/src/app/src/components/MessagesList/index.js new file mode 100644 index 0000000000000000000000000000000000000000..ddad485fe6a98041844e07b7604ff1e91be1745d --- /dev/null +++ b/opentech/static_src/src/app/src/components/MessagesList/index.js @@ -0,0 +1,18 @@ +import React from 'react' +import PropTypes from 'prop-types' + +import MessageBar from '@components/MessageBar' + +const MessagesList = ({ children }) => { + return ( + <ul className="messages"> + { children } + </ul> + ) +} + +MessagesList.propTypes = { + children: PropTypes.oneOfType([PropTypes.arrayOf(MessageBar), MessageBar]) +} + +export default MessagesList diff --git a/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js b/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js index 93512489b8920125adff23e367d6c8c10d6b9ef9..8a0fc7519963727464d9f67c19d888714ca97010 100644 --- a/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js +++ b/opentech/static_src/src/app/src/containers/CurrentSubmissionDisplay.js @@ -9,6 +9,9 @@ import { getCurrentSubmissionID, } from '@selectors/submissions' import SubmissionDisplay from '@components/SubmissionDisplay'; +import MessagesList from '@components/MessagesList' +import MessageBar from '@components/MessageBar' + const loadData = props => { return props.loadCurrentSubmission(['questions'], { bypassCache: true }) @@ -76,10 +79,14 @@ const CurrentSubmissionDisplay = props => { } const renderUpdatedMessage = () =>{ - return <p> - {updateMessage} - <button onClick={handleUpdateSubmission}>Show updated</button> - </p> + return <MessagesList> + <MessageBar + type='info' + message={updateMessage} + onDismiss={handleUpdateSubmission} + dismissMessage="Show Updated" + /> + </MessagesList> } return <> diff --git a/opentech/static_src/src/app/src/containers/MessagesContainer.js b/opentech/static_src/src/app/src/containers/MessagesContainer.js index 535a43a359f2ca80e485690d6133bef7dce3a1d3..1ff163bb146116692b0b51683ecc924f6d8068c3 100644 --- a/opentech/static_src/src/app/src/containers/MessagesContainer.js +++ b/opentech/static_src/src/app/src/containers/MessagesContainer.js @@ -3,17 +3,18 @@ import { connect } from 'react-redux' import PropTypes from 'prop-types' import MessageBar from '@components/MessageBar' +import MessagesList from '@components/MessagesList' import { getMessages } from '@selectors/messages' import { dismissMessage } from '@actions/messages' const MessagesContainer = ({ messages, dismiss }) => { return ( - <ul className="messages"> + <MessagesList> {Object.values(messages).map(({ message, type, id}) => <MessageBar key={id} message={message} type={type} onDismiss={() => dismiss(id)} /> )} - </ul> + </MessagesList> ) }