chore(client): migrate to React 17 (freeCodeCamp#58355)

Co-authored-by: Sem Bauke <[email protected]>

Author: ojeytonwilliams

client/package.json

@@ -49,12 +49,11 @@
     "@fortawesome/free-solid-svg-icons": "6.7.1",
     "@fortawesome/react-fontawesome": "0.2.2",
     "@freecodecamp/loop-protect": "3.0.0",
-    "@freecodecamp/react-calendar-heatmap": "1.1.0",
     "@freecodecamp/ui": "3.1.1",
+    "@gatsbyjs/reach-router": "1.3.9",
     "@growthbook/growthbook-react": "0.20.0",
     "@headlessui/react": "1.7.19",
     "@loadable/component": "5.16.3",
-    "@reach/router": "1.3.4",
     "@redux-devtools/extension": "3.3.0",
     "@redux-saga/core": "^1.2.2",
     "@stripe/react-stripe-js": "1.16.5",
@@ -84,7 +83,7 @@
     "lodash": "4.17.21",
     "lodash-es": "4.17.21",
     "micromark": "4.0.0",
-    "monaco-editor": "0.28.1",
+    "monaco-editor": "0.33.0",
     "nanoid": "3.3.7",
     "normalize-url": "4.5.1",
     "path-browserify": "1.0.1",
@@ -94,16 +93,17 @@
     "prop-types": "15.8.1",
     "qrcode.react": "^3.1.0",
     "query-string": "7.1.3",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
+    "react": "17.0.2",
+    "react-calendar-heatmap": "1.9.0",
+    "react-dom": "17.0.2",
     "react-final-form": "6.5.9",
     "react-gtm-module": "2.0.11",
     "react-helmet": "6.1.0",
     "react-hotkeys": "2.0.0",
     "react-i18next": "12.3.1",
     "react-instantsearch": "7.13.6",
     "react-instantsearch-core": "7.13.6",
-    "react-monaco-editor": "0.40.0",
+    "react-monaco-editor": "0.48.0",
     "react-redux": "7.2.9",
     "react-reflex": "4.1.0",
     "react-responsive": "9.0.2",
@@ -134,15 +134,15 @@
     "@testing-library/react": "12.1.5",
     "@total-typescript/ts-reset": "^0.5.0",
     "@types/canvas-confetti": "^1.6.0",
+    "@types/gatsbyjs__reach-router": "1.3.0",
     "@types/jest": "29.5.12",
     "@types/js-yaml": "4.0.5",
     "@types/loadable__component": "5.13.8",
     "@types/lodash-es": "^4.17.6",
     "@types/node-fetch": "2",
     "@types/prismjs": "^1.26.0",
-    "@types/reach__router": "1.3.15",
-    "@types/react": "16.14.56",
-    "@types/react-dom": "16.9.24",
+    "@types/react": "17.0.83",
+    "@types/react-dom": "17.0.19",
     "@types/react-gtm-module": "2.0.3",
     "@types/react-helmet": "6.1.11",
     "@types/react-redux": "7.1.33",
@@ -164,9 +164,9 @@
     "jest-json-schema-extended": "1.0.1",
     "joi": "17.12.2",
     "js-yaml": "4.1.0",
-    "monaco-editor-webpack-plugin": "4.2.0",
+    "monaco-editor-webpack-plugin": "7.0.1",
     "node-fetch": "2.7.0",
-    "react-test-renderer": "16.14.0",
+    "react-test-renderer": "17.0.2",
     "redux-saga-test-plan": "4.0.6",
     "serve": "13.0.4",
     "ts-node": "10.9.2",

client/src/client-only-routes/show-unsubscribed.tsx

@@ -1,4 +1,4 @@
-import type { RouteComponentProps } from '@reach/router';
+import type { RouteComponentProps } from '@gatsbyjs/reach-router';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';

client/src/components/Donation/donation-modal.tsx

@@ -1,4 +1,4 @@
-import { WindowLocation } from '@reach/router';
+import { WindowLocation } from '@gatsbyjs/reach-router';
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
 import { goToAnchor } from 'react-scrollable-anchor';

client/src/components/FourOhFour/index.tsx

@@ -1,4 +1,4 @@
-import { RouteComponentProps } from '@reach/router';
+import { RouteComponentProps } from '@gatsbyjs/reach-router';
 import React from 'react';
 import Helmet from 'react-helmet';
 import { useTranslation } from 'react-i18next';

client/src/components/create-redirect.ts

@@ -1,5 +1,5 @@
 import { navigate } from 'gatsby';
-import type { RouteComponentProps } from '@reach/router';
+import type { RouteComponentProps } from '@gatsbyjs/reach-router';
 
 const createRedirect =
   (to = '/'): ((_props: RouteComponentProps) => JSX.Element | null) =>

client/src/components/profile/components/heat-map.tsx

@@ -1,6 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import CalendarHeatMap from '@freecodecamp/react-calendar-heatmap';
+import CalendarHeatMap from 'react-calendar-heatmap';
 // TODO: Check if we can import { addDays, addMonths ... } from 'date-fns'
 // without bundling all of the package then we can remove the disable-next-line
 // comments.
@@ -19,7 +19,7 @@ import { useTranslation } from 'react-i18next';
 import ReactTooltip from 'react-tooltip';
 import { Row, Spacer } from '@freecodecamp/ui';
 
-import '@freecodecamp/react-calendar-heatmap/dist/styles.css';
+import 'react-calendar-heatmap/dist/styles.css';
 import './heatmap.css';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

client/src/components/search/with-instant-search.tsx

@@ -1,5 +1,5 @@
-import { Location } from '@reach/router';
-import type { WindowLocation } from '@reach/router';
+import { Location } from '@gatsbyjs/reach-router';
+import type { WindowLocation } from '@gatsbyjs/reach-router';
 import type { SearchOptions } from 'instantsearch.js';
 import algoliasearch, { type SearchClient } from 'algoliasearch/lite';
 import React, { useEffect, useRef } from 'react';

client/src/pages/404.tsx

@@ -1,4 +1,4 @@
-import { Router } from '@reach/router';
+import { Router } from '@gatsbyjs/reach-router';
 import { withPrefix } from 'gatsby';
 import React from 'react';
 

client/src/pages/certification.tsx

@@ -1,4 +1,4 @@
-import { Router } from '@reach/router';
+import { Router } from '@gatsbyjs/reach-router';
 import { withPrefix } from 'gatsby';
 import React from 'react';
 

client/src/pages/challenges.test.tsx

@@ -2,7 +2,7 @@ import {
   createHistory,
   createMemorySource,
   LocationProvider
-} from '@reach/router';
+} from '@gatsbyjs/reach-router';
 import { render } from '@testing-library/react';
 import { navigate, withPrefix } from 'gatsby';
 import React from 'react';