npm - fhir-react - Versions diffs - 0.3.1 → 0.3.5 - Mend

fhir-react 0.3.1 → 0.3.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (83) hide show

package/src/components/resources/MedicationRequest/MedicationRequest.js CHANGED Viewed

@@ -1,15 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
+import Accordion from '../../containers/Accordion/Accordion';
 import Reference from '../../datatypes/Reference';
 import CodeableConcept from '../../datatypes/CodeableConcept';
 import Coding from '../../datatypes/Coding';
 import Date from '../../datatypes/Date';
-import { Root, Header, Title, Body, Value } from '../../ui';
+import { Root, Header, Body } from '../../ui';
 const MedicationRequest = props => {
-  const { fhirResource } = props;
+  const { fhirResource, fhirIcons } = props;
+  const headerIcon = fhirIcons && fhirIcons['Medication'];
   const medicationReference = _get(fhirResource, 'medicationReference');
   const medicationCodeableConcept = _get(
     fhirResource,
@@ -25,49 +27,69 @@ const MedicationRequest = props => {
     _get(fhirResource, 'requester.agent') || _get(fhirResource, 'requester');
   const created = _get(fhirResource, 'authoredOn');
   const intent = _get(fhirResource, 'intent');
+  const tableData = [
+    {
+      label: 'Medication',
+      testId: 'medication',
+      data: showMedicationCodeableConcept && (
+        <Coding fhirData={medicationCodeableConcept} />
+      ),
+      status: showMedicationCodeableConcept,
+    },
+    {
+      label: 'Requester',
+      testId: 'requester',
+      data: requester && <Reference fhirData={requester} />,
+      status: requester,
+    },
+    {
+      label: 'Created',
+      testId: 'created',
+      data: created && <Date fhirData={created} />,
+      status: created,
+    },
+    {
+      label: 'Type of request',
+      testId: 'intent',
+      data: intent,
+      status: intent,
+    },
+    {
+      label: 'Reason',
+      testId: 'reasonCode',
+      data: reasonCode && <CodeableConcept fhirData={reasonCode} />,
+      status: reasonCode,
+    },
+    {
+      label: 'Dosage',
+      testId: 'hasDosageInstruction',
+      data:
+        hasDosageInstruction &&
+        dosageInstruction.map((item, i) => (
+          <p key={`dosage-instruction-item-${i}`}>{item.text}</p>
+        )),
+      status: hasDosageInstruction,
+    },
+  ];
   return (
     <Root name="MedicationRequest">
-      <Header>
-        <Title>
-          {medicationReference && <Reference fhirData={medicationReference} />}
-        </Title>
-      </Header>
-      <Body>
-        {showMedicationCodeableConcept && (
-          <Value label="Medication" data-testid="medication">
-            <Coding fhirData={medicationCodeableConcept} />
-          </Value>
-        )}
-        {requester && (
-          <Value label="Requester" data-testid="requester">
-            <Reference fhirData={requester} />
-          </Value>
-        )}
-        {created && (
-          <Value label="Created" data-testid="created">
-            <Date fhirData={created} />
-          </Value>
-        )}
-        {intent && (
-          <Value label="Type of request" data-testid="intent">
-            {intent}
-          </Value>
-        )}
-        {reasonCode && (
-          <Value label="Reason" data-testid="reasonCode">
-            <CodeableConcept fhirData={reasonCode} />
-          </Value>
-        )}
-        {hasDosageInstruction && (
-          <Value label="Dosage" data-testid="hasDosageInstruction">
-            <ul>
-              {dosageInstruction.map((item, i) => (
-                <li key={`item-${i}`}>{item.text}</li>
-              ))}
-            </ul>
-          </Value>
-        )}
-      </Body>
+      <Accordion
+        headerContent={
+          <Header
+            icon={headerIcon}
+            resourceName="MedicationRequest"
+            title={
+              medicationReference ? (
+                <Reference fhirData={medicationReference} />
+              ) : (
+                'Medication request'
+              )
+            }
+          />
+        }
+        bodyContent={<Body tableData={tableData} />}
+      />
     </Root>
   );
 };

package/src/components/resources/MedicationRequest/MedicationRequest.stories.js CHANGED Viewed

@@ -8,6 +8,7 @@ import stu3Example2 from '../../../fixtures/stu3/resources/medicationRequest/exa
 import R4Example1 from '../../../fixtures/r4/resources/medicationRequest/example1.json';
 import R4Example2 from '../../../fixtures/r4/resources/medicationRequest/example2.json';
 import R4Example3 from '../../../fixtures/r4/resources/medicationRequest/example3.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'MedicationRequest',
@@ -15,25 +16,35 @@ export default {
 export const DefaultVisualizationSTU3 = () => {
   const fhirResource = object('Resource', stu3Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 export const Example2OfSTU3 = () => {
   const fhirResource = object('Resource', stu3Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 export const Example1OfR4 = () => {
   const fhirResource = object('Resource', R4Example1);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 export const Example2OfR4 = () => {
   const fhirResource = object('Resource', R4Example2);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };
 export const Example3OfR4 = () => {
   const fhirResource = object('Resource', R4Example3);
-  return <MedicationRequest fhirResource={fhirResource} />;
+  return (
+    <MedicationRequest fhirResource={fhirResource} fhirIcons={fhirIcons} />
+  );
 };

package/src/components/resources/MedicationStatement/MedicationDetails.js ADDED Viewed

@@ -0,0 +1,52 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import Reference from '../../datatypes/Reference';
+import _get from 'lodash/get';
+const MedicationDetails = props => {
+  const {
+    medication,
+    expiration,
+    ingredient,
+    medicationReference,
+    hasReasonCode,
+    reasonCode,
+  } = props;
+  return (
+    <ValueSection label={medication} marginBottom>
+      <ValueSectionItem label="Expiration date" data-testid="expirationDate">
+        {expiration}
+      </ValueSectionItem>
+      {ingredient && (
+        <ValueSectionItem label="Ingredient" data-testid="ingredient">
+          {ingredient.map((item, i) => (
+            <div key={`item-${i}`} data-testid="ingredient-item">
+              {_get(item, 'itemCodeableConcept.coding.0.display', '')}
+            </div>
+          ))}
+        </ValueSectionItem>
+      )}
+      {medicationReference && (
+        <ValueSectionItem
+          label="Medication reference"
+          data-testid="medicationReference"
+        >
+          {<Reference fhirData={medicationReference} />}
+        </ValueSectionItem>
+      )}
+      {hasReasonCode && (
+        <ValueSectionItem label="Reasons" data-testid="hasReasonCode">
+          {reasonCode.map((item, i) => {
+            const display = _get(item, 'coding.0.display');
+            if (display) {
+              return <div key={`item-${i}`}>{display}</div>;
+            }
+            return null;
+          })}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+export default MedicationDetails;

package/src/components/resources/MedicationStatement/MedicationDosage.js ADDED Viewed

@@ -0,0 +1,46 @@
+import { ValueSection, ValueSectionItem } from '../../ui';
+import React from 'react';
+import _get from 'lodash/get';
+const MedicationDosage = props => {
+  const { dosage, hasNote, note, key } = props;
+  const instructions = _get(dosage, 'text');
+  const additionalInstructionText = _get(
+    dosage,
+    'additionalInstruction[0].text',
+  );
+  const route =
+    _get(dosage, 'route.coding[0].display') ||
+    `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
+  const hasRoute = route.trim() !== '';
+  return (
+    <ValueSection label="Dosage" key={key}>
+      <ValueSectionItem label="Instructions" data-testid="dosageInstruction">
+        {instructions}
+      </ValueSectionItem>
+      {additionalInstructionText && (
+        <ValueSectionItem
+          label="Additional instruction"
+          data-testid="additionalInstruction"
+        >
+          {additionalInstructionText}
+        </ValueSectionItem>
+      )}
+      {hasRoute && (
+        <ValueSectionItem label="Route" data-testid="route">
+          {route}
+        </ValueSectionItem>
+      )}
+      {hasNote && (
+        <ValueSectionItem label="Notes" data-testid="hasNote">
+          {note.map((item, i) => (
+            <div key={`note-${i}`}>{item.text}</div>
+          ))}
+        </ValueSectionItem>
+      )}
+    </ValueSection>
+  );
+};
+export default MedicationDosage;

package/src/components/resources/MedicationStatement/MedicationStatement.js CHANGED Viewed

@@ -3,42 +3,13 @@ import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import _has from 'lodash/has';
-import Date from '../../datatypes/Date';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
 import fhirVersions from '../fhirResourceVersions';
-import Annotation from '../../datatypes/Annotation';
-import Reference from '../../datatypes/Reference';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-  ValueSection,
-} from '../../ui';
-const MedicationDetails = props => {
-  const { medication, expiration, ingredient } = props;
-  return (
-    <div>
-      <h5>{medication} </h5>
-      <Value label="Expiration date">{expiration}</Value>
-      {ingredient && (
-        <Value label="Ingredient">
-          <ul>
-            {ingredient.map((item, i) => (
-              <li key={`item-${i}`}>
-                {_get(item, 'itemCodeableConcept.coding.0.display', '')}
-              </li>
-            ))}
-          </ul>
-        </Value>
-      )}
-    </div>
-  );
-};
+import Accordion from '../../containers/Accordion';
+import DatePeriod from '../../datatypes/DatePeriod/DatePeriod';
+import MedicationDetails from './MedicationDetails';
+import { Root, Header, Badge, Body } from '../../ui';
+import MedicationDosage from './MedicationDosage';
 const DEFAULT_TITLE = 'Medication Statement';
@@ -137,7 +108,7 @@ const resourceDTO = (fhirVersion, fhirResource) => {
 };
 const MedicationStatement = props => {
-  const { fhirResource, fhirVersion } = props;
+  const { fhirResource, fhirVersion, fhirIcons } = props;
   let fhirResourceData = {};
   try {
     fhirResourceData = resourceDTO(fhirVersion, fhirResource);
@@ -165,94 +136,70 @@ const MedicationStatement = props => {
   return (
     <Root name="MedicationStatement">
-      <Header>
-        <Title>{title}</Title>
-        {status && <Badge data-testid="hasStatus">{status}</Badge>}
-        {hasEffectivePeriod && (
-          <BadgeSecondary data-testid="hasEffectivePeriod">
-            from <Date fhirData={statusDesc.from} /> {'to '}
-            <Date fhirData={statusDesc.to} />
-            <span>{reported}</span>
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {hasMedications && (
-          <Value label="Medications">
-            {contained.map((medication, i) => {
-              const hasMedicationDetails = _has(
-                medication,
-                'code.coding[0].display',
-              );
-              if (hasMedicationDetails) {
-                return (
-                  <MedicationDetails
-                    key={`item-${i}`}
-                    medication={_get(medication, 'code.coding[0].display')}
-                    expiration={_get(
-                      medication,
-                      'package.batch[0].expirationDate',
-                    )}
-                    ingredient={_get(medication, 'ingredient', [])}
+      <Accordion
+        headerContent={
+          <Header
+            icon={fhirIcons}
+            resourceName="MedicationStatement"
+            badges={status && <Badge data-testid="hasStatus">{status}</Badge>}
+            title={title}
+            additionalContent={
+              hasEffectivePeriod && (
+                <>
+                  <DatePeriod
+                    periodBeginLabel="Start date"
+                    periodBeginDate={statusDesc.from}
+                    periodBeginTestId="startDate"
+                    periodEndLabel="End date"
+                    periodEndDate={statusDesc.to}
+                    periodEndTestId="endDate"
                   />
+                  <span>{reported}</span>
+                </>
+              )
+            }
+          />
+        }
+        bodyContent={
+          <Body>
+            {hasMedications &&
+              contained.map((medication, i) => {
+                const hasMedicationDetails = _has(
+                  medication,
+                  'code.coding[0].display',
                 );
-              }
-              return null;
-            })}
-          </Value>
-        )}
-        {medicationReference && (
-          <Value label="Medication Reference" data-testid="medicationReference">
-            <Reference fhirData={medicationReference} />
-          </Value>
-        )}
-        {hasReasonCode && (
-          <Value label="Reason" data-testid="hasReasonCode">
-            <ul>
-              {reasonCode.map((item, i) => {
-                const display = _get(item, 'coding.0.display');
-                if (display) {
-                  return <li key={`item-${i}`}>{display}</li>;
+                if (hasMedicationDetails) {
+                  return (
+                    <MedicationDetails
+                      key={`item-${i}`}
+                      medication={_get(medication, 'code.coding[0].display')}
+                      expiration={_get(
+                        medication,
+                        'package.batch[0].expirationDate',
+                      )}
+                      ingredient={_get(medication, 'ingredient', [])}
+                      medicationReference={medicationReference}
+                      hasReasonCode={hasReasonCode}
+                      reasonCode={reasonCode}
+                    />
+                  );
                 }
                 return null;
               })}
-            </ul>
-          </Value>
-        )}
-        {hasDosage && (
-          <ValueSection label="Dosage" data-testid="dosage">
-            {fhirResource.dosage.map((dosage, i) => {
-              const text = _get(dosage, 'text');
-              const additionalInstructionText = _get(
-                dosage,
-                'additionalInstruction[0].text',
-              );
-              const route =
-                _get(dosage, 'route.coding[0].display') ||
-                `${_get(dosage, 'route.text', '')} ${_get(dosage, 'text', '')}`;
-              const hasRoute = route.trim() !== '';
-              return (
-                <div key={`dosage-${i}`}>
-                  <Value label="Instructions" data-testid="dosageInstruction">
-                    {text}
-                  </Value>
-                  {additionalInstructionText && (
-                    <Value label="Additional Instruction">
-                      {additionalInstructionText}
-                    </Value>
-                  )}
-                  {hasRoute && <Value label="Route">{route}</Value>}
-                </div>
-              );
-            })}
-          </ValueSection>
-        )}
-        {hasNote && (
-          <Value label="Notes" data-testid="hasNote">
-            <Annotation fhirData={note} />
-          </Value>
-        )}
-      </Body>
+            {hasDosage &&
+              fhirResource.dosage.map((dosage, i) => {
+                return (
+                  <MedicationDosage
+                    key={`dosage-${i}`}
+                    dosage={dosage}
+                    hasNote={hasNote}
+                    note={note}
+                  />
+                );
+              })}
+          </Body>
+        }
+      />
     </Root>
   );
 };

package/src/components/resources/MedicationStatement/MedicationStatement.stories.js CHANGED Viewed

@@ -9,6 +9,7 @@ import stu3Example1 from '../../../fixtures/stu3/resources/medicationStatement/e
 import stu3Example2 from '../../../fixtures/stu3/resources/medicationStatement/example2.json';
 import r4Example1 from '../../../fixtures/r4/resources/medicationStatement/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/medicationStatement/example2.json';
+import fhirIcons from '../../../fixtures/example-icons';
 export default {
   title: 'MedicationStatement',
@@ -20,6 +21,7 @@ export const DefaultVisualizationDSTU2 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.DSTU2}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -30,6 +32,7 @@ export const ExampleOfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -40,6 +43,7 @@ export const Example2OfSTU3 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.STU3}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -50,6 +54,7 @@ export const Example1OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };
@@ -60,6 +65,7 @@ export const Example2OfR4 = () => {
     <MedicationStatement
       fhirVersion={fhirVersions.R4}
       fhirResource={fhirResource}
+      fhirIcons={fhirIcons}
     />
   );
 };

package/src/components/resources/MedicationStatement/MedicationStatement.test.js CHANGED Viewed

@@ -19,7 +19,7 @@ describe('should render MedicationStatement component correctly', () => {
     expect(getByTestId('title').textContent).toContain(
       'amphetamine-dextroamphetamine',
     );
-    expect(getByTestId('hasEffectivePeriod').textContent).toContain('from');
+    expect(getByTestId('startDate').textContent).toContain('4/19/2016');
     expect(queryByTestId('medicationReference')).toBeNull();
     expect(getByTestId('dosageInstruction').textContent).toContain(
@@ -32,19 +32,35 @@ describe('should render MedicationStatement component correctly', () => {
       fhirResource: stu3Example,
       fhirVersion: fhirVersions.STU3,
     };
-    const { getByTestId, queryAllByTestId } = render(
+    const { getByTestId, queryAllByTestId, queryByTestId } = render(
       <MedicationStatement {...defaultProps} />,
     );
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
+    expect(getByTestId('dosageInstruction').textContent).toContain(
+      '1-2 tablets once daily at bedtime as needed for restless legs',
+    );
+    expect(queryByTestId('medicationReference').textContent).toContain(
+      '#med0309',
+    );
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
   });
@@ -58,14 +74,23 @@ describe('should render MedicationStatement component correctly', () => {
     );
     expect(getByTestId('title').textContent).toEqual('Medication Statement');
-    expect(queryAllByTestId('hasEffectivePeriod')).toHaveLength(0);
+    expect(queryAllByTestId('startDate')).toHaveLength(0);
+    expect(queryAllByTestId('endDate')).toHaveLength(0);
     expect(getByTestId('dosageInstruction').textContent).toContain(
       '1-2 tablets once daily',
     );
-    expect(getByTestId('hasNote').textContent).toContain('occasional');
+    const ingredients = queryAllByTestId('ingredient-item').map(
+      x => x.textContent,
+    );
+    expect(ingredients).toHaveLength(2);
+    expect(ingredients).toEqual([
+      'Acetaminophen 500 MG',
+      'Diphenhydramine Hydrochloride 25 mg',
+    ]);
+    expect(getByTestId('hasNote').textContent).toContain('occasional');
     expect(getByTestId('hasReasonCode').textContent).toContain('Legs');
     expect(getByTestId('medicationReference').textContent).toContain(
       '#med0309',

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

@@ -18,8 +18,7 @@ import {
 } from '../../ui';
 import Reference from '../../datatypes/Reference';
-const Observation = props => {
-  const { fhirResource } = props;
+const Observation = ({ fhirResource, fhirIcons }) => {
   const effectiveDate = _get(fhirResource, 'effectiveDateTime');
   const codeCodingDisplay = _get(fhirResource, 'code.coding.0.display');
   const codeText = _get(fhirResource, 'code.text', '');
@@ -72,7 +71,7 @@ const Observation = props => {
       <Accordion
         headerContent={
           <Header
-            resourceName={fhirResource.resourceType}
+            resourceName="Observation"
             additionalContent={
               issued && (
                 <Value label="Start date" data-testid="headerStartDate">
@@ -104,6 +103,7 @@ const Observation = props => {
                 small
               />
             }
+            icon={fhirIcons}
           />
         }
         bodyContent={