codeforboston / codeforboston/windfall-elimination

Convert to function components & React Hooks

Open
#135 7 comments 0 reactions 0 assignees View on GitHub
help wanted
Dominant language
JavaScript
Stars
23
Forks
44
PR merge metrics
No merged PRs in 30d

Description

The code organization would be a lot clearer if we used [function components](https://reactjs.org/docs/components-and-props.html) and [React Hooks](https://reactjs.org/docs/hooks-intro.html) 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/*`](https://github.com/codeforboston/windfall-elimination/tree/develop/src/pages) to function components?:
- [x] 404.tsx
- [x] About.tsx
- [x] faq.tsx
- [x] index.tsx
- [x] prescreen-1a.tsx (Background / birthdate entry screen) #294
- [x] prescreen-1b.tsx (Earnings screen) Thanks @sashamaryl #294
- [x] prescreen-1c.tsx (Employment Status /windfall elimination question & pension specificiation) #294
- [x] prescreen-1d.tsc (future earnings) - thanks @dylanesque #251
- [ ] print.tsx
- [ ] screen-2.tsx (results with both calculators)
- [x] screen-2a.tsx (Example walkthrough of calculations) - thanks @linesbetween #141

Other major components:
- [ ] [`src/components/file-upload.tsx`](https://github.com/codeforboston/windfall-elimination/blob/develop/src/components/file-upload.tsx) (can be separated into individual components)

Feel free to create new component files as you go.

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reviewing the remaining class components in src/pages/print.tsx and src/pages/screen-2.tsx, then inspect src/components/file-upload.tsx and the existing useUserState and useUserStateActions hooks. Convert the remaining components to function components using those hooks, including any separated file-upload components, and confirm no listed class components remain.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.