Run with React 18

[eps1lon]

I don't recommend merging this PR right now. You should carefully audit compatibility of each library used. And of course wait for React 18 to become stable. For example, @reach/router is using componentWillReceiveProps which is deprecated generally and more likely to cause actual problems with concurrent rendering.

Description of changes

Uses React 18 and fixes failing tests.

The first commit should be merged separately. It prevents leaking of tasks between tests when a snapshot test is performed.

https://github.com/OperationCode/front-end/pull/1541#discussion_r751079118

Issue Resolved

https://twitter.com/kylemh_/status/1460717366116073476

Screenshots/GIFs

What's missing

e2e tests fail due to hydration mismatches

login

For example, https://github.com/OperationCode/front-end/blob/e0e6dc0b4e33ec1b6bda697c9d4529bb81c71c44/components/Nav/Nav.js#L45 causes an hydration mismatch because the server renders the UI for non-logged in users but the client renders the logged-in view. This was causing hydration mismatches in React 17 as well though.

For React 18 you need to find a way to ignore these console errors and the dev overlay added by next (since the dev overlay acts as a modal).

[vercel[bot]]

@eps1lon is attempting to deploy a commit to the Operation Code Team on Vercel.

A member of the Team first needs to authorize it.

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

storybook – ./

🔍 Inspect: https://vercel.com/operation-code/storybook/3Jb51orBcpE82oD6YCinekwJK7f2
✅ Preview: https://storybook-git-fork-eps1lon-react-18-operation-code.vercel.app

[cypress[bot]]

---

Test summary

69 • 4 • 1 • 8 • 3

---

Run details

Project	operation_code
Status	Failed
Commit	de0f2d9118
Started	Jul 23, 2022 3:00 PM
Ended	Jul 23, 2022 3:05 PM
Duration	05:05 💡
OS	Linux Debian - 10.11
Browser	Chrome 100

View run in Cypress Dashboard ➡️

---

Failures

	profile/update.spec.js		2
1	profile/update (from login) > should route to profile after completing entire profile update (happy path)
2	profile/update (from login) [server errors] > should render an uncaught server error
	profile/change_password.spec.js		1
1	change_password > should be able to change with valid passwords
	podcast.spec.js		1
1	podcast > renders many podcast cards

---

Flakiness

	join.spec.js		2
1	join > should NOT be able to register with password missing number
2	join > should be able to register with valid data
	login.spec.js		1
1	login > should be able to login with valid credentials

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
operation-code	✅ Ready (Inspect)	Visit Preview	Jul 23, 2022 at 3:03PM (UTC)
storybook	✅ Ready (Inspect)	Visit Preview	Jul 23, 2022 at 3:03PM (UTC)

[kylemh]

Sorted in #1650 thanks for trailblazing with us @eps1lon