Added PDF parsing for earnings record upload

Author: nvanwitt

createStore.js

@@ -8,9 +8,9 @@
     "@emotion/core": "^10.0.10",
     "@emotion/styled": "^10.0.10",
     "@observablehq/runtime": "^4.0.1",
+    "@reach/router": "^1.2.1",
     "@types/react-helmet": "^5.0.8",
     "babel-preset-gatsby": "^0.1.11",
-    "core-js": "^2.6.5",
     "fast-xml-parser": "^3.12.16",
     "gatsby": "^2.4.2",
     "gatsby-cli": "^2.5.13",
@@ -24,21 +24,20 @@
     "gatsby-plugin-typescript": "^2.0.11",
     "gatsby-source-filesystem": "^2.0.28",
     "gatsby-transformer-sharp": "^2.1.17",
-    "how-to-embed-a-notebook-in-a-react-app": "https://api.observablehq.com/@jashkenas/how-to-embed-a-notebook-in-a-react-app.tgz?key=188f50f6a5f19b89",
+    "pdfjs-dist": "^2.1.266",
     "prop-types": "^15.7.2",
     "react": "^16.8.5",
     "react-dom": "^16.8.5",
     "react-helmet": "^5.2.0",
-    "tesseract.js": "^1.0.14",
+    "tesseract.js": "^2.0.0-alpha.11",
     "typescript": "^3.3.4000",
-    "windfall-awareness-notebook-prototype": "https://api.observablehq.com/@nvanwittenbe/windfall-awareness-notebook-prototype.tgz"
+    "windfall-awareness-notebook-prototype": "https://api.observablehq.com/@thadk/windfall-awareness-notebook-prototype.tgz?v=1"
   },
   "devDependencies": {
     "@types/react": "^16.8.8",
     "@types/react-dom": "^16.8.3",
     "babel-plugin-emotion": "^10.0.9",
-    "prettier": "^1.16.4",
-    "react-redux": "^7.0.2"
+    "prettier": "^1.16.4"
   },
   "keywords": [
     "gatsby"

package.json

@@ -8,5 +8,4 @@ Join the Slack channel #windfall-elimination for more information.
 ## Launching Gatsby Site
 Install the gatsby-cli with `npm install -g gatsby-cli`
 
-Run `npm install && gatsby develop` to launch the project.
-
+Run `npm install && gatsby develop` to launch the project.

readme.md

@@ -3,12 +3,12 @@ import { ButtonLink } from "../components";
 import { colors } from "../constants";
 
 export const ButtonLinkRed = styled(ButtonLink)`
-    background-color: ${colors.white};
-    color: ${colors.black};
-    border: 2px solid ${colors.lime};
-    &:hover {
-        border-color: ${colors.lime};
-        background-color: ${colors.lime};
-        color: ${colors.white}
-    }
+  background-color: ${colors.white};
+  color: ${colors.black};
+  border: 2px solid ${colors.lime};
+  &:hover {
+    border-color: ${colors.lime};
+    background-color: ${colors.lime};
+    color: ${colors.white};
+  }
 `;

redux-store.js

@@ -3,21 +3,20 @@ import { Link } from "gatsby";
 import { spacing, colors, fontSizes, radii } from "../constants";
 
 export const ButtonLink = styled(Link)`
-    padding: ${spacing[1]} ${spacing[2]};
-    margin: ${spacing[2]} ${spacing[2]};
-    background-color: ${props =>
-      props.disabled ? colors.gray : colors.darkGreen};
-    border-radius: ${radii[2]};
-    font-size: ${fontSizes[1]};
-    color: ${colors.white};
-    text-decoration: none;
-    display: inline-block;
-    border: 2px solid ${colors.darkGreen};
-    &:hover {
-        background-color: ${colors.white};
-        color: ${colors.darkGreen};
-        cursor: pointer;
-    }
-    pointer-events: ${props => props.disabled && "none"};
-
+  padding: ${spacing[1]} ${spacing[2]};
+  margin: ${spacing[2]} ${spacing[2]};
+  background-color: ${props =>
+    props.disabled ? colors.gray : colors.darkGreen};
+  border-radius: ${radii[2]};
+  font-size: ${fontSizes[1]};
+  color: ${colors.white};
+  text-decoration: none;
+  display: inline-block;
+  border: 2px solid ${colors.darkGreen};
+  &:hover {
+    background-color: ${colors.white};
+    color: ${colors.darkGreen};
+    cursor: pointer;
+  }
+  pointer-events: ${props => props.disabled && "none"};
 `;

src/components/button-link-red.tsx

@@ -2,8 +2,8 @@ import styled from "@emotion/styled";
 import { colors, radii, spacing } from "../constants";
 
 export const Card = styled("div")`
-    border: 1px solid ${colors.darkGreen};
-    border-radius: ${radii[0]};
-    padding: ${spacing[1]};
-    margin: ${spacing[1]};
+  border: 1px solid ${colors.darkGreen};
+  border-radius: ${radii[0]};
+  padding: ${spacing[1]};
+  margin: ${spacing[1]};
 `;

src/components/button-link.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from "@emotion/styled";
-import fastXml from 'fast-xml-parser';
+import fastXml from "fast-xml-parser";
+import pdfJS from "pdfjs-dist";
 import { spacing, colors, fontSizes, radii } from "../constants";
 import { ObservableCell, SessionStore } from "../components";
 
@@ -98,7 +99,7 @@ export class GenerateTable extends React.Component {
 		    	)
 
 		    })
-		
+
 	   } else {
 	   	header = <tr></tr>;
 	   	tableRows = <tr></tr>;
@@ -120,8 +121,11 @@ export default class FileUpload extends React.Component {
 	constructor(props, context) {
 	    super(props, context);
 
+	    pdfJS.GlobalWorkerOptions.workerSrc = 'https://cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.js';
+
 	    this.handleUpload = this.handleUpload.bind(this);
-	    this.handleLoadTable = this.handleLoadTable.bind(this);
+	    this.handleXMLFile = this.handleXMLFile.bind(this);
+	    this.handlePDFFile = this.handlePDFFile.bind(this);
 	    this.handleInputEarnings = this.handleInputEarnings.bind(this);
 	    this.handleManualEarnings = this.handleManualEarnings.bind(this);
 	    this.handleSave = this.handleSave.bind(this);
@@ -159,7 +163,7 @@ export default class FileUpload extends React.Component {
 
 		if ((this.state.userBirthDate) && (this.state.userRetireDate) && (!this.state.manualTable.length)) {
 	 		var tempTable = []
-	 		
+
 	 		for (var i = this.state.userBirthDate; i <= this.state.userRetireDate; i++) {
 	 			var record = {}
 	 			record['year'] = i
@@ -181,14 +185,14 @@ export default class FileUpload extends React.Component {
 	 			earningsRecord: earningsValue
 	 		})
 	 	}
-	 	
+
 	 	if (SessionStore.get('tableArray')) {
 	 		var tableArray = JSON.parse(SessionStore.get('tableArray'))
 	 		this.setState({
-	 			manualTable: tableArray 
+	 			manualTable: tableArray
 	 		})
 	 	}
-	 	
+
 	 }
 
 
@@ -231,7 +235,9 @@ export default class FileUpload extends React.Component {
  	 		if (element['@_startYear'] === modifiedyear) {
  	 			element['osss:FicaEarnings'] = input.target.value
  	 			return true
- 	 		}
+			  } else {
+				return false
+			  }
  	 	})
 
  	 	if (findValue) {
@@ -248,7 +254,7 @@ export default class FileUpload extends React.Component {
  	 }
 
  	 //Parse XML file
-	 handleLoadTable(reader) {
+	 handleXMLFile(reader) {
 	 	 if (fastXml.validate(reader.target.result) === true) {
 				var parsedText = fastXml.parse(reader.target.result, {ignoreAttributes: false})
 				var earningsJSON = JSON.stringify(parsedText)
@@ -259,24 +265,83 @@ export default class FileUpload extends React.Component {
 	 	}
 	}
 
+	//Parse PDF file
+	 handlePDFFile(reader) {
+	 	//Returns first page of document
+	 	var combinedValues = []
+		pdfJS.getDocument(reader.target.result).promise
+		.then(
+			ssaDoc => ssaDoc.getPage(3)).then(earningsPage => earningsPage.getTextContent())
+		.then( (doc) => {
+			doc.items.forEach((item) => {
+
+			  var filter = Number(item.str.replace(",", "").replace(" ",""))
+			  if (!(Number.isNaN(filter))) {
+			    combinedValues.push(filter)
+			  }
+			})
+		})
+		.then(() => {
+		
+		var tempRecord = this.state.defaultRecord
+		do {
+			var newvalue = combinedValues.shift()
+			if (newvalue > 1900) {
+				var currentRecord =  tempRecord['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings']
+				var newrecord = {
+		 	 	 '@_startYear': newvalue,
+		 	 	 '@_endYear': newvalue,
+				 'osss:FicaEarnings': combinedValues.shift(),
+				 'osss:MedicafreEarnings': combinedValues.shift()
+				}
+				
+				 currentRecord.push(newrecord)
+			}
+		} while (combinedValues.length > 0)})
+		.then(() => {
+			var earningsJSON = JSON.stringify(this.state.defaultRecord)
+			SessionStore.push('earnings', earningsJSON)
+			this.setState({
+			 	earningsRecord: this.state.defaultRecord
+			 })
+		})
+	}
+
 	 handleUpload(formResponse) {
 	 	this.setState({
 	 		displayTable: true
 	 	});
 	 	formResponse.preventDefault();
 	 	const file = this.fileInput.current.files[0]
-	 	const name = this.fileInput.current.files[0].name
-	 	const formData = new FormData();
-		formData.append(name, file)
-
+	 	var name = this.fileInput.current.files[0].name
+		name = name.split('.')
+	 	const extension = name[name.length - 1]
 		var reader = new FileReader()
-		reader.readAsText(file);
 
-		reader.onload = (reader) => this.handleLoadTable(reader)	
+		switch (extension) {
+			case 'xml':
+				reader.onload = (reader) => this.handleXMLFile(reader)
+				reader.readAsText(file);
+				break;
+			
+			case 'pdf':
+				reader.onload = (reader) => this.handlePDFFile(reader)
+				reader.readAsArrayBuffer(file)
+				break;
+
+			default:
+				alert("I'm sorry, that file was not recognized.")
+				break;
+		}
+		
+		
+
+		
 	 }
 
 	 //Stores users input for manually entered table to allow for persistence across page changes
 	 handleManualEarnings(input) {
+		// eslint-disable-next-line
 	 	const [type, year, key] = input.target.id.split('_')
 
 	 	var tempManualTable = this.state.manualTable
@@ -292,17 +357,17 @@ export default class FileUpload extends React.Component {
 
  	 //Saves manually entered record to this.state.earningsRecord object, becomes noticable to Observable API
  	 handleSave() {
- 	 	var tempRecord = this.state.earningsRecord ? 
+ 	 	var tempRecord = this.state.earningsRecord ?
  	 	this.state.earningsRecord['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings'].length === this.state.manualTable.length
  	 	? this.state.earningsRecord : this.state.defaultRecord
  	 	:
  	 	this.state.defaultRecord
 
-	 	this.state.manualTable.map((record, i) => {
+	 	this.state.manualTable.forEach((record, i) => {
 	 		var currentRecord = tempRecord['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings']
 	 		var newrecord = {
 		 	 	 '@_startYear': record['year'],
-		 	 	 '@_endYear': record['year'], 
+		 	 	 '@_endYear': record['year'],
 				 'osss:FicaEarnings': record['value']
 			}
 
@@ -311,7 +376,7 @@ export default class FileUpload extends React.Component {
 			} else {
 				currentRecord[i] = newrecord
 			}
-			
+
 	 	})
 
 	 	var arrayJSON = JSON.stringify(this.state.manualTable)
@@ -340,10 +405,10 @@ export default class FileUpload extends React.Component {
 						<UploadLabel htmlFor="inputfile" className="btn">{this.state.buttonText}</UploadLabel>
 						<UploadInput type={this.state.buttonType} id='inputfile' ref={this.fileInput} onChange={this.state.buttonFunction}></UploadInput>
 					</UploadButton>
-					<GenerateTable 
-						parsedXml={this.state.earningsRecord} 
-						handleInputEarnings={this.handleInputEarnings} 
-						manual={this.props.manual} 
+					<GenerateTable
+						parsedXml={this.state.earningsRecord}
+						handleInputEarnings={this.handleInputEarnings}
+						manual={this.props.manual}
 						manualTable={this.state.manualTable}
 						handleManualEarnings={this.handleManualEarnings}
 						handleSave={this.handleSave}
@@ -356,4 +421,4 @@ export default class FileUpload extends React.Component {
 			</div>
 		)
 	}
-}
+}