Upgrade React to v18 (#138)

* Upgrades react

* Prevent Next.js router scroll on navigate (filter selections)

* Upgrades

* Remove Enzyme

* Clean out unused dependencies

* Add back prettier cli

* Upgrade Remixicon

Author: jonkafton

.npmrc

@@ -39,56 +39,38 @@
   "homepage": "https://github.com/mitodl/course-search-utils#readme",
   "dependencies": {
     "@mitodl/open-api-axios": "2024.9.16",
-    "@remixicon/react": "4.0.1",
+    "@remixicon/react": "^4.2.0",
     "axios": "^1.6.7",
-    "fuse.js": "^7.0.0",
-    "query-string": "^6.13.1"
+    "fuse.js": "^7.0.0"
   },
   "devDependencies": {
+    "@babel/preset-typescript": "^7.25.7",
     "@swc/core": "^1.5.7",
     "@swc/jest": "^0.2.36",
-    "@testing-library/react": "12",
-    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react": "15",
     "@testing-library/user-event": "^14.5.2",
-    "@types/enzyme": "^3.10.7",
     "@types/jest": "^29.0.1",
-    "@types/lodash": "^4.14.162",
-    "@types/lodash.uppercase": "^4.3.9",
     "@types/next": "^9.0.0",
-    "@types/node": "^14.6",
-    "@types/react": "16.14.62",
-    "@types/react-dom": "16.9.24",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
-    "babel-eslint": "10.x",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.4",
-    "eslint": "^8.56.0",
-    "eslint-config-google": "0.x",
+    "eslint": "8.57.1",
     "eslint-config-mitodl": "^2.0.0",
-    "eslint-plugin-babel": "5.x",
-    "eslint-plugin-flow-vars": "^0.5.0",
-    "eslint-plugin-flowtype": "4.x",
-    "eslint-plugin-mocha": "6.x",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "history": "^5.3.0",
-    "history-v4": "npm:history@^4.9",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "jest": "^29.0.3",
-    "jest-environment-jsdom": "^29.0.3",
-    "jest-fetch-mock": "^3.0.3",
+    "jest-environment-jsdom": "^29.7.0",
     "next": "^14.2.7",
-    "prettier-eslint-cli": "^7.1.0",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "prettier-eslint-cli": "^8.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-router": "^6.22.2",
     "tiny-invariant": "^1.3.3",
     "ts-node": "^10.9.2",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
     "@types/history": "^4.9",
-    "history": "^4.9 || ^5.0.0",
     "next": "^14.2.7",
     "react": "^16.13.1",
     "react-router": "^6.22.2"

package.json

@@ -39,11 +39,14 @@ function FilterableFacet(props: Props) {
 
   const [filterText, setFilterText] = useState("")
 
-  const handleFilterInput = useCallback(e => {
-    e.preventDefault()
-    const filterText = e.target.value || ""
-    setFilterText(filterText)
-  }, [])
+  const handleFilterInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      e.preventDefault()
+      const filterText = e.target.value || ""
+      setFilterText(filterText)
+    },
+    []
+  )
 
   const filteredResults = useMemo(() => {
     return filterText ?

src/facet_display/FilterableFacet.tsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks/dom"
+import { renderHook, act } from "@testing-library/react"
 import useInfiniteSearch from "./useInfiniteSearch"
 
 /**

src/hooks/useInfiniteSearch.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-template */
 import React from "react"
-import { renderHook, act } from "@testing-library/react-hooks/dom"
+import { renderHook, act } from "@testing-library/react"
 import { useResourceSearchParams } from "./useValidatedSearchParams"
 import type {
   UseResourceSearchParamsProps,

src/hooks/useValidatedSearchParams.test.tsx

@@ -48,9 +48,9 @@ const useSearchParams = (): [URLSearchParams, SetSearchParams] => {
       searchParamsRef.current = newParams
 
       if (hasNavigatedRef.current) {
-        router.replace(`${pathname}?${newParams}`)
+        router.replace(`${pathname}?${newParams}`, { scroll: false })
       } else {
-        router.push(`${pathname}?${newParams}`)
+        router.push(`${pathname}?${newParams}`, { scroll: false })
       }
 
       hasNavigatedRef.current = true

src/next/useSearchParams.ts

@@ -1,4 +1,4 @@
-import { renderHook, act } from "@testing-library/react-hooks/dom"
+import { renderHook, act } from "@testing-library/react"
 import React from "react"
 import { MemoryRouter, useNavigate } from "react-router"
 import type { MemoryRouterProps, NavigateFunction } from "react-router"

src/react-router/useSearchParams.test.tsx

@@ -1,13 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import Enzyme from "enzyme"
-import Adapter from "enzyme-adapter-react-16"
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-require("jest-fetch-mock").enableMocks()
-
-Enzyme.configure({ adapter: new Adapter() })
-
 process.env = {
   ...process.env,
   SEARCH_API_URL: "http://search-the-planet.example.com/search"