CDCgov · KennethSkylight · Oct 24, 2023 · Sep 29, 2023 · Oct 5, 2023 · Oct 10, 2023
diff --git a/front-end/app/ecr_viewer/page.tsx b/front-end/app/ecr_viewer/page.tsx
diff --git a/front-end/app/export/page.tsx b/front-end/app/export/page.tsx
@@ -0,0 +1,38 @@
+'use client'
+import ECRTable from '@/components/ECRTable';
+import { useData } from '@/utils/DataContext';
+import { Button } from '@trussworks/react-uswds'
+
+import React from 'react';
+
+export default function ExportPage() {
+    const { data } = useData(); // Access the shared data
+    const downloadFile = () => {
+        // Convert the data object to a JSON string
+        const jsonData = JSON.stringify(data);
+
+        // Create a Blob with the JSON data
+        const blob = new Blob([jsonData], { type: 'application/json' });
+
+        // Create a URL for the Blob
+        const url = URL.createObjectURL(blob);
+
+        // Create a temporary anchor element to trigger the download
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = 'data.json';
+
+        // Programmatically click the anchor element to trigger the download
+        a.click();
+
+        // Clean up by revoking the URL
+        URL.revokeObjectURL(url);
+    };
+    return (
+        <div className="margin-3">
+            <h1>Export Page</h1>
+            <Button type="button" onClick={downloadFile}>Export</Button>
+            <ECRTable ecrData={data}></ECRTable>
+        </div>
+    );
+}
diff --git a/front-end/app/layout.tsx b/front-end/app/layout.tsx
@@ -1,3 +1,4 @@
+import { DataProvider } from "@/utils/DataContext"
 import "./global.css"
 
 export const metadata = {
@@ -12,7 +13,11 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <DataProvider>
+          {children}
+        </DataProvider>
+      </body>
     </html>
   )
 }
diff --git a/front-end/app/page.tsx b/front-end/app/page.tsx
@@ -1,3 +1,5 @@
-export default function Home(){
-    return<h1>Front page</h1>
+
+
+export default function Home() {
+    return <h1>Front page</h1>
 }
diff --git a/front-end/app/upload_file/page.tsx b/front-end/app/upload_file/page.tsx
@@ -1,9 +1,13 @@
 'use client'
+import { useData } from '@/utils/DataContext';
 import { FileInput, FormGroup, Label, Button } from '@trussworks/react-uswds'
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 
 
 export default function UploadFile() {
+    const { setData } = useData();
+    const router = useRouter();
     // We will change this and put it in a constants 
     // file when orchestration is published
     const process_url = 'http://localhost:8080/process'
@@ -25,21 +29,25 @@ export default function UploadFile() {
                     body: formData,
                 });
                 const data = await response.json();
+                setData(data);
                 //We will do something with the data high fidelity version.
                 console.log(data);
+                router.push('/export')
             } catch (error) {
                 console.error('Error uploading file', error);
             }
         }
     };
 
-    return <div className="margin-3">
-        <FormGroup>
-            <Label htmlFor="file-input-single">Input accepts a single file</Label>
-            <FileInput id="file-input-single"
-                name="file-input-single" onChange={(addFile)}
-            />
-            <Button type="button" onClick={handleSubmit}>Upload</Button>
-        </FormGroup>
-    </div>
+    return (
+        <div className="margin-3">
+            <FormGroup>
+                <Label htmlFor="file-input-single">Input accepts a single file</Label>
+                <FileInput id="file-input-single"
+                    name="file-input-single" onChange={(addFile)}
+                />
+                <Button type="button" onClick={handleSubmit}>Upload</Button>
+            </FormGroup>
+        </div>
+    )
 }
diff --git a/front-end/components/ECRTable.tsx b/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>
+    )
+}
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/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",

diff --git a/front-end/tests/components/ECRTable.test.js b/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
+    });
+});