Add provider table

client/package.json

@@ -4,26 +4,18 @@
   "private": true,
   "proxy": "http://localhost:3001",
   "dependencies": {
-    "@cmsgov/design-system": "^2.7.3",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
-    "axios": "^0.21.2",
-    "http-proxy-middleware": "^1.3.1",
-    "node-sass": "^4.14.1",
+    "@cmsgov/design-system": "^2.13.0",
+    "axios": "^0.24.0",
+    "jsonpath": "^1.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-router-dom": "^5.2.0",
-    "react-scripts": "4.0.3",
-    "typescript": "^4.1.2",
-    "web-vitals": "^1.0.1"
+    "react-router": "6",
+    "react-router-dom": "^6.2.1",
+    "web-vitals": "^2.1.3"
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:native": "REACT_APP_CTX=native react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -47,6 +39,17 @@
     ]
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.7"
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^12.1.2",
+    "@types/axios": "^0.14.0",
+    "@types/fhir": "^0.0.34",
+    "@types/jest": "^27.4.0",
+    "@types/jsonpath": "^0.2.0",
+    "@types/react-router-dom": "^5.3.2",
+    "jest": "^27.4.7",
+    "jest-dom": "^4.0.0",
+    "react-scripts": "^5.0.0",
+    "sass": "^1.48.0",
+    "typescript": "^4.5.4"
   }
 }

client/src/App.tsx

@@ -1,50 +1,43 @@
 import Header from './components/header';
-import Patient from './components/patient';
-import PatientData from './components/patientData';
-import Records from './components/records';
-import { BrowserRouter as Router} from "react-router-dom";
-import { TabPanel, Tabs } from '@cmsgov/design-system';
+import { Routes, Route } from "react-router-dom";
+import { Layout } from './components/layout';
+import Profile from './components/profile';
+import Medications from './components/medications';
+import Procedures from './components/procedures';
+import Providers from './components/providers';
+import Expenses from './components/expenses';
+import Diagnoses from './components/diagnoses';
+import { useState, useEffect } from 'react';
+
+export type AllMedicaidClaimsData = {
+  eobData?: any
+}
 
 function App() {
+  const [records, setRecords] = useState<AllMedicaidClaimsData>({});
+
+  useEffect(() => {
+    fetch('/api/data/benefit')
+      .then(res => {
+        return res.json();
+      }).then(eobData => {
+        setRecords({ eobData });
+      });
+  }, [])
   return (
     <div className="ds-l-container ds-u-margin-bottom--7 ds-u-padding-bottom--7">
-    <Router>
       <Header />
-      <Tabs tablistClassName="ds-u-margin-top--3">
-        <TabPanel id="patient" tab="Patient info">
-          <h2>Patient information</h2>
-          <div className="ds-u-display--flex ds-u-flex-direction--column ds-u-lg-flex-direction--row ds-u-flex-wrap--nowrap ds-u-lg-flex-wrap--wrap">
-            <div className="bb-c-card default-card">
-              <Patient />
-            </div>          
-            <div className="bb-c-card default-card">
-              <PatientData />
-            </div>          
-          </div>
-          {}
-          <Records /> 
-          {}
-        <div>
-          <div>
-            {}
-          </div>
-        </div>
-        </TabPanel>
-        <TabPanel id="summary" tab="Summary">
-          <p className='ds-u-measure--base'>
-            Blue Button 2.0 is a standards-based application programming interface (API) that delivers Medicare Part A, B, and D data for over 60 million Medicare beneficiaries. <a href="https://bluebutton.cms.gov/">Learn more about Blue Button 2.0</a>
-          </p>
-
-          <p className='ds-u-measure--base'>
-            The CMS design system is a set of open source design and front-end development resources
-            for creating Section 508 compliant, responsive, and consistent websites. It builds on the
-            U.S. Web Design System and extends it to support additional CSS and React components,
-            utility classes, and a grid framework to allow teams to quickly prototype and build
-            accessible, responsive, production-ready websites. <a href="https://design.cms.gov/">Learn more about CMS Design System</a>
-          </p>
-        </TabPanel>
-      </Tabs>
-    </Router>
+      <Routes>
+        <Route path="/" element={<Layout />}>
+          <Route index element={<Profile eobData={records.eobData} />} />
+          <Route path="medications" element={<Medications />} />
+          <Route path="diagnoses" element={<Diagnoses />} />
+          <Route path="procedures" element={<Procedures />} />
+          <Route path="providers" element={<Providers eobData={records.eobData} />} />
+          <Route path="expenses" element={<Expenses />} />
+          <Route path="*" element={<Profile eobData={records.eobData} />} />
+        </Route>
+      </Routes>
     </div>
   );
 }

client/src/components/diagnoses.tsx

@@ -0,0 +1,7 @@
+export default function Diagnoses() {
+    return (
+        <div>
+            <h2>Diagnoses</h2>
+        </div>
+    );
+}

client/src/components/expenses.tsx

@@ -0,0 +1,7 @@
+export default function Expenses() {
+    return (
+        <div>
+            <h2>Expenses</h2>
+        </div>
+    );
+}

client/src/components/header.tsx

@@ -1,19 +1,17 @@
 import { Badge } from '@cmsgov/design-system';
-import { Link as RouterLink } from 'react-router-dom';
+
+/*
+                <Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
+
+                </Link>
+*/
 
 export default function Header({ }) {
     return (
         <header className="ds-u-padding--3 ds-u-sm-padding--6 ds-u-display--block ds-u-fill--primary-darkest">
-            <h1 className="ds-u-margin--0 ds-u-color--white ds-u-font-size--display ds-u-text-align--center">
-                <RouterLink to="/" style={{ textDecoration: 'none', color: 'inherit' }}>
-                    Blue Button 2.0 Sample App
-                </RouterLink>
+            <h1 className="ds-u-margin--0 ds-u-color--white ds-u-text-align--center">
+                Blue Button 2.0 Sample App
             </h1>
-            <div className="ds-u-text-align--center">
-                <Badge variation="info" size="big">
-                    Medicare Prescription Drug Claims Data
-                </Badge>
-            </div>
         </header>
     );
 };

client/src/components/layout.tsx

@@ -0,0 +1,14 @@
+import { Outlet } from "react-router-dom";
+import Header from "./header";
+import Navigation from "./navigation";
+
+export function Layout() {
+    return (
+        <div className='ds-u-display--flex ds-u-flex-direction--row'>
+            <Navigation />
+            <div className='ds-u-justify-content--center ds-u-align-items--center ds-u-padding--1 ds-u-margin--1' style={{ width: '100%' }}>
+                <Outlet />
+            </div>
+        </div>
+    )
+}

client/src/components/medications.tsx

@@ -0,0 +1,7 @@
+export default function Medications() {
+    return (
+        <div>
+            <h2>Medications</h2>
+        </div>
+    );
+}

client/src/components/navigation.tsx

@@ -0,0 +1,51 @@
+import { VerticalNav } from "@cmsgov/design-system";
+import { Link } from "react-router-dom";
+
+const ReactRouterLink = ({ ...props }) => (
+    <Link to={props.href} {...props}>{props.children}</Link>
+);
+
+const navItems = [
+    {
+        label: 'Profile',
+        id: 'profileNav',
+        url: '/',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Providers',
+        id: 'providersNav',
+        url: '/providers',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Procedures',
+        id: 'proceduresNav',
+        url: '/procedures',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Medications',
+        id: 'medicationsNav',
+        url: '/medications',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Diagnoses',
+        id: 'diagnosesNav',
+        url: '/diagnoses',
+        component: ReactRouterLink
+    },
+    {
+        label: 'Expenses',
+        id: 'expensesNav',
+        url: '/expenses',
+        component: ReactRouterLink
+    }
+]
+
+export default function Navigation() {
+    return (
+        <VerticalNav items={navItems} />
+    )
+}

client/src/components/procedures.tsx

@@ -0,0 +1,7 @@
+export default function Procedures() {
+    return (
+        <div>
+            <h2>Procedures</h2>
+        </div>
+    );
+}

client/src/components/profile.tsx

@@ -0,0 +1,41 @@
+import { Button } from '@cmsgov/design-system';
+import axios from 'axios';
+import { useState } from 'react';
+import avatar from '../images/patient.png';
+import chart from '../images/who-charted.png';
+import { SettingsType } from '../types/settings';
+
+export default function Profile({ eobData }: { eobData?: any }) {
+    const [settingsState] = useState<SettingsType>({
+        pkce: true,
+        version: 'v2',
+        env: 'sandbox'
+    });
+
+    async function goAuthorize() {
+        const authUrlResponse = await axios.get(`/api/authorize/authurl`, { params: settingsState });
+        window.location.href = authUrlResponse.data || '/';
+    }
+
+    const connected = eobData ? (<h4 className='ds-u-text-align--center'>Connected!</h4>) : (<Button variation="primary" onClick={goAuthorize}>Authorize</Button>);
+
+    return (
+        <div className='ds-u-justify-content--center ds-u-align-items--center'>
+            <h3 className='ds-u-text-align--center'>Profile</h3>
+            <div className='full-width-card ds-u-display--flex ds-u-flex-direction--row ds-u-align-items--center ds-u-justify-content--center'>
+                <img src={avatar} alt="Profile avatar" />
+                <ul className="ds-c-list">
+                    <li>John Doe</li>
+                    <li>Springfield General Hospital</li>
+                    <li>Dr. Hibbert</li>
+                </ul>
+            </div>
+            <div>
+                <div className='ds-u-display--flex ds-u-flex-direction--column ds-u-justify-content--center ds-u-align-items--center'>
+                    <h4 className='ds-u-text-align--center'>Connect your medicare claims data</h4>
+                    {connected}
+                </div>
+            </div>
+        </div>
+    );
+}