Chapter 2: Refactor

By following this guide we will
  • Refactor our app into several smaller components.
  • Separate the new components into their own files.

Refactoring into smaller components

Applications are typically best organized into a collection of manageable chunks. In order to prevent the App component from becoming too large, let's break it up.

Creating a component for the SMART app layer

To begin this process, let’s refactor the SMART app layer into its own higher order component. We define a new type in src/types/index.ts:

src/types/index.ts
1import React from "react";
2
3export type HOFSmartApp = <P>(
4 WrappedComponent: React.FC<P>
5) => (props: P) => React.ReactElement;

Then we modify src/App.tsx as follows:

src/App.tsx
1import React from "react";
2
3import { AppHeader } from "@commure/components-core";
4import { CommureSmartApp } from "@commure/components-data";
5import SMARTClient from "@commure/smart-core";
6import { PatientList } from "./components/PatientList/PatientList";
7
8import "./styles/all.scss";
9import { smartConfig } from "./config";
10import { HOFSmartApp } from "./types";
11
12const smartClient = new SMARTClient(smartConfig);
13
14function App() {
15 return (
16 <>
17 <AppHeader appName="My First Commure App" fixedToTop />
18 <div className="app-container">
19 <PatientList />
20 </div>
21 </>
22 );
23}
24
25const asSMARTApp: HOFSmartApp = WrappedComponent => props => (
26 <CommureSmartApp client={smartClient}>
27 <WrappedComponent {...props} />
28 </CommureSmartApp>
29);
30
31export default asSMARTApp(App);

If you aren’t familiar, <> and </> are special syntaxes referring to React.Fragment which is handled by the compiler toolchain.

Creating a Dashboard component

Next, let’s create a component for this snippet of code in App.tsx:

src/App.tsx
1<AppHeader appName="My First Commure App" fixedToTop />
2<div className="app-container">
3 <PatientList />
4</div>

We will call this component the Dashboard. A lot of information and functionality will be added to the Dashboard in the next chapters of this tutorial.

To create the Dashboard component, we put the following code in src/components/Dashboard/Dashboard.tsx. Let’s also rename the app to be more specific.

src/components/Dashboard/Dashboard.tsx
1import React from "react";
2
3import { AppHeader } from "@commure/components-core";
4import { PatientList } from "../PatientList/PatientList";
5
6const Dashboard: React.FC = (): React.ReactElement => {
7 return (
8 <>
9 <AppHeader appName="Patient Chart" fixedToTop />
10 <div className="app-container">
11 <PatientList />
12 </div>
13 </>
14 );
15};
16
17export default Dashboard;

Finally, we will have the following for App.tsx:

src/App.tsx
1import React from "react";
2
3import { CommureSmartApp } from "@commure/components-data";
4import SMARTClient from "@commure/smart-core";
5import Dashboard from "./components/Dashboard/Dashboard";
6
7import "./styles/all.scss";
8import { smartConfig } from "./config";
9import { HOFSmartApp } from "./types";
10
11const smartClient = new SMARTClient(smartConfig);
12
13function App() {
14 return <Dashboard />;
15}
16
17const asSMARTApp: HOFSmartApp = WrappedComponent => props => (
18 <CommureSmartApp client={smartClient}>
19 <WrappedComponent {...props} />
20 </CommureSmartApp>
21);
22
23export default asSMARTApp(App);

Storing our presentation constants

Lastly, throughout this tutorial, we will find ourselves in need of several presentation-related constants, including colors, spacing values, and more. Let’s create a file to hold all of these, which we will then import centrally.

The following will go in src/styles/constants.scss:

src/styles/constants.scss
1$dark-gray: #454b52;
2$gray3: #9098a1;
3$gray5: #c4cad1;
4$white: #ffffff;
5
6$blue: #006ae1;
7$blue2: #1468c7;
8$vermilion: #b83211;
9
10$label-font-weight: 600;
11
12$spacing-small: 4px;
13$spacing-medium-large: 12px;
14$spacing-large: 16px;
15$spacing-larger: 24px;

To link these new constants in, we will reference them in src/styles/all.scss:

src/styles/all.scss
1@import "./_styles.scss"; // Global styles
2@import "./constants.scss"; // Presentation constants
3
4// Component styles:
5@import "../components/PatientList/PatientList.scss";

And we have completed the refactor.

box icon

Conclusion

In this chapter, we refactored the app by separating out the SMART app layer into its own component and creating a new Dashboard component that lives inside of the app. In the following chapters, we will be populating the Dashboard component with patient information and useful functionalities.