From 58a3e62cc370d9dffe48df4eea072fedf022c2c7 Mon Sep 17 00:00:00 2001
From: Josh Edwards <josh.r.edwards@gmail.com>
Date: Mon, 25 Oct 2021 21:53:32 +0100
Subject: [PATCH 1/2] Added date of incident to the profile page

---
 .../profileDetails/PersonProfile.js           | 24 ++++++++++++++-----
 .../profileDetails/PersonProfile.test.js      | 20 +++++++++++++++-
 src/components/profileDetails/styles.js       | 22 ++++++++++++-----
 3 files changed, 53 insertions(+), 13 deletions(-)

diff --git a/src/components/profileDetails/PersonProfile.js b/src/components/profileDetails/PersonProfile.js
index e26178f..d05afc0 100644
--- a/src/components/profileDetails/PersonProfile.js
+++ b/src/components/profileDetails/PersonProfile.js
@@ -16,13 +16,15 @@ 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. 
+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 +36,8 @@ const PersonProfile = (props) => {
     their_story,
     outcome,
     country,
-    donation_links
+    donation_links,
+    date_of_incident
   } = info;
 
   return (
@@ -66,6 +69,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>
@@ -78,7 +85,11 @@ const PersonProfile = (props) => {
               </Button>
             </Link>
           )}
-          <Share socialCopy={getSocialCopy(info)} url={window.location.href} title="#SayTheirNames" />
+          <Share
+            socialCopy={getSocialCopy(info)}
+            url={window.location.href}
+            title="#SayTheirNames"
+          />
         </PersonSection>
       </PersonalInformation>
       <Context>
@@ -123,7 +134,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('<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'));
+  });
 });
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
 };

From 02a66eda073179d486a955856dd11e19d9a2ad7e Mon Sep 17 00:00:00 2001
From: Josh Edwards <josh.r.edwards@gmail.com>
Date: Mon, 25 Oct 2021 22:00:33 +0100
Subject: [PATCH 2/2] Removed auto-formatting to original format

---
 src/components/profileDetails/PersonProfile.js | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/profileDetails/PersonProfile.js b/src/components/profileDetails/PersonProfile.js
index d05afc0..6222348 100644
--- a/src/components/profileDetails/PersonProfile.js
+++ b/src/components/profileDetails/PersonProfile.js
@@ -20,9 +20,7 @@ import {
   DateOfIncident
 } from './styles';
 
-const getSocialCopy = (info) => `Join me in donating to ${
-  info.full_name
-}’s fund, and supporting their family’s fight for justice. 
+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) => {
@@ -85,11 +83,7 @@ const PersonProfile = (props) => {
               </Button>
             </Link>
           )}
-          <Share
-            socialCopy={getSocialCopy(info)}
-            url={window.location.href}
-            title="#SayTheirNames"
-          />
+          <Share socialCopy={getSocialCopy(info)} url={window.location.href} title="#SayTheirNames" />
         </PersonSection>
       </PersonalInformation>
       <Context>