fhir-smartr-redux

A set of React components that help tie the SMART on FHIR js library to a Redux store.

See example on plunker: https://plnkr.co/edit/OrbOuy9WcqXaSBckuStB

Installation

Node

npm install --save fhir-smartr-redux

Make sure to include a reference to the SMART on FHIR js library in your html so you have access to the API.

<script src="https://cdn.rawgit.com/smart-on-fhir/client-js/v0.1.8/dist/fhir-client.js"></script>

In the Browser (UMD)

<head>
  <!--Load dependencies -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  <script src="https://cdn.rawgit.com/smart-on-fhir/client-js/v0.1.8/dist/fhir-client.js"></script>
  <script src="https://unpkg.com/react/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
  <!-- Load fhir-smartr -->
  <script src="https://unpkg.com/fhir-smartr-redux/umd/fhir-smartr-redux.min.js"></script>
</head>

Usage

Define a Resource component with React

class PatientResource extends Component {
  
  render() {
    // FHIR resources will be passed in as props.resource
    const patient = this.props.resource;
    const name = patient.name[0];
    const address = patient.address[0];
    return(
      <div>
        <h2>{ name.given[0] + ' ' + name.family }</h2>
        <div>{ address.line[0] }</div>
      </div>
    )
  }
  
}

Perform a Query

  <SmartQuery namespace="arbitraryname" query={{ type: 'Patient', id:'099e7de7-c952-40e2-9b4e-0face78c9d80' }} />

Results of the query will be saved in the Redux store under the provided namespace. If an id is included in the query, a single resource will be returned. Otherwise a bundle of resources will be returned.

Display a FHIR Resource

  <Smart namespace="arbitraryname">
    <Resource>
      <PatientResource />
    </Resource>
  </Smart>

The Smart component will pass any data stored in the provided namespace to its child component. The Resource component will then use that data to pass a FHIR resource as props.resource to it's child component.

Display a list of FHIR Resources

  <Smart namespace="multipleresultshere">
    <ResourceList>
      <PatientResource />
    </ResourceList>
  </Smart>

Similar to displaying a single FHIR resource, except ResourceList expects a Bundle and creates a list of the child components.

Create a Search Form

class PatientSearchForm extends Component {
  
  render() {
    let input;
    return (
      <div>
        <form
          onSubmit={e => {
            e.preventDefault()
            if (!input.value.trim()) {
              return
            }
            let query = { type: 'Patient', query: { given: input.value.trim() } }
            this.props.onQuery(query)
          }}
        >
          <input
            ref={node => {
              input = node
            }}
          />
          <button type="submit">
            Search by Last Name
          </button>
        </form>
      </div>
    )
  }
}

The Smart component will pass an onQuery(query) function to its children as child.props.onQuery. Use this to initiate queries in response to user actions, such as within search forms.

Putting it all together

  import React, { Component } from 'react'
  import { render } from 'react-dom'
  import { Provider } from 'react-redux'
  import { Smart, SmartQuery, ResourceList, configureStore } from 'fhir-smartr-redux'
  
  // Init the Redux store
  const store = configureStore();
  
  // Define a Patient search form component with React
  class PatientSearchForm extends Component {
    
    render() {
      let input;
      return (
        <div>
          <form
            onSubmit={e => {
              e.preventDefault()
              if (!input.value.trim()) {
                return
              }
              let query = { type: 'Patient', query: { given: input.value.trim() } }
              this.props.onQuery(query)
            }}
          >
            <input
              ref={node => {
                input = node
              }}
            />
            <button type="submit">
              Search by Last Name
            </button>
          </form>
        </div>
      )
    }
  }
  
  // Define a Patient Resource with React
  class PatientResource extends Component {
    
    render() {
      // The results of your Smart query will be passed as props.resource to this component
      const patient = this.props.resource;
      if(!patient) {
        return <div>{JSON.stringify(this.props)}</div>
      }
      const name = patient.name[0];
      const address = patient.address[0];
      return(
        <div>
          <div>{name.given + ' ' + name.family}</div>
        </div>
      )
    }
    
  }
  
  // Then use the Resource and Search components in the application
  class App extends Component {
    render() {
      return (
        <div>
          <SmartQuery namespace="testing" query={{ type: 'Patient' }} />
          <Smart namespace="testing">
            <PatientSearchForm />
          </Smart>
          <Smart namespace="testing">
            <ResourceList>
              <PatientResource />
            </ResourceList>
          </Smart>
        </div>
      )
    }
  }
  
  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root')
  );

dlsnng / fhir-smartr-redux Goto Github PK