ECR View (#22)

* fixing gitignore

* upload functionality

* Create upload file test

* Adding state management

* tests written for export and upload

* Added ecr tests

* adding type

* Kenneth/export (#21)

* fixing gitignore

* upload functionality

* Create upload file test

* Adding state management

* tests written for export and upload

* Adding state management

* tests written for export and upload

* Added ecr tests

* adding type

* fixing package lock

front-end/app/export/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+import ECRTable from '@/components/ECRTable';
 import { useData } from '@/utils/DataContext';
 import { Button } from '@trussworks/react-uswds'
 
@@ -31,6 +32,7 @@ export default function ExportPage() {
         <div className="margin-3">
             <h1>Export Page</h1>
             <Button type="button" onClick={downloadFile}>Export</Button>
+            <ECRTable ecrData={data}></ECRTable>
         </div>
     );
 }

front-end/components/ECRTable.tsx

@@ -0,0 +1,46 @@
+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']
+
+    console.log(ecrData);
+
+    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>
+        )
+    }
+
+    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>
+    )
+}

front-end/package.json

@@ -18,6 +18,7 @@
     "eslint": "8.47.0",
     "eslint-config-next": "13.4.15",
     "next": "13.5.5",
+    "lodash": "^4.17.21",
     "postcss": "8.4.27",
     "react": "18.2.0",
     "react-dom": "18.2.0",

front-end/tests/components/ECRTable.test.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import "@testing-library/jest-dom";
+import ECRTable from '../../components/ECRTable'; // Adjust the import path as per your project structure
+
+describe('ECRTable', () => {
+    it('renders ECRTable component with provided data', () => {
+        const ecrData = {
+            "processed_values": {
+                "message": "Parsing succeeded!",
+                "parsed_values": {
+                    "patient_id": "123",
+                    "person_id": null,
+                    "last_name": "BEAKER",
+                    "first_name": "CATEST",
+                    "birth_date": "2016-01-27",
+                    "gender": "female"
+                }
+            }
+        };
+
+        render(<ECRTable ecrData={ecrData} />);
+
+        // You can add more specific assertions here
+        // For example, checking if the table headers and data are rendered
+        expect(screen.getByText('eCR Viewer')).toBeInTheDocument();
+        expect(screen.getByText('Field Name')).toBeInTheDocument();
+        expect(screen.getByText('Field Value')).toBeInTheDocument();
+        expect(screen.getByText('Patient Id')).toBeInTheDocument();
+        expect(screen.getByText('123')).toBeInTheDocument();
+        // Add similar assertions for other data fields
+    });
+});

front-end/tests/export.test.js

@@ -7,7 +7,17 @@ import ExportPage from '../app/export/page'; // Adjust the import path as needed
 jest.mock('../utils/DataContext', () => ({
     useData: () => ({
         data: {
-            "name": "this is a test"
+            "processed_values": {
+                "message": "Parsing succeeded!",
+                "parsed_values": {
+                    "patient_id": "95a52bd2-2a17-4888-af52-be3472c94e0e",
+                    "person_id": null,
+                    "last_name": "BEAKER",
+                    "first_name": "CATEST",
+                    "birth_date": "2016-01-27",
+                    "gender": "female"
+                }
+            }
         },
     }),
 }));