fhir-react 0.3.12 → 1.0.0

package/src/components/resources/Immunization/Immunization.js

@@ -11,6 +11,7 @@ import _get from 'lodash/get';
 import _has from 'lodash/has';
 import fhirVersions from '../fhirResourceVersions';
 import { Value } from '../../ui';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
 const commonDTO = fhirResource => {
   const title =
@@ -228,6 +229,11 @@ const Immunization = ({
     },
   ];
 
+  const immunizationDatesPaths = ['occurrenceDateTime'];
+
+  const headerDate =
+    getResourceDate(fhirResource, immunizationDatesPaths) || providedDate;
+
   return (
     <Root name="Immunization">
       <Accordion
@@ -235,9 +241,9 @@ const Immunization = ({
           <Header
             resourceName="Immunization"
             additionalContent={
-              providedDate && (
+              headerDate && (
                 <Value label="Start date" data-testid="headerStartDate">
-                  <Date fhirData={providedDate} isBlack />
+                  <Date fhirData={headerDate} isBlack />
                 </Value>
               )
             }

package/src/components/resources/MedicationAdministration/MedicationAdministration.test.js

@@ -111,9 +111,9 @@ describe('should render MedicationAdministration component properly', () => {
       'Practitioner/example',
     );
 
-    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('01/15/2015');
 
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('01/15/2015');
 
     expect(getByTestId('dosageRoute').textContent).toContain(
       'Intravenous route',
@@ -139,7 +139,7 @@ describe('should render MedicationAdministration component properly', () => {
 
     expect(getByTestId('practitioner').textContent).toContain('Patrick Pump');
 
-    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('01/15/2015');
 
     expect(getByTestId('periodTimeEnd').textContent).toEqual('-');
 
@@ -164,8 +164,8 @@ describe('should render MedicationAdministration component properly', () => {
     expect(getByTestId('status').textContent).toContain('on-hold');
     expect(getByTestId('patient').textContent).toContain('Donald Duck');
     expect(queryByTestId('practitioner')).toBeNull();
-    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('01/15/2015');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('01/15/2015');
     expect(getByTestId('dosageRoute').textContent).toContain('-');
     expect(getByTestId('dosageQuantity').textContent).toEqual('-');
   });
@@ -184,8 +184,8 @@ describe('should render MedicationAdministration component properly', () => {
     expect(getByTestId('status').textContent).toContain('completed');
     expect(getByTestId('patient').textContent).toContain('Donald Duck');
     expect(getByTestId('practitioner').textContent).toContain('Patrick Pump');
-    expect(getByTestId('periodTimeStart').textContent).toEqual('1/15/2015');
-    expect(getByTestId('periodTimeEnd').textContent).toEqual('1/15/2015');
+    expect(getByTestId('periodTimeStart').textContent).toEqual('01/15/2015');
+    expect(getByTestId('periodTimeEnd').textContent).toEqual('01/15/2015');
     expect(getByTestId('dosageRoute').textContent).toContain('Oral Route');
     expect(getByTestId('dosageQuantity').textContent).toEqual('2 TAB');
   });

package/src/components/resources/MedicationDispense/MedicationDispense.test.js

@@ -93,7 +93,7 @@ describe('should render Device component properly', () => {
 
     expect(getByTestId('title').textContent).toEqual('prescribed medication');
     expect(getByTestId('typeCoding').textContent).toContain('Part Fill');
-    expect(getByTestId('whenPrepared').textContent).toContain('3/1/2015');
+    expect(getByTestId('whenPrepared').textContent).toContain('03/01/2015');
     expect(getByTestId('hasDosageInstruction').textContent).toContain(
       'or after food',
     );
@@ -132,7 +132,7 @@ describe('should render Device component properly', () => {
     expect(container).not.toBeNull();
 
     expect(getByTestId('title').textContent).toContain('Novolog 100u/ml');
-    expect(getByTestId('whenPrepared').textContent).toEqual('1/15/2015');
+    expect(getByTestId('whenPrepared').textContent).toEqual('01/15/2015');
     expect(
       within(getByTestId('hasDosageInstruction'))
         .queryAllByTestId('dosageTiming')

package/src/components/resources/MedicationRequest/MedicationRequest.test.js

@@ -95,7 +95,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take one tablet',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('3/1/2015');
+    expect(getByTestId('created').textContent).toEqual('03/01/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
   it('should render with STU3 source data in which medicationReference key does not exist', () => {
@@ -126,7 +126,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take one tablet',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('3/1/2015');
+    expect(getByTestId('created').textContent).toEqual('03/01/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 
@@ -146,7 +146,7 @@ describe('should render MedicationRequest component properly', () => {
       'Take 4 tablets daily',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('1/15/2015');
+    expect(getByTestId('created').textContent).toEqual('01/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 
@@ -168,7 +168,7 @@ describe('should render MedicationRequest component properly', () => {
       '6 mg PO daily for remission',
     );
     expect(getByTestId('requester').textContent).toContain('Patrick Pump');
-    expect(getByTestId('created').textContent).toEqual('1/15/2015');
+    expect(getByTestId('created').textContent).toEqual('01/15/2015');
     expect(getByTestId('intent').textContent).toEqual('order');
   });
 

package/src/components/resources/Observation/Observation.js

@@ -17,6 +17,8 @@ import {
   Value,
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
+import { getResourceDate } from '../../../utils/getResourceDate';
+import Annotation from "../../datatypes/Annotation";
 
 const Observation = ({
   fhirResource,
@@ -29,7 +31,7 @@ const Observation = ({
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
   const valueQuantityValue = _get(fhirResource, 'valueQuantity.value', '');
-  const issued = _get(fhirResource, 'issued', '');
+  // const issued = _get(fhirResource, 'issued', '');
   const valueQuantityUnit = _get(fhirResource, 'valueQuantity.unit', '');
   const status = _get(fhirResource, 'status', '');
   const valueCodeableConceptText = _get(
@@ -49,6 +51,9 @@ const Observation = ({
   let valueQuantityValueNumber = valueQuantityValue;
 
   const subject = _get(fhirResource, 'subject');
+  const note = _get(fhirResource, 'note');
+  const hasNote = Array.isArray(note);
+
   const tableData = [
     {
       label: 'Issued on',
@@ -70,8 +75,25 @@ const Observation = ({
       )),
       status: !_isEmpty(valueCodeableConceptCoding),
     },
+    {
+      label: 'Notes',
+      testId: 'hasNote',
+      data: hasNote && <Annotation fhirData={note} />,
+      status: hasNote,
+    },
   ];
 
+  const observationDatesPaths = [
+    'effectiveDateTime',
+    'effectivePeriod.start',
+    'effectiveDateTime',
+    'issued',
+    'valuePeriod.start',
+    'valueDateTime',
+  ];
+
+  const headerDate = getResourceDate(fhirResource, observationDatesPaths);
+
   return (
     <Root name="Observation">
       <Accordion
@@ -79,9 +101,9 @@ const Observation = ({
           <Header
             resourceName="Observation"
             additionalContent={
-              issued && (
+              headerDate && (
                 <Value label="Start date" data-testid="headerStartDate">
-                  <Date fhirData={issued} isBlack />
+                  <Date fhirData={headerDate} isBlack />
                 </Value>
               )
             }

package/src/components/resources/Observation/Observation.test.js

@@ -129,9 +129,10 @@ describe('should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('final');
     expect(getByTestId('secondaryStatus').textContent).toEqual('YES');
-    expect(getByTestId('issuedOn').textContent).toEqual('5/18/2016');
+    expect(getByTestId('issuedOn').textContent).toEqual('05/18/2016');
     expect(getByTestId('subject').textContent).toContain('Patient/infant');
     expect(queryByText(/373066001/g)).not.toBeNull();
+    expect(getByTestId('hasNote').textContent).toContain('Was exposed to second-hand smoke.');
   });
 
   test('should display not rounded value', () => {

package/src/components/resources/Patient/Patient.js

@@ -132,7 +132,7 @@ function Patient(props) {
                     {patientGender || 'unknown'}
                   </span>
                   {', '}
-                  <span data-testid="patientBirthDate">{patientBirthDate}</span>
+                  <Date testId="patientBirthDate" fhirData={patientBirthDate} />
                 </span>
               )
             }

package/src/components/resources/Patient/Patient.test.js

@@ -88,7 +88,7 @@ describe('should render component correctly', () => {
       'Jason Argonaut (usual)',
     );
     expect(getByTestId('patientGender').textContent).toEqual('male');
-    expect(getByTestId('patientBirthDate').textContent).toEqual('1985-08-01');
+    expect(getByTestId('patientBirthDate').textContent).toEqual('08/01/1985');
     expect(getByTestId('patientAddress').textContent).toEqual(
       '1979 Milky Way Dr.Verona, WI 53593 US',
     );
@@ -99,7 +99,7 @@ describe('should render component correctly', () => {
     expect(queryByTestId('deceasedInfo')).toBeNull();
   });
 
-  test('DSTU3', () => {
+  test('STU3', () => {
     const defaultProps = {
       fhirResource: examplePatientSTU3,
     };
@@ -111,14 +111,14 @@ describe('should render component correctly', () => {
       'John, X Doe (usual)',
     );
     expect(getByTestId('patientGender').textContent).toEqual('male');
-    expect(getByTestId('patientBirthDate').textContent).toEqual('2014-06-01');
+    expect(getByTestId('patientBirthDate').textContent).toEqual('06/01/2014');
     expect(getByTestId('patientAddress').textContent).toEqual(' 05 99999 ');
     expect(getByTestId('patientPhones').textContent).toEqual('-');
     expect(queryByTestId('activeStatus')).toBeNull();
     expect(queryByTestId('deceasedInfo')).toBeNull();
   });
 
-  test('DSTU3 resource which contains communication key data', () => {
+  test('STU3 resource which contains communication key data', () => {
     const defaultProps = {
       fhirResource: example2PatientSTU3,
     };
@@ -138,7 +138,7 @@ describe('should render component correctly', () => {
       'Peter, James Chalmers (official)',
     );
     expect(getByTestId('patientGender').textContent).toEqual('male');
-    expect(getByTestId('patientBirthDate').textContent).toEqual('1974-12-25');
+    expect(getByTestId('patientBirthDate').textContent).toEqual('12/25/1974');
     expect(getByTestId('patientAddress').textContent).toContain(
       'PleasantVille, Vic 3999',
     );
@@ -154,7 +154,7 @@ describe('should render component correctly', () => {
       fhirResource: example3PatientR4,
     };
     const { getByTestId } = render(<Patient {...defaultProps} />);
-    expect(getByTestId('deceasedInfo').textContent).toEqual('2/14/2015');
+    expect(getByTestId('deceasedInfo').textContent).toEqual('02/14/2015');
   });
 
   it('should fire custom onClick function', () => {

package/src/components/resources/Procedure/Procedure.test.js

@@ -131,7 +131,7 @@ describe('Procedure should render component correctly', () => {
       'Insertion of intracardiac pacemaker (procedure)',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('providedDate').textContent).toEqual('4/5/2015');
+    expect(getByTestId('providedDate').textContent).toEqual('04/05/2015');
     expect(getByTestId('hasCoding').textContent).toContain(
       'Insertion of intracardiac',
     );

package/src/components/resources/QuestionnaireResponse/QuestionnaireResponse.test.js

@@ -23,7 +23,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
+    expect(getByTestId('dateTime').textContent).toEqual('06/18/2013');
     expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
@@ -34,7 +34,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'What is your gender?Male ',
     );
     expect(getByTestId('linkId-2.2').textContent).toEqual(
-      'What is your date of birth?3/13/1960 ',
+      'What is your date of birth?03/13/1960 ',
     );
     expect(getByTestId('linkId-2.3').textContent).toEqual(
       'What is your country of birth?The Netherlands ',
@@ -72,7 +72,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('2/19/2013');
+    expect(getByTestId('dateTime').textContent).toEqual('02/19/2013');
 
     expect(getByTestId('answer-nameOfChild-0').textContent).toContain(
       'Cathy Jones',
@@ -90,7 +90,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Questionnaire Response',
     );
     expect(getByTestId('status').textContent).toEqual('completed');
-    expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
+    expect(getByTestId('dateTime').textContent).toEqual('06/18/2013');
     expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 

package/src/components/resources/ResearchStudy/ResearchStudy.test.js

@@ -120,7 +120,7 @@ describe('should render ResearchStudy component properly', () => {
 
     expect(title).toEqual('Example study');
     expect(status).toEqual('completed');
-    expect(period).toEqual('2/1/2015 - 2/21/2015');
+    expect(period).toEqual('02/01/2015 - 02/21/2015');
     expect(category).toEqual('Gene expression (GENE)');
     expect(focus).toEqual('Prostate cancer (PRC)');
     expect(protocol).toEqual('PlanDefinition/pdf1');

package/src/components/ui/index.js

@@ -17,6 +17,7 @@ export const Header = ({
   children,
   capitalize = false,
   isNoIcon = false,
+  rawButton,
 }) => {
   const rightItemsClass = 'align-items-center flex-fill d-flex';
 
@@ -66,7 +67,7 @@ export const Header = ({
               </div>
             )}
           </div>
-          {(additionalContent || rightAdditionalContent) && (
+          {additionalContent || rightAdditionalContent ? (
             <div
               className={`fhir-ui__${resourceName}-Header__additional-content w-100 justify-content-start d-flex ${
                 additionalContent ? ' pt-2' : ''
@@ -77,8 +78,11 @@ export const Header = ({
                 className={`fhir-ui__${resourceName}-Header__rightAdditionalContent justify-content-md-end mx-0 ${rightItemsClass}`}
               >
                 {rightAdditionalContent}
+                {rawButton}
               </div>
             </div>
+          ) : (
+            <div className="d-flex justify-content-end">{rawButton}</div>
           )}
         </div>
       )}

package/src/fixtures/r4/resources/observation/example3.json

@@ -46,5 +46,10 @@
       }
     ],
     "text": "YES"
-  }
+  },
+  "note": [
+    {
+      "text": "Was exposed to second-hand smoke."
+    }
+  ]
 }

package/src/utils/formatDate.js

@@ -18,6 +18,9 @@ const whichOptions = date => {
     };
   }
   return {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
     timeZone: 'UTC',
   };
 };

package/src/utils/formatDate.test.js

@@ -13,10 +13,10 @@ describe('Date format function', () => {
   });
   it('should return US date format', () => {
     const date = '2021-03-14';
-    expect(formatDate(date, locale)).toEqual('3/14/2021');
+    expect(formatDate(date, locale)).toEqual('03/14/2021');
   });
   it('should return US date format given full timestamp', () => {
     const date = '2021-03-14T13:28:17-05:00';
-    expect(formatDate(date, locale)).toEqual('3/14/2021');
+    expect(formatDate(date, locale)).toEqual('03/14/2021');
   });
 });

package/src/utils/getResourceDate.js

@@ -0,0 +1,9 @@
+import _get from 'lodash/get';
+
+export const getResourceDate = (resource, paths) => {
+  return paths?.reduce((acc, path) => {
+    const dataTemp = _get(resource, path);
+    if (dataTemp && !acc) acc = dataTemp;
+    return acc;
+  }, null);
+};