Convert to function components & React Hooks

[thadk]

The code organization would be a lot clearer if we used function components and React Hooks instead of class components.

We now have useUserState and useUserStateActions hooks to access the state of the app and manipulate it, respectively.

Converted src/pages/* to function components?:

• 404.tsx
• About.tsx
• faq.tsx
• index.tsx
• prescreen-1a.tsx (Background / birthdate entry screen) converts prescreen 1 a, b, and c to functional components (d already … #294
• prescreen-1b.tsx (Earnings screen) Thanks @sashamaryl converts prescreen 1 a, b, and c to functional components (d already … #294
• prescreen-1c.tsx (Employment Status /windfall elimination question & pension specificiation) converts prescreen 1 a, b, and c to functional components (d already … #294
• prescreen-1d.tsc (future earnings) - thanks @dylanesque Hook refactor prescreen-1d #251
• print.tsx
• screen-2.tsx (results with both calculators)
• screen-2a.tsx (Example walkthrough of calculations) - thanks @linesbetween Give user Personalized Live Calculation Walkthrough #141

Other major components:

• src/components/file-upload.tsx (can be separated into individual components)

Feel free to create new component files as you go.

[thadk]

@olena-ageyeva do you want to help with this in early 2020? We are going to try to release everything on Jan 17, so ideally we'd have this sorted out a week and a half before.

[olena-ageyeva]

@thadk Sure. I'd be delighted to. You'd like it to be completed by January 6-7sh, right? It looks like a lot of refactoring work in a short time, but I agree it will significantly simplify the code and it does make sense to do so before the release. Will start working on it now.

[thadk]

Wow, great, whatever you think you can contribute will help.

I just added you to the project, maybe we can work on a (feel free to create) reactHooks branch on the main repository instead of using the forked branch git model so we can collaborate more directly.

An early version to show everyone the concept on Tue Jan 7 when we meet next would be excellent–I'm sure folks will need a bit of introduction to the new way of managing variables, etc.

[thadk]

New way to manage state is proposed in #142 which can be function component and/or hooks-compatible.

[thadk]

If you want to work on this for one of the other files: src/pages/prescreen-1d.tsx look at the two commits here: https://github.com/codeforboston/windfall-elimination/pull/251/files _{(it is currently skipped as has unfinished features: to see this file running for now you need to either go directly to the URL: e.g. https://ssacalculator.org/prescreen-1d/ or enable with the feature toggle GATSBY_SHOW_FUTURE_EARNINGS_PAGE=true npm start)}

Reading this code around the useUserStateActions and useUserState might help too: https://github.com/codeforboston/windfall-elimination/blob/develop/src/pages/screen-2a.tsx

[thadk]

cc: @olena-ageyeva @linesbetween I updated this issue if you'd like to help on it. We also have the example as in the last comment.

[thadk]

Related PR: #294