codeforboston / codeforboston/windfall-elimination
Convert to function components & React Hooks
- 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