From 58bc918c6d8ea15b99c477312bca412d675d7a9c Mon Sep 17 00:00:00 2001
From: Todd Dembrey <todd.dembrey@torchbox.com>
Date: Tue, 5 Mar 2019 09:59:11 +0000
Subject: [PATCH] GH-983: style the message like the other messages
---
.../src/app/src/components/MessageBar/index.js | 7 ++++---
.../app/src/components/MessagesList/index.js | 18 ++++++++++++++++++
.../src/containers/CurrentSubmissionDisplay.js | 15 +++++++++++----
.../app/src/containers/MessagesContainer.js | 5 +++--
4 files changed, 36 insertions(+), 9 deletions(-)
create mode 100644 opentech/static_src/src/app/src/components/MessagesList/index.js
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 e60dfcb47..53ec08acd 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 000000000..ddad485fe
--- /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 93512489b..8a0fc7519 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 535a43a35..1ff163bb1 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>
)
}
--
GitLab