CDCgov · KennethSkylight · Oct 24, 2023 · Sep 29, 2023 · Oct 5, 2023 · Oct 10, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,15 +1,16 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+/front-end/node_modules
+
 /.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # next.js
-/.next/
+/front-end/.next
 /out/
 
 # production

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/globals.css b/front-end/app/globals.css
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,21 +1,51 @@
 '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() {
-    let fileToUpload: any = null
-    const addFile = (event: any): void => {
-        fileToUpload = event.target.files[0];
+    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'
+    const [file, setFile] = useState<File | null>(null);
+    const addFile = (event: React.ChangeEvent<HTMLInputElement>): void => {
+        setFile(event.target.files?.item(0) || null);
     }
 
-    const uploadFile = (e: any): void => {
-        console.log(fileToUpload)
-    }
+    const handleSubmit = async (e: any) => {
+        e.preventDefault();
+        if (file) {
+            const formData = new FormData();
+            formData.append('upload_file', file);
+            formData.append('message_type', 'ecr');
+            formData.append('include_error_types', 'errors');
+            try {
+                const response = await fetch(process_url, {
+                    method: 'POST',
+                    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" disabled={fileToUpload} onClick={uploadFile}>Upload</Button>
+            <FileInput id="file-input-single" className="testing"
+                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/jest.config.js b/front-end/jest.config.js
@@ -0,0 +1,9 @@
+const nextJest = require("next/jest");
+const createJestConfig = nextJest({
+  dir: "./",
+});
+const customJestConfig = {
+  moduleDirectories: ["node_modules", "<rootDir>/"],
+  testEnvironment: "jest-environment-jsdom",
+};
+module.exports = createJestConfig(customJestConfig);