Migrate to react 18 and update dependencies (#317)

This PR updates react and related packages to react v18. It also updates all dependencies to their latest version. More * Upgrading prettier to v3 led to me having to dump pretty-quick (which is incompatible with prettier v3) and replacing it with lint-staged. * fix rendering mismatch SSR/client side * chore(deps): bump react and related deps to 18 * fix: update source url *after* first render * chore(deps): bump minor and patch (dev)deps * chore(deps): bump @kth/kth-node-web-common to 9.0.1 * chore(deps-dev): bump prettier, rm pretty-quick, install lint-staged * docs: update build-and-release in readme * chore(deps): bump axios to 1.x * chore(deps): remove unused dep mobx and mobx-react * chore(deps): bump kth-style to 9.0.11 * chore(deps-dev): update patch deps-dev * chore(audit): fix postcss
KTH · Dec 13, 2023 · e406f79 · e406f79
1 parent 322b93c
commit e406f79
Show file tree

Hide file tree

Showing 29 changed files with 2,002 additions and 1,514 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -1,3 +1,3 @@
 {
-  "extends": ["@kth/eslint-config-kth", "plugin:cypress/recommended"]
+  "extends": ["@kth/eslint-config-kth"]
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-./node_modules/.bin/pretty-quick --staged
+npx lint-staged
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ The course information project (KIP) is an initiative at KTH that was launched i
 
 A course memo is an actual plan for taking the course. A course memo help students to plan and prepare for all the learning activities during the course offering. A course memo contains information about the goals of the course, activities, preparations, detailed information about the examination, and contacts. It is particularly important for students just before the start of the course. A teacher, or a course coordinator, creates a course memo, and it must be published no later than by course the start.
 
-Kurs-pm-web is a microservice with the public view of course memos. It uses [React](https://reactjs.org/), [MobX](https://mobx.js.org/), and is based on [node-web](https://github.com/KTH/node-web).
+Kurs-pm-web is a microservice with the public view of course memos. It uses [React](https://reactjs.org/) and is based on [node-web](https://github.com/KTH/node-web).
 
 ### API:s
 
@@ -170,7 +170,7 @@ docker-compose up
 
 ## Deploy
 
-The deployment process is described in [Build, release, deploy](https://confluence.sys.kth.se/confluence/x/aY3_Ag). Technical details, such as configuration, is described in [How to deploy your 🐳 application using Cellus-Registy](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-DEPLOY.md) and [🔧 How To Configure Your Application For The Pipeline](https://gita.sys.kth.se/Infosys/cellus-registry/blob/master/HOW-TO-CONFIGURE.md).
+The deployment process is described in [Om kursen: Release till produktion](https://confluence.sys.kth.se/confluence/x/xIjCCg).
 
 ### Edit secrets.env
 
@@ -197,6 +197,10 @@ APPINSIGHTS_INSTRUMENTATIONKEY=[key]
 REDIS_URI=[uri]
 ```
 
+## Pre-\*\*-git-hooks
+
+We use `husky` to run [pre-commit](/.husky/pre-commit) and [pre-push](/.husky/pre-push) hooks and `lint-staged` to run eslint and prettier.
+
 ## Nomenclature
 
 | Name             | Aliases           | Example                                       | Notes                                              |

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "kurs-pm-web",
   "version": "1.0.0",
-  "description": "Kurs-pm-data-web is a microservice with the public view of course memos. It uses React, MobX, and is based on KTH/node-web.",
+  "description": "Kurs-pm-data-web is a microservice with the public view of course memos. It uses React, and is based on KTH/node-web.",
   "main": "app.js",
   "private": true,
   "license": "MIT",
@@ -33,14 +33,14 @@
   "dependencies": {
     "@kth/api-call": "^4.0.40",
     "@kth/kth-node-response": "^1.0.7",
-    "@kth/kth-node-web-common": "^8.1.1",
-    "@kth/kth-reactstrap": "^0.4.66",
+    "@kth/kth-node-web-common": "^9.0.1",
+    "@kth/kth-reactstrap": "^0.4.78",
     "@kth/log": "^4.0.7",
-    "@kth/monitor": "^4.1.1",
+    "@kth/monitor": "^4.2.1",
     "@kth/server": "^4.0.4",
-    "@kth/session": "^3.0.8",
-    "applicationinsights": "^2.7.3",
-    "axios": "^0.27.2",
+    "@kth/session": "^3.0.9",
+    "applicationinsights": "^2.9.1",
+    "axios": "^1.6.2",
     "body-parser": "^1.20.2",
     "cookie-parser": "^1.4.6",
     "date-fns": "^2.30.0",
@@ -53,51 +53,49 @@
     "kth-node-configuration": "^2.0.13",
     "kth-node-express-routing": "^2.0.16",
     "kth-node-i18n": "^1.0.18",
-    "kth-node-redis": "^3.1.47",
-    "kth-style": "^8.0.59",
-    "mobx": "^6.10.0",
-    "mobx-react": "^7.6.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-icons": "^4.10.1",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "reactstrap": "^8.10.1",
-    "uuid": "^9.0.0"
+    "kth-node-redis": "^3.2.0",
+    "kth-style": "^9.0.11",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "react-router": "^6.20.0",
+    "react-router-dom": "^6.20.0",
+    "reactstrap": "^9.2.1",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.22.10",
-    "@babel/core": "^7.22.10",
-    "@babel/eslint-parser": "^7.22.10",
-    "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
-    "@babel/preset-react": "^7.22.5",
-    "@babel/runtime": "^7.22.11",
-    "@kth/eslint-config-kth": "^3.0.14",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^12.1.5",
-    "@types/jest": "^29.5.4",
-    "babel-jest": "^29.6.3",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.5",
+    "@babel/eslint-parser": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/runtime": "^7.23.5",
+    "@kth/eslint-config-kth": "^3.1.0",
+    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
-    "concurrently": "^8.2.1",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
-    "eslint": "^8.47.0",
+    "eslint": "^8.54.0",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
-    "jest": "^29.6.3",
-    "jest-environment-jsdom": "29.6.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "29.7.0",
+    "lint-staged": "^15.1.0",
     "mini-css-extract-plugin": "^2.7.6",
     "nodemon": "^3.0.1",
     "null-loader": "^4.0.1",
     "path": "^0.12.7",
-    "prettier": "^2.8.8",
-    "pretty-quick": "^3.1.3",
-    "sass": "^1.66.1",
+    "prettier": "^3.1.0",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "set-value": "^4.1.0",
     "terser-webpack-plugin": "^5.3.9",
-    "webpack": "^5.88.2",
+    "webpack": "^5.89.0",
     "webpack-cli": "^5.1.4"
   },
   "babel": {
@@ -116,6 +114,12 @@
     "singleQuote": true,
     "trailingComma": "es5"
   },
+  "lint-staged": {
+    "**/*.{js,jsx}": [
+      "npx prettier --write",
+      "npx eslint --fix"
+    ]
+  },
   "engines": {
     "node": "18"
   }

diff --git a/public/js/app/app.jsx b/public/js/app/app.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM from 'react-dom/client'
 import { BrowserRouter, Routes, Route } from 'react-router-dom'
 
 import { WebContextProvider } from './context/WebContext'
@@ -28,7 +28,7 @@ function _renderOnClientSide() {
   const app = <BrowserRouter basename={basename}>{appFactory({}, webContext)}</BrowserRouter>
 
   const domElement = document.getElementById('app')
-  ReactDOM.hydrate(app, domElement)
+  ReactDOM.hydrateRoot(domElement, app)
 }
 
 function appFactory(applicationStore, context) {

diff --git a/public/js/app/components/CoursePresentation.jsx b/public/js/app/components/CoursePresentation.jsx
@@ -3,10 +3,10 @@ import HtmlWrapper from './HtmlWrapper'
 
 const CoursePresentation = ({ courseImageUrl = '', introText = '', labels }) => (
   <section className="d-print-none" aria-labelledby="course-presentation">
-    <h2 id="course-presentation" className="sr-only">
+    <h2 id="course-presentation" className="visually-hidden">
       {labels.coursePresentation}
     </h2>
-    <img id="course-presentation-image" className="float-sm-left" src={courseImageUrl} alt="" />
+    <img id="course-presentation-image" className="float-sm-start" src={courseImageUrl} alt="" />
     <article aria-labelledby="course-presentation">
       <HtmlWrapper html={introText} />
     </article>

diff --git a/public/js/app/components/__tests__/AboutCourseContacts.test.js b/public/js/app/components/__tests__/AboutCourseContacts.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import AboutCourseContacts from '../AboutCourseContacts'
 

diff --git a/public/js/app/components/__tests__/AboutHeader.test.js b/public/js/app/components/__tests__/AboutHeader.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import AboutHeader from '../AboutHeader'
 

diff --git a/public/js/app/components/__tests__/ContentHead.test.js b/public/js/app/components/__tests__/ContentHead.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import { ContentHead, ExtraHeaderHead, SubSectionHeaderMessage } from '../ContentHead'
 

diff --git a/public/js/app/components/__tests__/CourseContacts.test.js b/public/js/app/components/__tests__/CourseContacts.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CourseContacts from '../CourseContacts'
 

diff --git a/public/js/app/components/__tests__/CourseFacts.test.js b/public/js/app/components/__tests__/CourseFacts.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CourseFacts from '../CourseFacts'
 

diff --git a/public/js/app/components/__tests__/CourseHeader.test.js b/public/js/app/components/__tests__/CourseHeader.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CourseHeader from '../CourseHeader'
 

diff --git a/public/js/app/components/__tests__/CourseLinks.test.js b/public/js/app/components/__tests__/CourseLinks.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CourseLinks from '../CourseLinks'
 

diff --git a/public/js/app/components/__tests__/CourseMemoLinks.test.js b/public/js/app/components/__tests__/CourseMemoLinks.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CourseMemoLinks from '../CourseMemoLinks'
 

diff --git a/public/js/app/components/__tests__/CoursePresentation.test.js b/public/js/app/components/__tests__/CoursePresentation.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import CoursePresentation from '../CoursePresentation'
 

diff --git a/public/js/app/components/__tests__/NewSectionEditor.test.js b/public/js/app/components/__tests__/NewSectionEditor.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 import { WebContextProvider } from '../../context/WebContext'
 
 import ContentFromNewSectionEditor from '../ContentFromNewSectionEditor'

diff --git a/public/js/app/components/__tests__/Section.test.js b/public/js/app/components/__tests__/Section.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import Section from '../Section'
 

diff --git a/public/js/app/components/__tests__/SideMenu.test.js b/public/js/app/components/__tests__/SideMenu.test.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
+import '@testing-library/jest-dom'
 
 import SideMenu from '../SideMenu'
 

diff --git a/public/js/app/pages/AboutCourseMemo.jsx b/public/js/app/pages/AboutCourseMemo.jsx
@@ -1,6 +1,5 @@
-import { Breadcrumbs, HeadingAsteriskModal } from '@kth/kth-reactstrap/dist/components/utbildningsinfo'
+import { HeadingAsteriskModal } from '@kth/kth-reactstrap/dist/components/utbildningsinfo'
 import React, { useEffect, useRef, useState } from 'react'
-import ReactDOM from 'react-dom'
 import { Col, Container, Row } from 'reactstrap'
 
 import { useSearchParams } from 'react-router-dom'
@@ -21,16 +20,7 @@ import AboutAlert from '../components/AboutAlert'
 import AboutCourseContacts from '../components/AboutCourseContacts'
 import AboutHeader from '../components/AboutHeader'
 import SideMenu from '../components/SideMenu'
-
-function renderBreadcrumbsIntoKthHeader(courseCode, languageAbbr) {
-  const breadcrumbContainer = document.getElementById('breadcrumbs-header')
-  if (breadcrumbContainer) {
-    ReactDOM.render(
-      <Breadcrumbs include={'aboutCourse'} courseCode={courseCode} language={languageAbbr} />,
-      breadcrumbContainer
-    )
-  }
-}
+import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 function removeKeysAndFlattenToArray(memosWithRoundKeys) {
   return Object.keys(memosWithRoundKeys).map(roundid => memosWithRoundKeys[roundid])

diff --git a/public/js/app/pages/AboutCourseMemos.jsx b/public/js/app/pages/AboutCourseMemos.jsx
@@ -1,24 +1,13 @@
 import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
 
 import { Container, Row, Col } from 'reactstrap'
-import { Breadcrumbs } from '@kth/kth-reactstrap/dist/components/utbildningsinfo'
 
 import i18n from '../../../../i18n'
 import { sideMenuBackLink } from '../util/links'
 import { useWebContext } from '../context/WebContext'
 
 import SideMenu from '../components/SideMenu'
-
-function renderBreadcrumbsIntoKthHeader(courseCode, languageAbbr) {
-  const breadcrumbContainer = document.getElementById('breadcrumbs-header')
-  if (breadcrumbContainer) {
-    ReactDOM.render(
-      <Breadcrumbs include={'aboutCourse'} courseCode={courseCode} language={languageAbbr} />,
-      breadcrumbContainer
-    )
-  }
-}
+import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 function AboutCourseMemos() {
   const [webContext] = useWebContext()

diff --git a/public/js/app/pages/CourseMemo.jsx b/public/js/app/pages/CourseMemo.jsx
@@ -1,9 +1,7 @@
-import React, { useEffect } from 'react'
-import ReactDOM from 'react-dom'
+import React, { useEffect, useState } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
 
 import { Container, Row, Col } from 'reactstrap'
-import { Breadcrumbs } from '@kth/kth-reactstrap/dist/components/utbildningsinfo'
 
 import i18n from '../../../../i18n'
 import { concatMemoName, memoNameWithoutApplicationCode, seasonStr, formatCredits } from '../util/helpers'
@@ -23,16 +21,7 @@ import CourseMemoLinks from '../components/CourseMemoLinks'
 import CoverPage from '../components/print/CoverPage'
 import Contacts from '../components/print/Contacts'
 import AllSections from '../components/AllSections'
-
-function renderBreadcrumbsIntoKthHeader(courseCode, languageAbbr) {
-  const breadcrumbContainer = document.getElementById('breadcrumbs-header')
-  if (breadcrumbContainer) {
-    ReactDOM.render(
-      <Breadcrumbs include={'aboutCourse'} courseCode={courseCode} language={languageAbbr} />,
-      breadcrumbContainer
-    )
-  }
-}
+import { renderBreadcrumbsIntoKthHeader } from '../util/breadcrumbs'
 
 const determineContentFlexibility = () => {
   const lastColLastElem = document.getElementById('last-element-which-determines-styles')
@@ -108,6 +97,8 @@ function CourseMemo() {
 
   const location = useLocation()
 
+  const [sourceUrl, setSourceUrl] = useState(null)
+
   useEffect(() => {
     let isMounted = true
     if (isMounted) {
@@ -118,6 +109,8 @@ function CourseMemo() {
       renderBreadcrumbsIntoKthHeader(courseCode, language)
       // Decide which content can have wider content (exempel tables, to make them more readable)
       determineContentFlexibility()
+
+      setSourceUrl(getUrl())
     }
     return () => (isMounted = false)
   }, [])
@@ -187,7 +180,7 @@ function CourseMemo() {
         departmentName={memo.departmentName}
         languageOfInstruction={memo.languageOfInstructions}
         syllabusValid={memo.syllabusValid}
-        url={getUrl()}
+        url={sourceUrl}
         startDate={memo.firstTuititionDate}
       />
       <Row>