diff --git a/src/components/profileDetails/PersonProfile.js b/src/components/profileDetails/PersonProfile.js
index e26178f..6222348 100644
--- a/src/components/profileDetails/PersonProfile.js
+++ b/src/components/profileDetails/PersonProfile.js
@@ -16,13 +16,13 @@ import {
Location,
Button,
H2,
- Context
+ Context,
+ DateOfIncident
} from './styles';
const getSocialCopy = (info) => `Join me in donating to ${info.full_name}’s fund, and supporting their family’s fight for justice.
#SayTheirNames #BlackLivesMatter #${info.full_name.replace(/\s+/g, '')}`;
-
const PersonProfile = (props) => {
const { info, donation } = props;
const {
@@ -34,7 +34,8 @@ const PersonProfile = (props) => {
their_story,
outcome,
country,
- donation_links
+ donation_links,
+ date_of_incident
} = info;
return (
@@ -66,6 +67,10 @@ const PersonProfile = (props) => {
{number_of_children === 1 ? 'CHILD' : 'CHILDREN'}
{number_of_children > 0 ? number_of_children : 'N/A'}
+
+ DATE OF INCIDENT
+ {date_of_incident ?? 'N/A'}
+
LOCATION
@@ -123,7 +128,8 @@ PersonProfile.propTypes = {
their_story: PropTypes.string.isRequired,
country: PropTypes.string.isRequired,
outcome: PropTypes.string,
- donation_links: PropTypes.array.isRequired
+ donation_links: PropTypes.array.isRequired,
+ date_of_incident: PropTypes.array.isRequired
}),
donation: PropTypes.shape({
identifier: PropTypes.string
diff --git a/src/components/profileDetails/PersonProfile.test.js b/src/components/profileDetails/PersonProfile.test.js
index 1d2c94c..a6d31c6 100644
--- a/src/components/profileDetails/PersonProfile.test.js
+++ b/src/components/profileDetails/PersonProfile.test.js
@@ -20,7 +20,8 @@ describe('', () => {
their_story: 'sample story',
outcome: 'sample outcome',
country: 'country',
- donation_links: ['https://www.google.com']
+ donation_links: ['https://www.google.com'],
+ date_of_incident: '2021-10-25'
};
test('renders PersonProfile', () => {
@@ -44,6 +45,8 @@ describe('', () => {
expect(getByText('sample story'));
expect(getByText('Context'));
expect(getByText('sample outcome'));
+ expect(getByText('DATE OF INCIDENT'));
+ expect(getByText('2021-10-25'));
});
test('renders PersonProfile with correct links', () => {
@@ -72,4 +75,19 @@ describe('', () => {
expect(getByText('CHILDREN'));
expect(getByText('N/A'));
});
+
+ test('renders N/A when date_of_incident is null', () => {
+ const history = createMemoryHistory();
+ const noChildrenInfo = {
+ ...info,
+ date_of_incident: null
+ };
+ const { getByText } = render(
+
+
+
+ );
+ expect(getByText('DATE OF INCIDENT'));
+ expect(getByText('N/A'));
+ });
});
diff --git a/src/components/profileDetails/styles.js b/src/components/profileDetails/styles.js
index aae2f5e..96bd000 100644
--- a/src/components/profileDetails/styles.js
+++ b/src/components/profileDetails/styles.js
@@ -118,7 +118,7 @@ const H4 = styled.h4`
const Div = styled.div`
display: flex;
- width: 50%;
+ width: 60%;
justify-content: flex-start;
margin: 10px;
@@ -131,7 +131,7 @@ const Age = styled.div`
display: flex;
flex-direction: column;
align-content: space-around;
- width: 25%;
+ padding-right 15px;
border-right: 1px solid #d8d8d8;
h2 {
@@ -144,6 +144,18 @@ const Children = styled.div`
flex-direction: column;
align-content: space-around;
padding-left: 15px;
+ border-right: 1px solid #d8d8d8;
+ padding-right: 15px;
+ h2 {
+ margin: 0px;
+ }
+`;
+
+const DateOfIncident = styled.div`
+ display: inline;
+ flex-direction: column;
+ align-content: space-around;
+ padding-left: 15px;
h2 {
margin: 0px;
}
@@ -191,8 +203,6 @@ const ShareSection = styled.section`
p {
margin: 5px 0px;
}
-
-
`;
const Share = styled.div`
@@ -207,7 +217,6 @@ const Share = styled.div`
font-size: 17px;
line-height: 20px;
}
-
`;
const H2 = styled.h2`
@@ -261,5 +270,6 @@ export {
Button,
H2,
Share,
- Context
+ Context,
+ DateOfIncident
};