From 08df8c528b4c2f54efe4ae234cfc717204895f61 Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Thu, 2 Apr 2020 16:06:15 -0700
Subject: [PATCH 1/9] fix(#1946): patients can also be related person

---
 src/__tests__/components/Navbar.test.tsx      | 25 ++++++++--
 src/__tests__/components/Sidebar.test.tsx     | 49 ++++++++++++++++---
 .../related-persons/AddRelatedPersonModal.tsx | 19 +++++--
 3 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/src/__tests__/components/Navbar.test.tsx b/src/__tests__/components/Navbar.test.tsx
index feee51b62a..c087581ab2 100644
--- a/src/__tests__/components/Navbar.test.tsx
+++ b/src/__tests__/components/Navbar.test.tsx
@@ -30,7 +30,10 @@ describe('Navbar', () => {
     })
     it('should navigate to / when the header is clicked', () => {
       act(() => {
-        header.first().props().onClick()
+        header
+          .first()
+          .props()
+          .onClick()
       })
       expect(history.location.pathname).toEqual('/')
     })
@@ -45,13 +48,19 @@ describe('Navbar', () => {
     })
     it('should navigate to /patients when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[0].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients')
     })
     it('should navigate to /patients/new when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[1].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients/new')
     })
@@ -72,14 +81,20 @@ describe('Navbar', () => {
 
     it('should navigate to to /appointments when the appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[0].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments')
     })
 
     it('should navigate to /appointments/new when the new appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[1].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments/new')
     })
diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx
index fc7066d6a0..59ed0e1f17 100644
--- a/src/__tests__/components/Sidebar.test.tsx
+++ b/src/__tests__/components/Sidebar.test.tsx
@@ -35,7 +35,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(1).text().trim()).toEqual('dashboard.label')
+      expect(
+        listItems
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('dashboard.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -65,7 +70,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(2).text().trim()).toEqual('patients.label')
+      expect(
+        listItems
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('patients.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -95,7 +105,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('patients.patientsList')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('patients.patientsList')
     })
 
     it('should be active when the current path is /patients', () => {
@@ -125,7 +140,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('patients.newPatient')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('patients.newPatient')
     })
 
     it('should be active when the current path is /patients/new', () => {
@@ -155,7 +175,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('scheduling.label')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.label')
     })
 
     it('should be active when the current path is /appointments', () => {
@@ -185,7 +210,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(5).text().trim()).toEqual('scheduling.appointments.schedule')
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.schedule')
     })
 
     it('should be active when the current path is /appointments', () => {
@@ -215,7 +245,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('scheduling.appointments.new')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.new')
     })
 
     it('should be active when the current path is /appointments/new', () => {
diff --git a/src/patients/related-persons/AddRelatedPersonModal.tsx b/src/patients/related-persons/AddRelatedPersonModal.tsx
index d4e652fd28..07e795543a 100644
--- a/src/patients/related-persons/AddRelatedPersonModal.tsx
+++ b/src/patients/related-persons/AddRelatedPersonModal.tsx
@@ -5,6 +5,8 @@ import TextInputWithLabelFormGroup from 'components/input/TextInputWithLabelForm
 import RelatedPerson from 'model/RelatedPerson'
 import PatientRepository from 'clients/db/PatientRepository'
 import Patient from 'model/Patient'
+import { useSelector } from 'react-redux'
+import { RootState } from '../../store'
 
 interface Props {
   show: boolean
@@ -21,6 +23,9 @@ const AddRelatedPersonModal = (props: Props) => {
     patientId: '',
     type: '',
   })
+  const { patient } = useSelector((state: RootState) => state.patient)
+
+  const patientCode = () => patient.code
 
   const onFieldChange = (key: string, value: string) => {
     setRelatedPerson({
@@ -33,8 +38,8 @@ const AddRelatedPersonModal = (props: Props) => {
     onFieldChange(fieldName, event.target.value)
   }
 
-  const onPatientSelect = (patient: Patient[]) => {
-    setRelatedPerson({ ...relatedPerson, patientId: patient[0].id })
+  const onPatientSelect = (patients: Patient[]) => {
+    setRelatedPerson({ ...relatedPerson, patientId: patients[0].id })
   }
 
   const body = (
@@ -50,9 +55,13 @@ const AddRelatedPersonModal = (props: Props) => {
               placeholder={t('patient.relatedPerson')}
               onChange={onPatientSelect}
               onSearch={async (query: string) => PatientRepository.search(query)}
-              renderMenuItemChildren={(patient: Patient) => (
-                <div>{`${patient.fullName} (${patient.code})`}</div>
-              )}
+              renderMenuItemChildren={(patients: Patient) => {
+                if (patientCode() === patients.code) {
+                  return <div />
+                }
+
+                return <div>{`${patients.fullName} (${patients.code})`}</div>
+              }}
             />
           </div>
         </div>

From 534c9de88334619381d32f47a4c8ffd8df9fb74c Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Sat, 4 Apr 2020 15:56:55 -0700
Subject: [PATCH 2/9] fix(patients): current patient can't be related person

---
 src/__tests__/components/Navbar.test.tsx      |  35 ++++-
 src/__tests__/components/Sidebar.test.tsx     |  70 ++++++++--
 src/__tests__/labs/ViewLab.test.tsx           | 132 ++++++++++++++----
 src/__tests__/labs/ViewLabs.test.tsx          |  54 +++++--
 .../related-persons/AddRelatedPersonModal.tsx |  12 +-
 5 files changed, 238 insertions(+), 65 deletions(-)

diff --git a/src/__tests__/components/Navbar.test.tsx b/src/__tests__/components/Navbar.test.tsx
index 8d10a545b0..aa8a8c79c9 100644
--- a/src/__tests__/components/Navbar.test.tsx
+++ b/src/__tests__/components/Navbar.test.tsx
@@ -30,7 +30,10 @@ describe('Navbar', () => {
     })
     it('should navigate to / when the header is clicked', () => {
       act(() => {
-        header.first().props().onClick()
+        header
+          .first()
+          .props()
+          .onClick()
       })
       expect(history.location.pathname).toEqual('/')
     })
@@ -45,13 +48,19 @@ describe('Navbar', () => {
     })
     it('should navigate to /patients when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[0].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients')
     })
     it('should navigate to /patients/new when the list option is selected', () => {
       act(() => {
-        patientsLinkList.first().props().children[1].props.onClick()
+        patientsLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/patients/new')
     })
@@ -72,14 +81,20 @@ describe('Navbar', () => {
 
     it('should navigate to to /appointments when the appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[0].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments')
     })
 
     it('should navigate to /appointments/new when the new appointment list option is selected', () => {
       act(() => {
-        scheduleLinkList.first().props().children[1].props.onClick()
+        scheduleLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/appointments/new')
     })
@@ -96,14 +111,20 @@ describe('Navbar', () => {
 
     it('should navigate to to /labs when the labs list option is selected', () => {
       act(() => {
-        labsLinkList.first().props().children[0].props.onClick()
+        labsLinkList
+          .first()
+          .props()
+          .children[0].props.onClick()
       })
       expect(history.location.pathname).toEqual('/labs')
     })
 
     it('should navigate to /labs/new when the new labs list option is selected', () => {
       act(() => {
-        labsLinkList.first().props().children[1].props.onClick()
+        labsLinkList
+          .first()
+          .props()
+          .children[1].props.onClick()
       })
       expect(history.location.pathname).toEqual('/labs/new')
     })
diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx
index 11bf2804af..afb593fb67 100644
--- a/src/__tests__/components/Sidebar.test.tsx
+++ b/src/__tests__/components/Sidebar.test.tsx
@@ -35,7 +35,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(1).text().trim()).toEqual('dashboard.label')
+      expect(
+        listItems
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('dashboard.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -66,7 +71,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(2).text().trim()).toEqual('patients.label')
+      expect(
+        listItems
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('patients.label')
     })
 
     it('should render the new_patient link', () => {
@@ -74,7 +84,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('patients.newPatient')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('patients.newPatient')
     })
 
     it('should render the patients_list link', () => {
@@ -82,7 +97,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('patients.patientsList')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('patients.patientsList')
     })
 
     it('main patients link should be active when the current path is /patients', () => {
@@ -155,7 +175,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('scheduling.label')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.label')
     })
 
     it('should render the new appointment link', () => {
@@ -163,7 +188,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('scheduling.appointments.new')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.new')
     })
 
     it('should render the appointments schedule link', () => {
@@ -171,7 +201,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(5).text().trim()).toEqual('scheduling.appointments.schedule')
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.schedule')
     })
 
     it('main scheduling link should be active when the current path is /appointments', () => {
@@ -244,7 +279,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('labs.label')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('labs.label')
     })
 
     it('should render the new labs request link', () => {
@@ -252,7 +292,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(5).text().trim()).toEqual('labs.requests.new')
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('labs.requests.new')
     })
 
     it('should render the labs list link', () => {
@@ -260,7 +305,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(6).text().trim()).toEqual('labs.requests.label')
+      expect(
+        listItems
+          .at(6)
+          .text()
+          .trim(),
+      ).toEqual('labs.requests.label')
     })
 
     it('main labs link should be active when the current path is /labs', () => {
diff --git a/src/__tests__/labs/ViewLab.test.tsx b/src/__tests__/labs/ViewLab.test.tsx
index 8bcd97476e..0d79b53259 100644
--- a/src/__tests__/labs/ViewLab.test.tsx
+++ b/src/__tests__/labs/ViewLab.test.tsx
@@ -85,29 +85,57 @@ describe('View Labs', () => {
       const expectedLab = { ...mockLab } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const forPatientDiv = wrapper.find('.for-patient')
-      expect(forPatientDiv.find('h4').text().trim()).toEqual('labs.lab.for')
-
-      expect(forPatientDiv.find('h5').text().trim()).toEqual(mockPatient.fullName)
+      expect(
+        forPatientDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.for')
+
+      expect(
+        forPatientDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(mockPatient.fullName)
     })
 
     it('should display the lab type for type', async () => {
       const expectedLab = { ...mockLab, type: 'expected type' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const labTypeDiv = wrapper.find('.lab-type')
-      expect(labTypeDiv.find('h4').text().trim()).toEqual('labs.lab.type')
-
-      expect(labTypeDiv.find('h5').text().trim()).toEqual(expectedLab.type)
+      expect(
+        labTypeDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.type')
+
+      expect(
+        labTypeDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.type)
     })
 
     it('should display the requested on date', async () => {
       const expectedLab = { ...mockLab, requestedOn: '2020-03-30T04:43:20.102Z' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const requestedOnDiv = wrapper.find('.requested-on')
-      expect(requestedOnDiv.find('h4').text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(requestedOnDiv.find('h5').text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
-      )
+      expect(
+        requestedOnDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.requestedOn')
+
+      expect(
+        requestedOnDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
     })
 
     it('should not display the completed date if the lab is not completed', async () => {
@@ -157,7 +185,12 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('warning')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -173,11 +206,26 @@ describe('View Labs', () => {
         ])
 
         const buttons = wrapper.find(Button)
-        expect(buttons.at(0).text().trim()).toEqual('actions.update')
-
-        expect(buttons.at(1).text().trim()).toEqual('labs.requests.complete')
-
-        expect(buttons.at(2).text().trim()).toEqual('labs.requests.cancel')
+        expect(
+          buttons
+            .at(0)
+            .text()
+            .trim(),
+        ).toEqual('actions.update')
+
+        expect(
+          buttons
+            .at(1)
+            .text()
+            .trim(),
+        ).toEqual('labs.requests.complete')
+
+        expect(
+          buttons
+            .at(2)
+            .text()
+            .trim(),
+        ).toEqual('labs.requests.cancel')
       })
     })
 
@@ -188,7 +236,12 @@ describe('View Labs', () => {
 
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('danger')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -203,11 +256,19 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const canceledOnDiv = wrapper.find('.canceled-on')
 
-        expect(canceledOnDiv.find('h4').text().trim()).toEqual('labs.lab.canceledOn')
-
-        expect(canceledOnDiv.find('h5').text().trim()).toEqual(
-          format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'),
-        )
+        expect(
+          canceledOnDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.canceledOn')
+
+        expect(
+          canceledOnDiv
+            .find('h5')
+            .text()
+            .trim(),
+        ).toEqual(format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'))
       })
 
       it('should not display update, complete, and cancel button if the lab is canceled', async () => {
@@ -239,7 +300,12 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('primary')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -254,11 +320,19 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const completedOnDiv = wrapper.find('.completed-on')
 
-        expect(completedOnDiv.find('h4').text().trim()).toEqual('labs.lab.completedOn')
-
-        expect(completedOnDiv.find('h5').text().trim()).toEqual(
-          format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'),
-        )
+        expect(
+          completedOnDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.completedOn')
+
+        expect(
+          completedOnDiv
+            .find('h5')
+            .text()
+            .trim(),
+        ).toEqual(format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'))
       })
 
       it('should not display update, complete, and cancel buttons if the lab is completed', async () => {
diff --git a/src/__tests__/labs/ViewLabs.test.tsx b/src/__tests__/labs/ViewLabs.test.tsx
index 8a3e2fb266..c963dde06d 100644
--- a/src/__tests__/labs/ViewLabs.test.tsx
+++ b/src/__tests__/labs/ViewLabs.test.tsx
@@ -132,19 +132,47 @@ describe('View Labs', () => {
       expect(table).toBeDefined()
       expect(tableHeader).toBeDefined()
       expect(tableBody).toBeDefined()
-      expect(tableColumnHeaders.at(0).text().trim()).toEqual('labs.lab.type')
-
-      expect(tableColumnHeaders.at(1).text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(tableColumnHeaders.at(2).text().trim()).toEqual('labs.lab.status')
-
-      expect(tableDataColumns.at(0).text().trim()).toEqual(expectedLab.type)
-
-      expect(tableDataColumns.at(1).text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
-      )
-
-      expect(tableDataColumns.at(2).text().trim()).toEqual(expectedLab.status)
+      expect(
+        tableColumnHeaders
+          .at(0)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.type')
+
+      expect(
+        tableColumnHeaders
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.requestedOn')
+
+      expect(
+        tableColumnHeaders
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.status')
+
+      expect(
+        tableDataColumns
+          .at(0)
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.type)
+
+      expect(
+        tableDataColumns
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
+
+      expect(
+        tableDataColumns
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.status)
     })
 
     it('should navigate to the lab when the row is clicked', () => {
diff --git a/src/patients/related-persons/AddRelatedPersonModal.tsx b/src/patients/related-persons/AddRelatedPersonModal.tsx
index 07e795543a..809c8e66e1 100644
--- a/src/patients/related-persons/AddRelatedPersonModal.tsx
+++ b/src/patients/related-persons/AddRelatedPersonModal.tsx
@@ -25,7 +25,7 @@ const AddRelatedPersonModal = (props: Props) => {
   })
   const { patient } = useSelector((state: RootState) => state.patient)
 
-  const patientCode = () => patient.code
+  const patientId = () => patient.id
 
   const onFieldChange = (key: string, value: string) => {
     setRelatedPerson({
@@ -38,8 +38,8 @@ const AddRelatedPersonModal = (props: Props) => {
     onFieldChange(fieldName, event.target.value)
   }
 
-  const onPatientSelect = (patients: Patient[]) => {
-    setRelatedPerson({ ...relatedPerson, patientId: patients[0].id })
+  const onPatientSelect = (p: Patient[]) => {
+    setRelatedPerson({ ...relatedPerson, patientId: p[0].id })
   }
 
   const body = (
@@ -55,12 +55,12 @@ const AddRelatedPersonModal = (props: Props) => {
               placeholder={t('patient.relatedPerson')}
               onChange={onPatientSelect}
               onSearch={async (query: string) => PatientRepository.search(query)}
-              renderMenuItemChildren={(patients: Patient) => {
-                if (patientCode() === patients.code) {
+              renderMenuItemChildren={(p: Patient) => {
+                if (patientId() === p.id) {
                   return <div />
                 }
 
-                return <div>{`${patients.fullName} (${patients.code})`}</div>
+                return <div>{`${p.fullName} (${p.code})`}</div>
               }}
             />
           </div>

From fd195f2953dbc5ee06a3faf6a065681b8703e5bd Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Fri, 10 Apr 2020 10:53:13 -0700
Subject: [PATCH 3/9] fix(patients): added test for patient not showing in list

---
 .../AddRelatedPersonModal.test.tsx            | 60 +++++++++++++++----
 src/hooks/debounce.ts                         |  2 +-
 2 files changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
index 19a0ae75c4..6938ba7a25 100644
--- a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
+++ b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
@@ -3,20 +3,52 @@ import React from 'react'
 import { ReactWrapper, mount } from 'enzyme'
 import { Modal, Alert, Typeahead } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
-import AddRelatedPersonModal from '../../../patients/related-persons/AddRelatedPersonModal'
+import { Provider } from 'react-redux'
+import thunk from 'redux-thunk'
+import configureMockStore, { MockStore } from 'redux-mock-store'
+import Patient from 'model/Patient'
 import TextInputWithLabelFormGroup from '../../../components/input/TextInputWithLabelFormGroup'
+import AddRelatedPersonModal from '../../../patients/related-persons/AddRelatedPersonModal'
+
+const mockStore = configureMockStore([thunk])
 
 describe('Add Related Person Modal', () => {
+  const patient = {
+    id: '123',
+    prefix: 'prefix',
+    givenName: 'givenName',
+    familyName: 'familyName',
+    suffix: 'suffix',
+    sex: 'male',
+    type: 'charity',
+    occupation: 'occupation',
+    preferredLanguage: 'preferredLanguage',
+    phoneNumber: 'phoneNumber',
+    email: 'email@email.com',
+    address: 'address',
+    code: 'P00001',
+    dateOfBirth: new Date().toISOString(),
+  } as Patient
+
+  let store: MockStore
+
   describe('layout', () => {
     let wrapper: ReactWrapper
+
+    store = mockStore({
+      patient: { patient },
+    })
     beforeEach(() => {
       wrapper = mount(
-        <AddRelatedPersonModal
-          show
-          onSave={jest.fn()}
-          onCloseButtonClick={jest.fn()}
-          toggle={jest.fn()}
-        />,
+        // ADD PROVIDER
+        <Provider store={store}>
+          <AddRelatedPersonModal
+            show
+            onSave={jest.fn()}
+            onCloseButtonClick={jest.fn()}
+            toggle={jest.fn()}
+          />
+        </Provider>,
       )
     })
 
@@ -65,12 +97,14 @@ describe('Add Related Person Modal', () => {
     beforeEach(() => {
       onSaveSpy = jest.fn()
       wrapper = mount(
-        <AddRelatedPersonModal
-          show
-          onSave={onSaveSpy}
-          onCloseButtonClick={jest.fn()}
-          toggle={jest.fn()}
-        />,
+        <Provider store={store}>
+          <AddRelatedPersonModal
+            show
+            onSave={onSaveSpy}
+            onCloseButtonClick={jest.fn()}
+            toggle={jest.fn()}
+          />
+        </Provider>,
       )
     })
 
diff --git a/src/hooks/debounce.ts b/src/hooks/debounce.ts
index 2d80517c0b..dee4954927 100644
--- a/src/hooks/debounce.ts
+++ b/src/hooks/debounce.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export default function <T>(value: T, delayInMilliseconds: number): T {
+export default function<T>(value: T, delayInMilliseconds: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value)
 
   useEffect(() => {

From 6ad726af64910fa71eedb37da59263a3a12e8478 Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Fri, 10 Apr 2020 10:59:15 -0700
Subject: [PATCH 4/9] fix(patient): removed unnecessary comment

---
 .../patients/related-persons/AddRelatedPersonModal.test.tsx      | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
index 6938ba7a25..23b5348334 100644
--- a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
+++ b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx
@@ -40,7 +40,6 @@ describe('Add Related Person Modal', () => {
     })
     beforeEach(() => {
       wrapper = mount(
-        // ADD PROVIDER
         <Provider store={store}>
           <AddRelatedPersonModal
             show

From 62dc561c6a409bb2f5917e1fe806be76b7a71ea6 Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Fri, 10 Apr 2020 15:33:52 -0700
Subject: [PATCH 5/9] Merge remote-tracking branch 'upstream/master'


From 5a8d70109d18f58624f0b74688866cbc88d3af4a Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Fri, 10 Apr 2020 15:34:27 -0700
Subject: [PATCH 6/9] Merge remote-tracking branch 'upstream/master'


From 8f49b4648d6a17f8870c88b31fc7c3cd3c767ab0 Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Thu, 23 Apr 2020 13:01:09 -0700
Subject: [PATCH 7/9] fix((labs): cleanup small issues with lab section

---
 src/__tests__/components/Sidebar.test.tsx     |  70 ++++++++--
 src/__tests__/labs/ViewLab.test.tsx           | 132 ++++++++++++++----
 src/__tests__/labs/ViewLabs.test.tsx          |  54 +++++--
 .../appointments/AppointmentsList.test.tsx    |   5 +-
 .../input/TextFieldWithLabelFormGroup.tsx     |   2 +-
 src/hooks/debounce.ts                         |   2 +-
 src/locales/enUs/translations/labs/index.ts   |   1 +
 7 files changed, 211 insertions(+), 55 deletions(-)

diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx
index 11bf2804af..afb593fb67 100644
--- a/src/__tests__/components/Sidebar.test.tsx
+++ b/src/__tests__/components/Sidebar.test.tsx
@@ -35,7 +35,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(1).text().trim()).toEqual('dashboard.label')
+      expect(
+        listItems
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('dashboard.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -66,7 +71,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(2).text().trim()).toEqual('patients.label')
+      expect(
+        listItems
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('patients.label')
     })
 
     it('should render the new_patient link', () => {
@@ -74,7 +84,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('patients.newPatient')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('patients.newPatient')
     })
 
     it('should render the patients_list link', () => {
@@ -82,7 +97,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('patients.patientsList')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('patients.patientsList')
     })
 
     it('main patients link should be active when the current path is /patients', () => {
@@ -155,7 +175,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(3).text().trim()).toEqual('scheduling.label')
+      expect(
+        listItems
+          .at(3)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.label')
     })
 
     it('should render the new appointment link', () => {
@@ -163,7 +188,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('scheduling.appointments.new')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.new')
     })
 
     it('should render the appointments schedule link', () => {
@@ -171,7 +201,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(5).text().trim()).toEqual('scheduling.appointments.schedule')
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('scheduling.appointments.schedule')
     })
 
     it('main scheduling link should be active when the current path is /appointments', () => {
@@ -244,7 +279,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(4).text().trim()).toEqual('labs.label')
+      expect(
+        listItems
+          .at(4)
+          .text()
+          .trim(),
+      ).toEqual('labs.label')
     })
 
     it('should render the new labs request link', () => {
@@ -252,7 +292,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(5).text().trim()).toEqual('labs.requests.new')
+      expect(
+        listItems
+          .at(5)
+          .text()
+          .trim(),
+      ).toEqual('labs.requests.new')
     })
 
     it('should render the labs list link', () => {
@@ -260,7 +305,12 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(listItems.at(6).text().trim()).toEqual('labs.requests.label')
+      expect(
+        listItems
+          .at(6)
+          .text()
+          .trim(),
+      ).toEqual('labs.requests.label')
     })
 
     it('main labs link should be active when the current path is /labs', () => {
diff --git a/src/__tests__/labs/ViewLab.test.tsx b/src/__tests__/labs/ViewLab.test.tsx
index 97f17faff5..2ff5363950 100644
--- a/src/__tests__/labs/ViewLab.test.tsx
+++ b/src/__tests__/labs/ViewLab.test.tsx
@@ -91,29 +91,57 @@ describe('View Labs', () => {
       const expectedLab = { ...mockLab } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const forPatientDiv = wrapper.find('.for-patient')
-      expect(forPatientDiv.find('h4').text().trim()).toEqual('labs.lab.for')
-
-      expect(forPatientDiv.find('h5').text().trim()).toEqual(mockPatient.fullName)
+      expect(
+        forPatientDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.for')
+
+      expect(
+        forPatientDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(mockPatient.fullName)
     })
 
     it('should display the lab type for type', async () => {
       const expectedLab = { ...mockLab, type: 'expected type' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const labTypeDiv = wrapper.find('.lab-type')
-      expect(labTypeDiv.find('h4').text().trim()).toEqual('labs.lab.type')
-
-      expect(labTypeDiv.find('h5').text().trim()).toEqual(expectedLab.type)
+      expect(
+        labTypeDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.type')
+
+      expect(
+        labTypeDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.type)
     })
 
     it('should display the requested on date', async () => {
       const expectedLab = { ...mockLab, requestedOn: '2020-03-30T04:43:20.102Z' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const requestedOnDiv = wrapper.find('.requested-on')
-      expect(requestedOnDiv.find('h4').text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(requestedOnDiv.find('h5').text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
-      )
+      expect(
+        requestedOnDiv
+          .find('h4')
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.requestedOn')
+
+      expect(
+        requestedOnDiv
+          .find('h5')
+          .text()
+          .trim(),
+      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
     })
 
     it('should not display the completed date if the lab is not completed', async () => {
@@ -177,7 +205,12 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('warning')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -193,11 +226,26 @@ describe('View Labs', () => {
         ])
 
         const buttons = wrapper.find(Button)
-        expect(buttons.at(0).text().trim()).toEqual('actions.update')
-
-        expect(buttons.at(1).text().trim()).toEqual('labs.requests.complete')
-
-        expect(buttons.at(2).text().trim()).toEqual('labs.requests.cancel')
+        expect(
+          buttons
+            .at(0)
+            .text()
+            .trim(),
+        ).toEqual('actions.update')
+
+        expect(
+          buttons
+            .at(1)
+            .text()
+            .trim(),
+        ).toEqual('labs.requests.complete')
+
+        expect(
+          buttons
+            .at(2)
+            .text()
+            .trim(),
+        ).toEqual('labs.requests.cancel')
       })
     })
 
@@ -208,7 +256,12 @@ describe('View Labs', () => {
 
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('danger')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -223,11 +276,19 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const canceledOnDiv = wrapper.find('.canceled-on')
 
-        expect(canceledOnDiv.find('h4').text().trim()).toEqual('labs.lab.canceledOn')
-
-        expect(canceledOnDiv.find('h5').text().trim()).toEqual(
-          format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'),
-        )
+        expect(
+          canceledOnDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.canceledOn')
+
+        expect(
+          canceledOnDiv
+            .find('h5')
+            .text()
+            .trim(),
+        ).toEqual(format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'))
       })
 
       it('should not display update, complete, and cancel button if the lab is canceled', async () => {
@@ -259,7 +320,12 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
+        expect(
+          labStatusDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('primary')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -274,11 +340,19 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const completedOnDiv = wrapper.find('.completed-on')
 
-        expect(completedOnDiv.find('h4').text().trim()).toEqual('labs.lab.completedOn')
-
-        expect(completedOnDiv.find('h5').text().trim()).toEqual(
-          format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'),
-        )
+        expect(
+          completedOnDiv
+            .find('h4')
+            .text()
+            .trim(),
+        ).toEqual('labs.lab.completedOn')
+
+        expect(
+          completedOnDiv
+            .find('h5')
+            .text()
+            .trim(),
+        ).toEqual(format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'))
       })
 
       it('should not display update, complete, and cancel buttons if the lab is completed', async () => {
diff --git a/src/__tests__/labs/ViewLabs.test.tsx b/src/__tests__/labs/ViewLabs.test.tsx
index 89c2e9f8c4..18b61f494c 100644
--- a/src/__tests__/labs/ViewLabs.test.tsx
+++ b/src/__tests__/labs/ViewLabs.test.tsx
@@ -133,19 +133,47 @@ describe('View Labs', () => {
       expect(table).toBeDefined()
       expect(tableHeader).toBeDefined()
       expect(tableBody).toBeDefined()
-      expect(tableColumnHeaders.at(0).text().trim()).toEqual('labs.lab.type')
-
-      expect(tableColumnHeaders.at(1).text().trim()).toEqual('labs.lab.requestedOn')
-
-      expect(tableColumnHeaders.at(2).text().trim()).toEqual('labs.lab.status')
-
-      expect(tableDataColumns.at(0).text().trim()).toEqual(expectedLab.type)
-
-      expect(tableDataColumns.at(1).text().trim()).toEqual(
-        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
-      )
-
-      expect(tableDataColumns.at(2).text().trim()).toEqual(expectedLab.status)
+      expect(
+        tableColumnHeaders
+          .at(0)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.type')
+
+      expect(
+        tableColumnHeaders
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.requestedOn')
+
+      expect(
+        tableColumnHeaders
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual('labs.lab.status')
+
+      expect(
+        tableDataColumns
+          .at(0)
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.type)
+
+      expect(
+        tableDataColumns
+          .at(1)
+          .text()
+          .trim(),
+      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
+
+      expect(
+        tableDataColumns
+          .at(2)
+          .text()
+          .trim(),
+      ).toEqual(expectedLab.status)
     })
 
     it('should navigate to the lab when the row is clicked', () => {
diff --git a/src/__tests__/patients/appointments/AppointmentsList.test.tsx b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
index 55697d7f1b..6a104cd727 100644
--- a/src/__tests__/patients/appointments/AppointmentsList.test.tsx
+++ b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
@@ -59,7 +59,10 @@ describe('AppointmentsList', () => {
       const wrapper = setup()
 
       act(() => {
-        wrapper.find(components.Button).at(0).prop('onClick')()
+        wrapper
+          .find(components.Button)
+          .at(0)
+          .prop('onClick')()
       })
       wrapper.update()
 
diff --git a/src/components/input/TextFieldWithLabelFormGroup.tsx b/src/components/input/TextFieldWithLabelFormGroup.tsx
index 86948b5760..6644aadb34 100644
--- a/src/components/input/TextFieldWithLabelFormGroup.tsx
+++ b/src/components/input/TextFieldWithLabelFormGroup.tsx
@@ -18,7 +18,7 @@ const TextFieldWithLabelFormGroup = (props: Props) => {
   const id = `${name}TextField`
   return (
     <div className="form-group">
-      <Label text={label} htmlFor={id} isRequired />
+      <Label text={label} htmlFor={id} />
       <TextField
         rows={4}
         value={value}
diff --git a/src/hooks/debounce.ts b/src/hooks/debounce.ts
index 2d80517c0b..dee4954927 100644
--- a/src/hooks/debounce.ts
+++ b/src/hooks/debounce.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export default function <T>(value: T, delayInMilliseconds: number): T {
+export default function<T>(value: T, delayInMilliseconds: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value)
 
   useEffect(() => {
diff --git a/src/locales/enUs/translations/labs/index.ts b/src/locales/enUs/translations/labs/index.ts
index 2f9402905b..691424c04e 100644
--- a/src/locales/enUs/translations/labs/index.ts
+++ b/src/locales/enUs/translations/labs/index.ts
@@ -23,6 +23,7 @@ export default {
       requestedOn: 'Requested On',
       completedOn: 'Completed On',
       canceledOn: 'Canceled On',
+      patient: 'Patient',
     },
   },
 }

From ac123e288b9804796b75f2b1f1aa5a24f69c6a09 Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Fri, 24 Apr 2020 14:54:51 -0700
Subject: [PATCH 8/9] fix(labs): fix linter issues

---
 src/__tests__/components/Sidebar.test.tsx     |  70 ++--------
 src/__tests__/labs/ViewLab.test.tsx           | 132 ++++--------------
 src/__tests__/labs/ViewLabs.test.tsx          |  54 ++-----
 .../appointments/AppointmentsList.test.tsx    |   5 +-
 src/hooks/debounce.ts                         |   2 +-
 5 files changed, 54 insertions(+), 209 deletions(-)

diff --git a/src/__tests__/components/Sidebar.test.tsx b/src/__tests__/components/Sidebar.test.tsx
index afb593fb67..11bf2804af 100644
--- a/src/__tests__/components/Sidebar.test.tsx
+++ b/src/__tests__/components/Sidebar.test.tsx
@@ -35,12 +35,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(1)
-          .text()
-          .trim(),
-      ).toEqual('dashboard.label')
+      expect(listItems.at(1).text().trim()).toEqual('dashboard.label')
     })
 
     it('should be active when the current path is /', () => {
@@ -71,12 +66,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(2)
-          .text()
-          .trim(),
-      ).toEqual('patients.label')
+      expect(listItems.at(2).text().trim()).toEqual('patients.label')
     })
 
     it('should render the new_patient link', () => {
@@ -84,12 +74,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(3)
-          .text()
-          .trim(),
-      ).toEqual('patients.newPatient')
+      expect(listItems.at(3).text().trim()).toEqual('patients.newPatient')
     })
 
     it('should render the patients_list link', () => {
@@ -97,12 +82,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(4)
-          .text()
-          .trim(),
-      ).toEqual('patients.patientsList')
+      expect(listItems.at(4).text().trim()).toEqual('patients.patientsList')
     })
 
     it('main patients link should be active when the current path is /patients', () => {
@@ -175,12 +155,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(3)
-          .text()
-          .trim(),
-      ).toEqual('scheduling.label')
+      expect(listItems.at(3).text().trim()).toEqual('scheduling.label')
     })
 
     it('should render the new appointment link', () => {
@@ -188,12 +163,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(4)
-          .text()
-          .trim(),
-      ).toEqual('scheduling.appointments.new')
+      expect(listItems.at(4).text().trim()).toEqual('scheduling.appointments.new')
     })
 
     it('should render the appointments schedule link', () => {
@@ -201,12 +171,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(5)
-          .text()
-          .trim(),
-      ).toEqual('scheduling.appointments.schedule')
+      expect(listItems.at(5).text().trim()).toEqual('scheduling.appointments.schedule')
     })
 
     it('main scheduling link should be active when the current path is /appointments', () => {
@@ -279,12 +244,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(4)
-          .text()
-          .trim(),
-      ).toEqual('labs.label')
+      expect(listItems.at(4).text().trim()).toEqual('labs.label')
     })
 
     it('should render the new labs request link', () => {
@@ -292,12 +252,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(5)
-          .text()
-          .trim(),
-      ).toEqual('labs.requests.new')
+      expect(listItems.at(5).text().trim()).toEqual('labs.requests.new')
     })
 
     it('should render the labs list link', () => {
@@ -305,12 +260,7 @@ describe('Sidebar', () => {
 
       const listItems = wrapper.find(ListItem)
 
-      expect(
-        listItems
-          .at(6)
-          .text()
-          .trim(),
-      ).toEqual('labs.requests.label')
+      expect(listItems.at(6).text().trim()).toEqual('labs.requests.label')
     })
 
     it('main labs link should be active when the current path is /labs', () => {
diff --git a/src/__tests__/labs/ViewLab.test.tsx b/src/__tests__/labs/ViewLab.test.tsx
index 2ff5363950..97f17faff5 100644
--- a/src/__tests__/labs/ViewLab.test.tsx
+++ b/src/__tests__/labs/ViewLab.test.tsx
@@ -91,57 +91,29 @@ describe('View Labs', () => {
       const expectedLab = { ...mockLab } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const forPatientDiv = wrapper.find('.for-patient')
-      expect(
-        forPatientDiv
-          .find('h4')
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.for')
-
-      expect(
-        forPatientDiv
-          .find('h5')
-          .text()
-          .trim(),
-      ).toEqual(mockPatient.fullName)
+      expect(forPatientDiv.find('h4').text().trim()).toEqual('labs.lab.for')
+
+      expect(forPatientDiv.find('h5').text().trim()).toEqual(mockPatient.fullName)
     })
 
     it('should display the lab type for type', async () => {
       const expectedLab = { ...mockLab, type: 'expected type' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const labTypeDiv = wrapper.find('.lab-type')
-      expect(
-        labTypeDiv
-          .find('h4')
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.type')
-
-      expect(
-        labTypeDiv
-          .find('h5')
-          .text()
-          .trim(),
-      ).toEqual(expectedLab.type)
+      expect(labTypeDiv.find('h4').text().trim()).toEqual('labs.lab.type')
+
+      expect(labTypeDiv.find('h5').text().trim()).toEqual(expectedLab.type)
     })
 
     it('should display the requested on date', async () => {
       const expectedLab = { ...mockLab, requestedOn: '2020-03-30T04:43:20.102Z' } as Lab
       const wrapper = await setup(expectedLab, [Permissions.ViewLab])
       const requestedOnDiv = wrapper.find('.requested-on')
-      expect(
-        requestedOnDiv
-          .find('h4')
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.requestedOn')
-
-      expect(
-        requestedOnDiv
-          .find('h5')
-          .text()
-          .trim(),
-      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
+      expect(requestedOnDiv.find('h4').text().trim()).toEqual('labs.lab.requestedOn')
+
+      expect(requestedOnDiv.find('h5').text().trim()).toEqual(
+        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
+      )
     })
 
     it('should not display the completed date if the lab is not completed', async () => {
@@ -205,12 +177,7 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(
-          labStatusDiv
-            .find('h4')
-            .text()
-            .trim(),
-        ).toEqual('labs.lab.status')
+        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('warning')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -226,26 +193,11 @@ describe('View Labs', () => {
         ])
 
         const buttons = wrapper.find(Button)
-        expect(
-          buttons
-            .at(0)
-            .text()
-            .trim(),
-        ).toEqual('actions.update')
-
-        expect(
-          buttons
-            .at(1)
-            .text()
-            .trim(),
-        ).toEqual('labs.requests.complete')
-
-        expect(
-          buttons
-            .at(2)
-            .text()
-            .trim(),
-        ).toEqual('labs.requests.cancel')
+        expect(buttons.at(0).text().trim()).toEqual('actions.update')
+
+        expect(buttons.at(1).text().trim()).toEqual('labs.requests.complete')
+
+        expect(buttons.at(2).text().trim()).toEqual('labs.requests.cancel')
       })
     })
 
@@ -256,12 +208,7 @@ describe('View Labs', () => {
 
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(
-          labStatusDiv
-            .find('h4')
-            .text()
-            .trim(),
-        ).toEqual('labs.lab.status')
+        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('danger')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -276,19 +223,11 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const canceledOnDiv = wrapper.find('.canceled-on')
 
-        expect(
-          canceledOnDiv
-            .find('h4')
-            .text()
-            .trim(),
-        ).toEqual('labs.lab.canceledOn')
-
-        expect(
-          canceledOnDiv
-            .find('h5')
-            .text()
-            .trim(),
-        ).toEqual(format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'))
+        expect(canceledOnDiv.find('h4').text().trim()).toEqual('labs.lab.canceledOn')
+
+        expect(canceledOnDiv.find('h5').text().trim()).toEqual(
+          format(new Date(expectedLab.canceledOn as string), 'yyyy-MM-dd hh:mm a'),
+        )
       })
 
       it('should not display update, complete, and cancel button if the lab is canceled', async () => {
@@ -320,12 +259,7 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const labStatusDiv = wrapper.find('.lab-status')
         const badge = labStatusDiv.find(Badge)
-        expect(
-          labStatusDiv
-            .find('h4')
-            .text()
-            .trim(),
-        ).toEqual('labs.lab.status')
+        expect(labStatusDiv.find('h4').text().trim()).toEqual('labs.lab.status')
 
         expect(badge.prop('color')).toEqual('primary')
         expect(badge.text().trim()).toEqual(expectedLab.status)
@@ -340,19 +274,11 @@ describe('View Labs', () => {
         const wrapper = await setup(expectedLab, [Permissions.ViewLab])
         const completedOnDiv = wrapper.find('.completed-on')
 
-        expect(
-          completedOnDiv
-            .find('h4')
-            .text()
-            .trim(),
-        ).toEqual('labs.lab.completedOn')
-
-        expect(
-          completedOnDiv
-            .find('h5')
-            .text()
-            .trim(),
-        ).toEqual(format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'))
+        expect(completedOnDiv.find('h4').text().trim()).toEqual('labs.lab.completedOn')
+
+        expect(completedOnDiv.find('h5').text().trim()).toEqual(
+          format(new Date(expectedLab.completedOn as string), 'yyyy-MM-dd hh:mm a'),
+        )
       })
 
       it('should not display update, complete, and cancel buttons if the lab is completed', async () => {
diff --git a/src/__tests__/labs/ViewLabs.test.tsx b/src/__tests__/labs/ViewLabs.test.tsx
index 18b61f494c..89c2e9f8c4 100644
--- a/src/__tests__/labs/ViewLabs.test.tsx
+++ b/src/__tests__/labs/ViewLabs.test.tsx
@@ -133,47 +133,19 @@ describe('View Labs', () => {
       expect(table).toBeDefined()
       expect(tableHeader).toBeDefined()
       expect(tableBody).toBeDefined()
-      expect(
-        tableColumnHeaders
-          .at(0)
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.type')
-
-      expect(
-        tableColumnHeaders
-          .at(1)
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.requestedOn')
-
-      expect(
-        tableColumnHeaders
-          .at(2)
-          .text()
-          .trim(),
-      ).toEqual('labs.lab.status')
-
-      expect(
-        tableDataColumns
-          .at(0)
-          .text()
-          .trim(),
-      ).toEqual(expectedLab.type)
-
-      expect(
-        tableDataColumns
-          .at(1)
-          .text()
-          .trim(),
-      ).toEqual(format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'))
-
-      expect(
-        tableDataColumns
-          .at(2)
-          .text()
-          .trim(),
-      ).toEqual(expectedLab.status)
+      expect(tableColumnHeaders.at(0).text().trim()).toEqual('labs.lab.type')
+
+      expect(tableColumnHeaders.at(1).text().trim()).toEqual('labs.lab.requestedOn')
+
+      expect(tableColumnHeaders.at(2).text().trim()).toEqual('labs.lab.status')
+
+      expect(tableDataColumns.at(0).text().trim()).toEqual(expectedLab.type)
+
+      expect(tableDataColumns.at(1).text().trim()).toEqual(
+        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
+      )
+
+      expect(tableDataColumns.at(2).text().trim()).toEqual(expectedLab.status)
     })
 
     it('should navigate to the lab when the row is clicked', () => {
diff --git a/src/__tests__/patients/appointments/AppointmentsList.test.tsx b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
index 6a104cd727..55697d7f1b 100644
--- a/src/__tests__/patients/appointments/AppointmentsList.test.tsx
+++ b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
@@ -59,10 +59,7 @@ describe('AppointmentsList', () => {
       const wrapper = setup()
 
       act(() => {
-        wrapper
-          .find(components.Button)
-          .at(0)
-          .prop('onClick')()
+        wrapper.find(components.Button).at(0).prop('onClick')()
       })
       wrapper.update()
 
diff --git a/src/hooks/debounce.ts b/src/hooks/debounce.ts
index dee4954927..2d80517c0b 100644
--- a/src/hooks/debounce.ts
+++ b/src/hooks/debounce.ts
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 
-export default function<T>(value: T, delayInMilliseconds: number): T {
+export default function <T>(value: T, delayInMilliseconds: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value)
 
   useEffect(() => {

From d50a6c2cd25acbe4190dd7f4835d372f48429dfc Mon Sep 17 00:00:00 2001
From: alti21 <altemush@gmail.com>
Date: Wed, 6 May 2020 21:23:34 -0700
Subject: [PATCH 9/9] fix(dates): datetime pickers are bigger

---
 .../patients/related-persons/RelatedPersons.test.tsx         | 5 ++---
 src/index.css                                                | 4 ++++
 src/patients/GeneralInformation.tsx                          | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/__tests__/patients/related-persons/RelatedPersons.test.tsx b/src/__tests__/patients/related-persons/RelatedPersons.test.tsx
index ba8112caef..49da165c9c 100644
--- a/src/__tests__/patients/related-persons/RelatedPersons.test.tsx
+++ b/src/__tests__/patients/related-persons/RelatedPersons.test.tsx
@@ -14,7 +14,6 @@ import thunk from 'redux-thunk'
 import { Provider } from 'react-redux'
 import Permissions from 'model/Permissions'
 import RelatedPerson from 'model/RelatedPerson'
-import { Button } from '@hospitalrun/components'
 import * as patientSlice from '../../../patients/patient-slice'
 
 const mockStore = configureMockStore([thunk])
@@ -137,7 +136,7 @@ describe('Related Persons Tab', () => {
       const tableHeaders = wrapper.find('th')
       const tableBody = wrapper.find('tbody')
       const tableData = wrapper.find('td')
-      const deleteButton = tableData.at(3).find(Button)
+      const deleteButton = tableData.at(3).find(components.Button)
       expect(table).toHaveLength(1)
       expect(tableHeader).toHaveLength(1)
       expect(tableBody).toHaveLength(1)
@@ -160,7 +159,7 @@ describe('Related Persons Tab', () => {
       const table = wrapper.find('table')
       const tableBody = table.find('tbody')
       const tableData = tableBody.find('td')
-      const deleteButton = tableData.at(3).find(Button)
+      const deleteButton = tableData.at(3).find(components.Button)
 
       await act(async () => {
         const onClick = deleteButton.prop('onClick')
diff --git a/src/index.css b/src/index.css
index a11f30cfa9..6cd0084c92 100644
--- a/src/index.css
+++ b/src/index.css
@@ -96,4 +96,8 @@ code {
 
 .button-toolbar > button {
 	margin-left: .5rem;
+}
+
+.react-datepicker-wrapper {
+  flex-grow: 1;
 }
\ No newline at end of file
diff --git a/src/patients/GeneralInformation.tsx b/src/patients/GeneralInformation.tsx
index 231b9832ef..7bacc3b068 100644
--- a/src/patients/GeneralInformation.tsx
+++ b/src/patients/GeneralInformation.tsx
@@ -134,7 +134,7 @@ const GeneralInformation = (props: Props) => {
           </div>
         </div>
         <div className="row">
-          <div className="col-md-4">
+          <div className="col">
             {patient.isApproximateDateOfBirth ? (
               <TextInputWithLabelFormGroup
                 label={t('patient.approximateAge')}
@@ -163,7 +163,7 @@ const GeneralInformation = (props: Props) => {
               />
             )}
           </div>
-          <div className="col-md-2">
+          <div className="col">
             <div className="form-group">
               <Checkbox
                 label={t('patient.unknownDateOfBirth')}