ECR Viwer Demo Site

front-end/app/view_ecr/page.tsx

@@ -0,0 +1,25 @@
+'use client'
+import {Button} from '@trussworks/react-uswds'
+import ECRTable from '@/components/ECRTable';
+import React from "react";
+import {useData} from '@/utils/DataContext';
+
+export default function ViewECR() {
+	const {data} = useData()
+
+	if (!data) {
+		return <div>No data available.</div>
+	}
+
+	return (
+		<div className="margin-3">
+			<h1 className={'font-sans-xl text-bold'}>View your eCR</h1>
+			<p>
+				You can view your data below or download it as a FHIR bundle (JSON file).
+			</p>
+			<ECRTable ecrData={data}></ECRTable>
+			<Button type="button" outline>Upload new eCR</Button>
+			<Button type="button">Download FHIR bundle</Button>
+		</div>
+	)
+}

front-end/components/ECRTable.tsx

@@ -1,45 +1,41 @@
-import {
-    Table
-} from '@trussworks/react-uswds'
+import {Table} from '@trussworks/react-uswds'
 import _ from 'lodash';
 
-export default function ECRTable({ ecrData }) {
-    const options = ['patient_id', 'first_name', 'last_name', 'gender', 'birth_date']
+export default function ECRTable({ecrData}) {
+	const options = ['patient_id', 'first_name', 'last_name', 'gender', 'birth_date']
 
 
-    const getTableBody = (data: any) => {
-        return (
-            <tbody>
-                {options.map(function (option) {
-                    return (
-                        <tr key={option}>
-                            <th scope="row">{_.startCase(option)}</th>
-                            <td>{data[option]}</td>
-                        </tr>
-                    );
-                })}
+	const getTableBody = (data: any) => {
+		return (
+			<tbody>
+			{options.map(function (option) {
+				return (
+					<tr key={option}>
+						<th scope="row">{_.startCase(option)}</th>
+						<td>{data[option]}</td>
+					</tr>
+				);
+			})}
 
-            </tbody>
-        )
-    }
+			</tbody>
+		)
+	}
 
-    return (
-        <div className='margin-3'>
-            <h1>eCR Viewer</h1>
-            <div>
-                <Table
-                    bordered
-                    caption="This table uses the fullWidth prop to increase to 100% width"
-                    fullWidth>
-                    <thead>
-                        <tr>
-                            <th scope="col">Field Name</th>
-                            <th scope="col">Field Value</th>
-                        </tr>
-                    </thead>
-                    {getTableBody(ecrData.processed_values.parsed_values)}
-                </Table>
-            </div>
-        </div>
-    )
+	return (
+		<div className='margin-3'>
+			<div>
+				<Table
+					bordered
+					fullWidth>
+					<thead>
+					<tr>
+						<th scope="col">Field Name</th>
+						<th scope="col">Field Value</th>
+					</tr>
+					</thead>
+					{getTableBody(ecrData.processed_values.parsed_values)}
+				</Table>
+			</div>
+		</div>
+	)
 }