fhir-react 0.3.10 → 0.3.13

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/MedicationStatement/MedicationStatement.js

@@ -113,6 +113,7 @@ const MedicationStatement = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -207,6 +208,7 @@ const MedicationStatement = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -17,13 +17,20 @@ import {
   Value,
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
+import { getResourceDate } from '../../../utils/getResourceDate';
 
-const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Observation = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   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(
@@ -66,6 +73,17 @@ const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
     },
   ];
 
+  const observationDatesPaths = [
+    'effectiveDateTime',
+    'effectivePeriod.start',
+    'effectiveDateTime',
+    'issued',
+    'valuePeriod.start',
+    'valueDateTime',
+  ];
+
+  const headerDate = getResourceDate(fhirResource, observationDatesPaths);
+
   return (
     <Root name="Observation">
       <Accordion
@@ -73,9 +91,9 @@ const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
           <Header
             resourceName="Observation"
             additionalContent={
-              issued && (
+              headerDate && (
                 <Value label="Start date" data-testid="headerStartDate">
-                  <Date fhirData={issued} isBlack />
+                  <Date fhirData={headerDate} isBlack />
                 </Value>
               )
             }
@@ -116,6 +134,7 @@ const Observation = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -129,7 +129,7 @@ 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();
   });

package/src/components/resources/Organization/Organization.js

@@ -61,6 +61,7 @@ const Organization = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -135,6 +136,7 @@ const Organization = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -48,6 +48,7 @@ function Patient(props) {
     fhirIcons,
     onClick,
     rawOnClick,
+    customId,
   } = props;
 
   const id = getId(fhirResource);
@@ -131,7 +132,7 @@ function Patient(props) {
                     {patientGender || 'unknown'}
                   </span>
                   {', '}
-                  <span data-testid="patientBirthDate">{patientBirthDate}</span>
+                  <Date testId="patientBirthDate" fhirData={patientBirthDate} />
                 </span>
               )
             }
@@ -150,6 +151,7 @@ function Patient(props) {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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/Practitioner/Practitioner.js

@@ -38,12 +38,14 @@ const commonDTO = fhirResource => {
     birthDate,
   };
 };
+
 const dstu2DTO = fhirResource => {
   const name = _get(fhirResource, 'name');
   return {
     name,
   };
 };
+
 const stu3DTO = fhirResource => {
   const name = _get(fhirResource, 'name.0');
   const address = _get(fhirResource, 'address.0');
@@ -88,6 +90,7 @@ const Practitioner = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -168,6 +171,7 @@ const Practitioner = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/PractitionerRole/PractitionerRole.js

@@ -49,6 +49,7 @@ const PractitionerRole = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -108,6 +109,7 @@ const PractitionerRole = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/PractitionerRole/PractitionerRole.stories.js

@@ -16,7 +16,7 @@ import fhirIcons from '../../../fixtures/example-icons';
 import PractitionerRoleIcon from '../../../assets/containers/PractitionerRole/practitioner-role.svg';
 
 export default {
-  title: 'PractitionerRole',
+  title: 'Practitioner/PractitionerRole',
   component: PractitionerRole,
   argTypes: {
     ...defaultArgTypes,

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

@@ -14,7 +14,13 @@ import _has from 'lodash/has';
 import { isNotEmptyArray } from '../../../utils';
 import { Value } from '../../ui';
 
-const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
+const Procedure = ({
+  fhirResource,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+  customId,
+}) => {
   const display =
     _get(fhirResource, 'code.coding[0].display') ||
     _get(fhirResource, 'code.text');
@@ -126,6 +132,7 @@ const Procedure = ({ fhirResource, fhirIcons, onClick, rawOnClick }) => {
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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/Questionnaire/Questionnaire.js

@@ -81,6 +81,7 @@ const Questionnaire = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
 
@@ -121,6 +122,7 @@ const Questionnaire = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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

@@ -77,6 +77,7 @@ const QuestionnaireResponse = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
 
@@ -141,6 +142,7 @@ const QuestionnaireResponse = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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/ReferralRequest/ReferralRequest.js

@@ -76,6 +76,7 @@ const ReferralRequest = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -157,6 +158,7 @@ const ReferralRequest = ({
         }
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/RelatedPerson/RelatedPerson.js

@@ -73,6 +73,7 @@ const RelatedPerson = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -146,6 +147,7 @@ const RelatedPerson = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

package/src/components/resources/RelatedPerson/RelatedPerson.stories.js

@@ -11,7 +11,7 @@ import exampleR4 from '../../../fixtures/r4/resources/relatedPerson/example1.jso
 import fhirIcons from '../../../fixtures/example-icons';
 
 export default {
-  title: 'RelatedPerson',
+  title: 'Coverage/RelatedPerson',
   component: RelatedPerson,
   argTypes: {
     ...defaultArgTypes,

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

@@ -100,6 +100,7 @@ const ResearchStudy = ({
   fhirIcons,
   onClick,
   rawOnClick,
+  customId,
 }) => {
   let fhirResourceData = {};
   try {
@@ -296,6 +297,7 @@ const ResearchStudy = ({
         bodyContent={<Body tableData={tableData} />}
         onClick={onClick}
         rawOnClick={rawOnClick}
+        customId={customId}
       />
     </Root>
   );

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/supportedFhirResourceList.js

@@ -36,6 +36,7 @@ import MedicationAdministration from './resources/MedicationAdministration';
 import Questionnaire from './resources/Questionnaire';
 import QuestionnaireResponse from './resources/QuestionnaireResponse';
 import ReferralRequest from './resources/ReferralRequest';
+import RelatedPerson from './resources/RelatedPerson';
 import ResearchStudy from './resources/ResearchStudy';
 import ResourceCategory from './resources/ResourceCategory';
 
@@ -78,6 +79,7 @@ export {
   Questionnaire,
   QuestionnaireResponse,
   ReferralRequest,
+  RelatedPerson,
   ResearchStudy,
   ResourceCategory,
 };

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/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);
+};