Chapter 5: Putting It All Together
- Build a component to display a patient’s health information and style it into a chart.
- Display the information chart in the right panel of the dashboard for the patient that is selected on the left panel of the dashboard.
PatientInfo
component
Building the Let’s build a component called PatientInfo
to display patient information. The component should take in a
patientId
representing the patient whose information is to be displayed. We will use the connected components
that we built in the previous chapter to show the patient’s Medications
, Condition
, Allergies
, Vitals
,
and lab results in Fishbone
format where there are two types of fishbones, BMP
and CBC
.
In src/components/PatientInfo/PatientInfo.tsx
we have the following code:
src/components/PatientInfo/PatientInfo.tsx
Styling into a chart
We can style the patient information into a chart for easier readability. For this tutorial, we intend to style the chart as follows:
Let’s modify the code in PatientInfo.tsx
to allow for this formatting.
src/components/PatientInfo/PatientInfo.tsx
Note that hospitals often still use older browsers such as Internet Explorer, so browser compatibility
should be a consideration when styling components. We use display: flex
instead of display: grid
to accommodate Internet Explorer, even though the chart may be more intuitively seen as a grid.
In src/components/PatientInfo/patientInfo.scss
we add the following code:
src/components/PatientInfo/patientInfo.scss
PatientInfo
on the Dashboard
Displaying In Chapter 3, we built a PatientListLoader
that can load a list of patients and allow the user to search
for and select a patient. This was placed in a PanelBody
on the left side of LeftPanelLayout
.
Meanwhile, the right side still shows the old PatientList
component we built in Chapter 1.
Let's replace that with our new PatientInfo
component by updating the Dashboard
with the following code:
src/components/Dashboard/Dashboard.tsx
Note that the spacer in line 7 is needed to adjust for occlusion by the AppHeader
bar.
Remember to also replace the styling import in all.scss
:
src/styles/all.scss
At this point, since the PatientList
component is no longer being used, you can delete the code for that component.
We now have an application where we can search and select a patient from a list of patients on the left side, and see the selected patient’s health information on the right side. If you select one of the patients whose
data we uploaded in the prerequisites (e.g. Ezra452
), you should see something like the following:
Conclusion
In this chapter, we created a component to display a selected patient’s health information. Combining this component with the components we built in previous chapters, we now have a useful application that can search through a list of patients, identify each patient by name and date of birth, and display a selected patient’s health information.
In the next chapter, we will discuss the final step: deployment!