From 022e63bded61787dfc66490b93fdb8c87449e65f Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 15 Jan 2019 12:27:51 +0000
Subject: [PATCH] add logic for handling different answer types
---
.../components/ApplicationDisplay/index.js | 27 ++++++++++++++++---
.../app/src/components/DisplayPanel/index.js | 2 +-
2 files changed, 24 insertions(+), 5 deletions(-)
diff --git a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
index c7847176e..4fed44aa9 100644
--- a/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
+++ b/opentech/static_src/src/app/src/components/ApplicationDisplay/index.js
@@ -6,16 +6,35 @@ const Meta = ({ question, answer }) => {
return (
<div>
<h5>{question}</h5>
- <p>{answer}</p>
+ <p dangerouslySetInnerHTML={{ __html: answer }} />
</div>
)
}
const Response = ({question, answer}) => {
+ // array that doesn't contain HTML
+ if (Array.isArray(answer) && !answer[0].startsWith('<')) {
+ return (
+ <section>
+ <h4>{question}</h4>
+ <ul>{answer.map((a) => <li key={a}>{a}</li>)}</ul>
+ </section>
+ )
+ // array that contains HTML
+ } else if (Array.isArray(answer)) {
+ return (
+ <section>
+ <h4>{question}</h4>
+ {answer.map(a => <div dangerouslySetInnerHTML={{ __html: a }} />)}
+ </section>
+ )
+ }
+
+ // strings with and without HTML
return (
<section>
<h4>{question}</h4>
- <p>{answer}</p>
+ <p dangerouslySetInnerHTML={{ __html: answer }} />
</section>
)
}
@@ -35,8 +54,8 @@ export default class ApplicationDisplay extends Component {
</div>
<div className="rich-text rich-text--answers">
- {responses.map(response => (
- <Response question={response.question} answer={response.answer} />
+ {responses.map(response => (
+ <Response question={response.question} answer={response.answer} />
))}
</div>
</div>
diff --git a/opentech/static_src/src/app/src/components/DisplayPanel/index.js b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
index e04a9cbd3..d5dbbfc41 100644
--- a/opentech/static_src/src/app/src/components/DisplayPanel/index.js
+++ b/opentech/static_src/src/app/src/components/DisplayPanel/index.js
@@ -26,7 +26,7 @@ const DisplayPanel = () => {
answer: ['One', 'Two', 'Three', 'Four', 'Five']
}, {
question: 'Have you ever applied to or received funding as an OTF project?',
- answer: ['<p>One</p>', '<b>Two</b>']
+ answer: ['<p>One</p>', '<p><b>Two</b></p>', '<p>Three</p>']
}]
}
--
GitLab