fhir-react 0.3.7 → 0.3.10

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

@@ -2,221 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import _get from 'lodash/get';
 import UnhandledResourceDataStructure from '../UnhandledResourceDataStructure';
-import {
-  Root,
-  Header,
-  Title,
-  Badge,
-  BadgeSecondary,
-  Body,
-  Value,
-  MissingValue,
-} from '../../ui';
+import { Root, Header, Badge, Body, Value } from '../../ui';
 import Date from '../../datatypes/Date';
 import fhirVersions from '../fhirResourceVersions';
 import Coding from '../../datatypes/Coding';
 import Reference from '../../datatypes/Reference/Reference';
-import Attachment from '../../datatypes/Attachment';
-import Quantity from '../../datatypes/Quantity';
 import './QuestionnaireResponse.css';
+import Accordion from '../../containers/Accordion';
+import Items from './Items';
 
 const DEFAULT_TITLE = 'Questionnaire Response';
 
-const getQuestionText = item => {
-  let text = _get(item, 'text');
-  if (!text) {
-    // DSTU2
-    const groupConcept = _get(item, 'concept.0');
-    if (groupConcept) {
-      text = <Coding fhirData={groupConcept} />;
-    }
-    text = text ? text : <MissingValue />;
-    // STU3
-    const groupCode = _get(item, 'code.0');
-    if (!text && groupCode) {
-      text = <Coding fhirData={groupCode} />;
-    }
-  }
-  return text;
-};
-
-const answerTypes = {
-  valueString: value => value,
-  valueDecimal: value => value,
-  valueInteger: value => value,
-  valueDate: value => <Date fhirData={value} />,
-  valueDateTime: value => <Date fhirData={value} />,
-  valueCoding: value => <Coding fhirData={value} />,
-  valueAttachment: value => <Attachment fhirData={value} />,
-  valueQuantity: value => <Quantity fhirData={value} />,
-  valueBoolean: value => (value ? 'Yes' : 'No'),
-};
-
-const Answers = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data)) {
-    return null;
-  }
-  return (
-    <div className="fhir-resource__QuestionnaireResponse-questions-list-item-details">
-      {data.map(answer => {
-        return Object.keys(answer).map((answerKey, i) => {
-          const toRender = [];
-          if (typeof answerTypes[answerKey] === 'function') {
-            toRender.push(
-              <div
-                key={`item-${i}`}
-                className="fhir-resource__QuestionnaireResponse-questions-list-item-details-el"
-                data-testid={`${props['data-testid']}-${i}`}
-              >
-                {answerTypes[answerKey](answer[answerKey])}{' '}
-              </div>,
-            );
-          }
-          if (_get(answer, 'item')) {
-            toRender.push(
-              <Group
-                key={`item-answer-${i}`}
-                data={answer.item}
-                prepareItems={prepareItems}
-              />,
-            );
-          }
-          return toRender;
-        });
-      })}
-    </div>
-  );
-};
-
-const Group = props => {
-  const { data, prepareItems } = props;
-  if (!Array.isArray(data) || data.length === 0) {
-    return null;
-  }
-
-  return data.map(prepareItems).map((item, i) => {
-    const title =
-      _get(item, 'title') ||
-      _get(item, 'text') ||
-      _get(item, '_linkId.fhir_comments.0');
-
-    return (
-      <ul
-        key={`item-${i}`}
-        className="fhir-resource__QuestionnaireResponse-list"
-      >
-        <li
-          className="fhir-resource__QuestionnaireResponse-list-title"
-          data-testid={`linkId-${item.linkId}`}
-        >
-          {title || <MissingValue />}
-        </li>
-        {item.isGroup && (
-          <li>
-            <Group data={item.group} prepareItems={prepareItems} />
-          </li>
-        )}
-        {!item.isGroup && (
-          <>
-            {item.question && (
-              <li>
-                <Questions
-                  questions={item.question}
-                  prepareItems={prepareItems}
-                />
-              </li>
-            )}
-            {item.answer && (
-              <li>
-                <Answers
-                  data={item.answer}
-                  prepareItems={prepareItems}
-                  data-testid={`answer-${item.linkId}`}
-                />
-              </li>
-            )}
-          </>
-        )}
-      </ul>
-    );
-  });
-};
-
-Group.propTypes = {
-  data: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Questions = props => {
-  const { questions, prepareItems } = props;
-  if (!Array.isArray(questions) || questions.length === 0) {
-    return null;
-  }
-  return (
-    <ul className="fhir-resource__QuestionnaireResponse-questions-list">
-      {questions.map(prepareItems).map((item, i) => {
-        const text = getQuestionText(item);
-        const hasGroup = item.isGroup;
-        const answers = _get(item, 'answer', []);
-        return (
-          <li key={`item-${i}`} data-testid={`linkId-${item.linkId}`}>
-            {text}
-            {answers && <Answers data={item.answer} />}
-            {hasGroup && (
-              <Group data={item.group} prepareItems={prepareItems} />
-            )}
-          </li>
-        );
-      })}
-    </ul>
-  );
-};
-
-Questions.propTypes = {
-  questions: PropTypes.array,
-  prepareItems: PropTypes.func.isRequired,
-};
-
-const Items = props => {
-  const { fhirVersion, data } = props;
-  if (fhirVersion === fhirVersions.DSTU2) {
-    const prepareItems = item => {
-      return {
-        ...item,
-        isGroup: !!_get(item, 'group'),
-      };
-    };
-
-    if (data.isGroup) {
-      return <Group data={data.data} prepareItems={prepareItems} />;
-    }
-    return (
-      <Group data={[{ question: data.data }]} prepareItems={prepareItems} />
-    );
-  }
-
-  if (fhirVersion === fhirVersions.STU3 || fhirVersion === fhirVersions.R4) {
-    const prepareItems = item => ({
-      ...item,
-      group: !!_get(item, 'item') ? _get(item, 'item') : null,
-      isGroup: !!_get(item, 'item'),
-    });
-    return <Group data={[{ question: data }]} prepareItems={prepareItems} />;
-  }
-
-  return null;
-};
-
-Items.propTypes = {
-  data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-  fhirVersion: PropTypes.oneOf([
-    fhirVersions.DSTU2,
-    fhirVersions.STU3,
-    fhirVersions.R4,
-  ]).isRequired,
-};
-
 const commonDTO = fhirResource => {
   const status = _get(fhirResource, 'status');
   const dateTime = _get(fhirResource, 'authored');
@@ -275,8 +71,13 @@ const resourceDTO = (fhirVersion, fhirResource) => {
   }
 };
 
-const QuestionnaireResponse = props => {
-  const { fhirResource, fhirVersion } = props;
+const QuestionnaireResponse = ({
+  fhirResource,
+  fhirVersion,
+  fhirIcons,
+  onClick,
+  rawOnClick,
+}) => {
   let fhirResourceData = {};
 
   try {
@@ -296,34 +97,51 @@ const QuestionnaireResponse = props => {
     rootItems,
   } = fhirResourceData;
 
+  const tableData = [
+    {
+      label: 'Subject',
+      testId: 'subject',
+      data: subject && <Reference fhirData={subject} />,
+      status: subject,
+    },
+    {
+      label: 'Author',
+      testId: 'author',
+      data: author && <Reference fhirData={author} />,
+      status: author,
+    },
+  ];
+
   return (
-    <Root name="Questionnaire">
-      <Header>
-        <Title>{title || DEFAULT_TITLE}</Title>
-        {status && <Badge data-testid="status">{status}</Badge>}
-        {dateTime && (
-          <BadgeSecondary data-testid="dateTime">
-            <Date fhirData={dateTime} />
-          </BadgeSecondary>
-        )}
-      </Header>
-      <Body>
-        {subject && (
-          <Value label="Subject" data-testid="subject">
-            <Reference fhirData={subject} />
-          </Value>
-        )}
-        {author && (
-          <Value label="Author" data-testid="author">
-            <Reference fhirData={author} />
-          </Value>
-        )}
-        {rootItems && (
-          <div className="overflow-auto">
-            <Items fhirVersion={fhirVersion} data={rootItems} />
-          </div>
-        )}
-      </Body>
+    <Root name="QuestionnaireResponse">
+      <Accordion
+        headerContent={
+          <Header
+            resourceName="QuestionnaireResponse"
+            title={title || DEFAULT_TITLE}
+            badges={status && <Badge data-testid="status">{status}</Badge>}
+            additionalContent={
+              dateTime && (
+                <Value label="On" data-testid="dateTime">
+                  <Date fhirData={dateTime} isBlack />
+                </Value>
+              )
+            }
+            icon={fhirIcons}
+          />
+        }
+        bodyContent={
+          <Body tableData={tableData}>
+            {rootItems && (
+              <div className="overflow-auto">
+                <Items fhirVersion={fhirVersion} data={rootItems} />
+              </div>
+            )}
+          </Body>
+        }
+        onClick={onClick}
+        rawOnClick={rawOnClick}
+      />
     </Root>
   );
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { object } from '@storybook/addon-knobs';
+import { defaultArgTypes } from '../../defaultArgTypes';
 
 import QuestionnaireResponse from './QuestionnaireResponse';
 import fhirVersions from '../fhirResourceVersions';
@@ -14,74 +14,62 @@ import stu3Example2 from '../../../fixtures/stu3/resources/questionnaireResponse
 import r4Example1 from '../../../fixtures/r4/resources/questionnaireResponse/example1.json';
 import r4Example2 from '../../../fixtures/r4/resources/questionnaireResponse/example2.json';
 
-export default { title: 'QuestionnaireResponse' };
+import fhirIcons from '../../../fixtures/example-icons';
+import QuestionnaireResponseIcon from '../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg';
 
-export const DefaultVisualizationDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+export default {
+  title: 'QuestionnaireResponse',
+  component: QuestionnaireResponse,
+  argTypes: {
+    ...defaultArgTypes,
+  },
 };
 
-export const Example2OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+const Template = args => <QuestionnaireResponse {...args} />;
+
+export const DefaultVisualizationDSTU2 = Template.bind({});
+DefaultVisualizationDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example1,
+  fhirIcons: require('../../../assets/containers/QuestionnaireResponse/questionnaire-response.svg'),
+};
+
+export const Example2OfDSTU2 = Template.bind({});
+Example2OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example2,
+  fhirIcons: QuestionnaireResponseIcon,
 };
 
-export const Example3OfDSTU2 = () => {
-  const fhirResource = object('Resource', dstu2Example3);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.DSTU2}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example3OfDSTU2 = Template.bind({});
+Example3OfDSTU2.args = {
+  fhirVersion: fhirVersions.DSTU2,
+  fhirResource: dstu2Example3,
+  fhirIcons: fhirIcons,
 };
 
-export const Example1OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfSTU3 = Template.bind({});
+Example1OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example1,
+  fhirIcons: false,
 };
 
-export const Example2OfSTU3 = () => {
-  const fhirResource = object('Resource', stu3Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.STU3}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfSTU3 = Template.bind({});
+Example2OfSTU3.args = {
+  fhirVersion: fhirVersions.STU3,
+  fhirResource: stu3Example2,
+  fhirIcons: 'random text',
 };
 
-export const Example1OfR4 = () => {
-  const fhirResource = object('Resource', r4Example1);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example1OfR4 = Template.bind({});
+Example1OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example1,
 };
 
-export const Example2OfR4 = () => {
-  const fhirResource = object('Resource', r4Example2);
-  return (
-    <QuestionnaireResponse
-      fhirVersion={fhirVersions.R4}
-      fhirResource={fhirResource}
-    />
-  );
+export const Example2OfR4 = Template.bind({});
+Example2OfR4.args = {
+  fhirVersion: fhirVersions.R4,
+  fhirResource: r4Example2,
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { fireEvent, render } from '@testing-library/react';
 
 import QuestionnaireResponse from './QuestionnaireResponse';
 import fhirVersions from '../fhirResourceVersions';
@@ -24,7 +24,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('completed');
     expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
-    expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
+    expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
     expect(getByTestId('linkId-1.1').textContent).toEqual(
@@ -91,7 +91,7 @@ describe('QuestionnaireResponse should render component correctly', () => {
     );
     expect(getByTestId('status').textContent).toEqual('completed');
     expect(getByTestId('dateTime').textContent).toEqual('6/18/2013');
-    expect(getByTestId('subject').textContent).toEqual('RoelPatient/f201');
+    expect(getByTestId('subject').textContent).toEqual('Roel');
     expect(getByTestId('author').textContent).toEqual('Practitioner/f201');
 
     expect(getByTestId('linkId-1.1').textContent).toEqual(
@@ -112,4 +112,39 @@ describe('QuestionnaireResponse should render component correctly', () => {
       'Do you drink alchohol?',
     );
   });
+
+  it('should fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = jest.fn();
+    const { getByRole } = render(
+      <QuestionnaireResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).not.toEqual('collapse');
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('should not fire custom onClick function', () => {
+    const defaultProps = {
+      fhirResource: r4Example1,
+      fhirVersion: fhirVersions.R4,
+    };
+
+    const onClick = 'test';
+    const { getByRole } = render(
+      <QuestionnaireResponse {...defaultProps} onClick={onClick} />,
+    );
+    const accordion = getByRole('button');
+    fireEvent.click(accordion);
+
+    const attribute = accordion.getAttribute('data-bs-toggle');
+    expect(attribute).toEqual('collapse');
+  });
 });

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

@@ -0,0 +1,43 @@
+import _get from 'lodash/get';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Group from './Group';
+import Answers from './Answers';
+import { getQuestionText } from './getQuestionText';
+
+const Questions = ({ questions, prepareItems }) => {
+  if (!Array.isArray(questions) || questions.length === 0) {
+    return null;
+  }
+
+  return (
+    <ul className="fhir-resource__QuestionnaireResponse-questions-list">
+      {questions.map(prepareItems).map((item, i) => {
+        const text = getQuestionText(item);
+        const hasGroup = item.isGroup;
+        const answers = _get(item, 'answer', []);
+        return (
+          <li
+            key={`questionnaire-response-questions-item-${i}`}
+            data-testid={`linkId-${item.linkId}`}
+          >
+            <div className="fhir-resource__QuestionnaireResponse-questions-list-element">
+              {text}
+            </div>
+            {answers && <Answers data={item.answer} />}
+            {hasGroup && (
+              <Group data={item.group} prepareItems={prepareItems} isChild />
+            )}
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+Questions.propTypes = {
+  questions: PropTypes.array,
+  prepareItems: PropTypes.func.isRequired,
+};
+
+export default Questions;

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

@@ -0,0 +1,22 @@
+import _get from 'lodash/get';
+import Coding from '../../datatypes/Coding';
+import { MissingValue } from '../../ui';
+import React from 'react';
+
+export const getQuestionText = item => {
+  let text = _get(item, 'text');
+  if (!text) {
+    // DSTU2
+    const groupConcept = _get(item, 'concept.0');
+    if (groupConcept) {
+      text = <Coding fhirData={groupConcept} />;
+    }
+    text = text ? text : <MissingValue />;
+    // STU3
+    const groupCode = _get(item, 'code.0');
+    if (!text && groupCode) {
+      text = <Coding fhirData={groupCode} />;
+    }
+  }
+  return text;
+};