Skip to content

Commit f14a5c9

Browse files
nvanwittnvanwitt
committed
Added Session Storage for persistance of page-specifc options and earnings table
1 parent 1b65452 commit f14a5c9

21 files changed

+439
-118
lines changed

‎gatsby-browser.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
* See: https://www.gatsbyjs.org/docs/browser-apis/
55
*/
66

7-
// You can delete this file if you're not using it
7+
// You can delete this file if you're not using it

‎gatsby-ssr.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@
44
* See: https://www.gatsbyjs.org/docs/ssr-apis/
55
*/
66

7-
// You can delete this file if you're not using it
7+
// You can delete this file if you're not using it

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"react-helmet": "^5.2.0",
3232
"tesseract.js": "^1.0.14",
3333
"typescript": "^3.3.4000",
34-
"windfall-awareness-notebook-prototype": "https://api.observablehq.com/@thadk/windfall-awareness-notebook-prototype.tgz"
34+
"windfall-awareness-notebook-prototype": "https://api.observablehq.com/@nvanwittenbe/windfall-awareness-notebook-prototype.tgz"
3535
},
3636
"devDependencies": {
3737
"@types/react": "^16.8.8",

‎src/components/button-link-red.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,12 @@ import { ButtonLink } from "../components";
33
import { colors } from "../constants";
44

55
export const ButtonLinkRed = styled(ButtonLink)`
6-
background-color: ${colors.lime};
7-
color: ${colors.white};
8-
&:hover {
9-
background-color: ${colors.lime};
10-
}
6+
background-color: ${colors.white};
7+
color: ${colors.black};
8+
border: 2px solid ${colors.lime};
9+
&:hover {
10+
border-color: ${colors.lime};
11+
background-color: ${colors.lime};
12+
color: ${colors.white}
13+
}
1114
`;

‎src/components/button-link.tsx

+15-13
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,21 @@ import { Link } from "gatsby";
33
import { spacing, colors, fontSizes, radii } from "../constants";
44

55
export const ButtonLink = styled(Link)`
6-
padding: ${spacing[1]} ${spacing[2]};
7-
margin: ${spacing[2]} ${spacing[2]};
8-
background-color: ${props =>
9-
props.disabled ? colors.gray : colors.darkGreen};
10-
font-size: ${fontSizes[1]};
11-
color: ${colors.white};
12-
text-decoration: none;
13-
display: inline-block;
14-
&:hover {
15-
background-color: ${colors.lime};
6+
padding: ${spacing[1]} ${spacing[2]};
7+
margin: ${spacing[2]} ${spacing[2]};
8+
background-color: ${props =>
9+
props.disabled ? colors.gray : colors.darkGreen};
10+
border-radius: ${radii[2]};
11+
font-size: ${fontSizes[1]};
1612
color: ${colors.white};
17-
cursor: pointer;
18-
}
13+
text-decoration: none;
14+
display: inline-block;
15+
border: 2px solid ${colors.darkGreen};
16+
&:hover {
17+
background-color: ${colors.white};
18+
color: ${colors.darkGreen};
19+
cursor: pointer;
20+
}
21+
pointer-events: ${props => props.disabled && "none"};
1922
20-
pointer-events: ${props => props.disabled && "none"};
2123
`;

‎src/components/card.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import styled from "@emotion/styled";
22
import { colors, radii, spacing } from "../constants";
33

44
export const Card = styled("div")`
5-
border: 1px solid ${colors.lightblack};
6-
border-radius: ${radii[0]};
7-
padding: ${spacing[1]};
8-
margin: ${spacing[1]};
5+
border: 1px solid ${colors.darkGreen};
6+
border-radius: ${radii[0]};
7+
padding: ${spacing[1]};
8+
margin: ${spacing[1]};
99
`;

‎src/components/file-upload.jsx

+57-36
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react";
22
import styled from "@emotion/styled";
33
import fastXml from 'fast-xml-parser';
44
import { spacing, colors, fontSizes, radii } from "../constants";
5-
import { ObservableCell } from "../components";
5+
import { ObservableCell, SessionStore } from "../components";
66

77
//Upload page specific css/html
88
export const UploadButton = styled("div")`
@@ -69,11 +69,10 @@ export class GenerateTable extends React.Component {
6969
const earnings = parsedXml['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings'];
7070
header = <tr><TableHeader>Year</TableHeader ><TableHeader>Amount</TableHeader ></tr>;
7171
tableRows = earnings.map((earning, i) => {
72-
this.props.updateCounter(earning['osss:FicaEarnings'])
7372
return(
7473
<TableRow key={i}>
7574
<td><label>{earning['@_startYear']}</label></td>
76-
<td><input defaultValue={earning['osss:FicaEarnings']}></input></td>
75+
<td><input id={earning['@_startYear']} defaultValue={earning['osss:FicaEarnings']} onChange={this.props.handleInputEarnings}></input></td>
7776
</TableRow>
7877
)
7978
});
@@ -100,54 +99,77 @@ export default class FileUpload extends React.Component {
10099

101100
this.handleSubmit = this.handleSubmit.bind(this);
102101
this.handleLoadTable = this.handleLoadTable.bind(this);
103-
this.handleYearsChange = this.handleYearsChange.bind(this);
102+
this.handleInputEarnings = this.handleInputEarnings.bind(this);
103+
this.assertLoad = this.assertLoad.bind(this);
104104
this.customObserver = this.customObserver.bind(this);
105-
this.updateCounter = this.updateCounter.bind(this);
106105
this.fileInput = React.createRef();
107106

108107
this.state = {
109-
earningsRecord: '',
110-
displayTable: false,
111-
yearsSE: 0,
112-
counter: [],
108+
elementLoaded: false,
109+
earningsRecord: undefined,
110+
displayTable: false
113111
};
114112
}
115113

116-
componentDidUpdate(nextProps, nextState) {
117-
this.testEarning.value = this.state.yearsSE;
118-
if (nextState.earningsRecord !== this.state.earningsRecord) {
119-
this.setState({
120-
counter: []
121-
})
122-
}
123-
114+
componentDidUpdate(prevProps, prevState) {
115+
if (this.state.elementLoaded) {
116+
this.parseXML.value = this.state.earningsRecord
117+
}
124118
}
125119

126-
customObserver() {
120+
componentDidMount() {
121+
if (SessionStore.get('earnings')) {
122+
var earningsValue = JSON.parse(SessionStore.get('earnings'))
123+
this.setState({
124+
earningsRecord: earningsValue
125+
})
126+
127+
}
128+
}
129+
130+
assertLoad() {
131+
this.setState({
132+
elementLoaded: true
133+
})
134+
}
135+
136+
customObserver(test) {
127137
return {fulfilled: (value) => {
128-
this.testEarning = value
138+
this.parseXML = value
139+
this.assertLoad()
129140
}}
130141
}
131142

132-
updateCounter(earning) {
133-
if (earning > 1000 & !this.state.counter.includes(earning)){
134-
this.state.counter.push(earning)
135-
this.setState({
136-
yearsSE: this.state.counter.length
137-
})
143+
handleInputEarnings(input) {
144+
var modifiedEarnings = this.state.earningsRecord
145+
var earnings = modifiedEarnings['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings']
146+
var modifiedyear = input.target.id
147+
148+
var findValue = earnings.find((element) => {
149+
if (element['@_startYear'] === modifiedyear) {
150+
element['osss:FicaEarnings'] = input.target.value
151+
return true
152+
}
153+
})
154+
155+
if (findValue) {
156+
modifiedEarnings['osss:OnlineSocialSecurityStatementData']['osss:EarningsRecord']['osss:Earnings'] = earnings
157+
158+
var earningsJSON = JSON.stringify(modifiedEarnings)
159+
SessionStore.push('earnings', earningsJSON)
160+
161+
this.setState({
162+
earningsRecord: modifiedEarnings
163+
})
138164
}
139-
//console.log(this.state.counter)
140-
}
141165

142-
handleYearsChange(e) {
143-
this.setState({
144-
yearsSE: e.target.value
145-
})
146-
}
166+
}
147167

148168
handleLoadTable(reader) {
149169
if (fastXml.validate(reader.target.result) === true) {
150170
var parsedText = fastXml.parse(reader.target.result, {ignoreAttributes: false})
171+
var earningsJSON = JSON.stringify(parsedText)
172+
SessionStore.push('earnings', earningsJSON)
151173
this.setState({
152174
earningsRecord: parsedText
153175
})
@@ -164,7 +186,6 @@ export default class FileUpload extends React.Component {
164186
const formData = new FormData();
165187
formData.append(name, file)
166188

167-
168189
var reader = new FileReader()
169190
reader.readAsText(file);
170191

@@ -178,10 +199,10 @@ export default class FileUpload extends React.Component {
178199
<UploadLabel htmlFor="inputfile" className="btn">Upload Earnings Record</UploadLabel>
179200
<UploadInput type='file' id='inputfile' ref={this.fileInput} onChange={this.handleSubmit}></UploadInput>
180201
</UploadButton>
181-
<GenerateTable parsedXml={this.state.earningsRecord} updateCounter={this.updateCounter} counter={this.state.counter} />
182-
<div><ObservableCell cellname='mutable yearsSE' customObserver={this.customObserver} /></div>
202+
<GenerateTable parsedXml={this.state.earningsRecord} handleInputEarnings={this.handleInputEarnings} />
203+
<div><ObservableCell cellname="mutable parsedXmlFileText" customObserver={this.customObserver}/></div>
183204
<div style={{display: 'none'}}><ObservableCell cellname='calculationDisplay' /></div>
184205
</div>
185206
)
186207
}
187-
}
208+
}

0 commit comments

Comments
 (0)