Refactor Class Components to use Hooks

[HorusGoul]

There are many components in the app that use React Classes instead of Hooks, and it would be best to migrate all of the components to use hooks before implementing new features.

There are two kinds of components in the app:

• Stateful components. These will require you to use the new hooks (useState, useEffect...). Migrating them may be tricky in some cases because there are some bad practices in existing components.

• Stateless components. If you're new to React, start with these as they will only require you to use a function instead of a class.

Please a Pull Request for each component in case you decide to refactor more than one.

P.S.: Feel free to ask for guidance if you find trouble.

[JacobMGEvans]

Greetings,
If you are interested we can "Raid" your repository, there would be one big PR from our Organization, for a large specific task/problem domain.

We would need constant contact with a maintainer. We prefer using Discord https://discord.gg/xkdkAJZsBR

Let me know if you are interested.
You can read more about what we are doing here: https://github.com/OpenSourceRaidGuild/tutorial-quest
This is also an example of how we work and the workflow: HospitalRun/hospitalrun-frontend#2516

cc: @emma_r_slight @nobrayner @mpeyper

[mpeyper]

@HorusGoul, just to add a bit about the "one big PR" thing, the raid will have many PRs (probably one per component in this case) into our fork which we review and make suggestions so by the time that commit hits your "one big PR", there is less chance of there being an issue.

Of course you are welcome to also watch the raid PRs and comment on them directly too if you prefer.

[HorusGoul]

Sounds incredible, thank you folks ❤️

Let me know if I can be of any help!

[HorusGoul]

Refactor completed thanks to the Open Source Raid Guild in #28 <3