Added date of incident to the profile page

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) => {
               <H4>{number_of_children === 1 ? 'CHILD' : 'CHILDREN'}</H4>
               <H2>{number_of_children > 0 ? number_of_children : 'N/A'}</H2>
             </Children>
+            <DateOfIncident>
+              <H4>DATE OF INCIDENT</H4>
+              <H2>{date_of_incident ?? 'N/A'}</H2>
+            </DateOfIncident>
           </Div>
           <Location>
             <H4>LOCATION</H4>
@@ -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

src/components/profileDetails/PersonProfile.test.js

@@ -20,7 +20,8 @@ describe('<PersonProfile />', () => {
     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('<PersonProfile />', () => {
     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('<PersonProfile />', () => {
     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(
+      <Router history={history}>
+        <PersonProfile info={noChildrenInfo} donation={donation} />
+      </Router>
+    );
+    expect(getByText('DATE OF INCIDENT'));
+    expect(getByText('N/A'));
+  });
 });

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
 };