⬆️ Upgrade to React 18 (+ other upgrades) (#379)

- Upgrade React from 16 to 18
- Upgrade React Router from 4 to 6
- Replace the markdown editor `react-mde`, which is no longer maintained and lacks a React 18-compatible version, by `react-markdown`
- Upgrade Prettier from 1 to 3
- Replace `pretty-quick`, which is no longer maintained, by `lint-staged`
- Revise how the no-auth mode works. When the server is running in this mode, the client must now send a user ID through the `Authorization` header. The server will no longer create a user automatically. This is useful for e2e tests, which can now have full control over the user profile.
- Upgrade some ESLint plugins

client/.eslintrc

@@ -1,18 +1,31 @@
 {
   "env": {
     "browser": true,
-    "es6": true
+    "es2022": true
   },
-  "extends": ["standard", "react-app", "prettier", "prettier/standard"],
+  "extends": ["standard", "plugin:react/recommended", "plugin:react/jsx-runtime", "prettier"],
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
     "ecmaVersion": 2019,
     "sourceType": "module",
+    "requireConfigFile": false,
     "ecmaFeatures": {
-      "jsx": true
+      "jsx": true,
+      "modules": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
     }
   },
   "rules": {
-    "no-console": 1,
+    "no-console": "warn",
+    "react/prop-types": "off",
+    "react/no-unescaped-entities": "off",
     "linebreak-style": ["error", "unix"],
     "space-before-function-paren": [
       "error",

client/package.json

@@ -3,27 +3,25 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@apollo/client": "^3.7.15",
+    "@apollo/client": "^3.7.17",
+    "@uiw/react-md-editor": "^3.23.3",
     "algoliasearch": "^3.35.1",
     "apollo3-cache-persist": "^0.14.1",
     "auth0-js": "^9.12.1",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.5",
     "copy-to-clipboard": "^3.2.0",
     "date-fns": "^2.30.0",
-    "eslint-config-react-app": "^7.0.1",
     "graphql": "^14.7.0",
-    "graphql-tag": "^2.8.0",
     "lodash": "^4.17.15",
-    "normalize.css": "^8.0.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
+    "modern-normalize": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.0.0-beta",
-    "react-mde": "^7.9.0",
+    "react-markdown": "^8.0.7",
     "react-onclickoutside": "^6.9.0",
-    "react-pluralize": "^1.6.3",
-    "react-router": "^4.2.0",
-    "react-router-dom": "^4.2.2",
+    "react-router": "^6.14.1",
+    "react-router-dom": "^6.14.1",
     "showdown": "^1.9.1",
     "showdown-xss-filter": "^0.2.0",
     "subscriptions-transport-ws": "^0.9.16",
@@ -38,23 +36,33 @@
     "prettier:write": "npm run prettier -- --write",
     "prettier:check": "npm run prettier -- --check"
   },
+  "lint-staged": {
+    "./src/**/*.{js,jsx}": [
+      "npm run lint",
+      "npm run prettier"
+    ]
+  },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged"
+      "pre-commit": "lint-staged"
     }
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
     "@vitejs/plugin-react": "^4.0.0",
     "dotenv": "^5.0.0",
     "dotenv-cli": "^1.4.0",
-    "eslint-config-prettier": "^4.3.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-react-app": "^7.0.1",
     "eslint-config-standard": "^12.0.0",
-    "eslint-plugin-node": "^7.0.1",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.32.2",
     "husky": "^3.1.0",
-    "prettier": "^1.19.1",
-    "pretty-quick": "^1.11.1",
+    "lint-staged": "^13.2.3",
+    "prettier": "^3.0.0",
     "sass": "^1.52.3",
     "vite": "^4.1.4"
   },

client/src/components/AlertStack/Alert.css

@@ -20,7 +20,9 @@
 .alert-wrapper {
   position: relative;
   max-height: 0;
-  transition: max-height 0.5s, margin-right 0.5s 0.5s;
+  transition:
+    max-height 0.5s,
+    margin-right 0.5s 0.5s;
   margin-right: 0;
 }
 

client/src/components/AlertStack/Alert.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import cn from 'classnames'
+import PropTypes from 'prop-types'
+import { Component } from 'react'
 
 import AlertContext from './AlertContext'
 
@@ -13,7 +13,7 @@ class Alert extends Component {
     setTimeout(() => this.context.showAlert(this.props.alert), 0)
     setTimeout(
       () => this.context.closeAlert(this.props.alert),
-      this.props.alert.type === 'success' ? 5000 : 7000
+      this.props.alert.type === 'success' ? 5000 : 7000,
     )
   }
 
@@ -24,7 +24,7 @@ class Alert extends Component {
       <div
         className={cn('alert-wrapper', {
           'is-shown': alert.shown,
-          'is-closed': alert.closed
+          'is-closed': alert.closed,
         })}
       >
         <div className={cn('alert', 'is-' + alert.type)}>
@@ -39,8 +39,8 @@ class Alert extends Component {
 Alert.propTypes = {
   alert: PropTypes.shape({
     type: PropTypes.string.isRequired,
-    message: PropTypes.node.isRequired
-  }).isRequired
+    message: PropTypes.node.isRequired,
+  }).isRequired,
 }
 
 export default Alert

client/src/components/AlertStack/AlertContext.jsx

@@ -11,15 +11,15 @@ class AlertProvider extends Component {
       alerts: [],
       pushAlert: this.pushAlert,
       showAlert: this.showAlert,
-      closeAlert: this.closeAlert
+      closeAlert: this.closeAlert,
     }
 
     AlertProvider.pushAlert = this.pushAlert
   }
 
-  pushAlert = alert => {
-    this.setState(state => ({
-      alerts: [{ ...alert, id: Math.random() }, ...state.alerts]
+  pushAlert = (alert) => {
+    this.setState((state) => ({
+      alerts: [{ ...alert, id: Math.random() }, ...state.alerts],
     }))
 
     if (['error', 'warning'].includes(alert.type)) {
@@ -28,20 +28,20 @@ class AlertProvider extends Component {
     }
   }
 
-  showAlert = alert =>
-    this.setState(state => ({
-      alerts: state.alerts.map(a => {
+  showAlert = (alert) =>
+    this.setState((state) => ({
+      alerts: state.alerts.map((a) => {
         if (a !== alert) return a
         return { ...alert, shown: true }
-      })
+      }),
     }))
 
-  closeAlert = alert =>
-    this.setState(state => ({
-      alerts: state.alerts.map(a => {
+  closeAlert = (alert) =>
+    this.setState((state) => ({
+      alerts: state.alerts.map((a) => {
         if (a !== alert) return a
         return { ...alert, closed: true }
-      })
+      }),
     }))
 
   render() {
@@ -50,7 +50,7 @@ class AlertProvider extends Component {
 }
 
 AlertProvider.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 }
 
 export default AlertContext

client/src/components/AlertStack/AlertStack.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react'
+import { Component } from 'react'
 
 import Alert from './Alert'
 import AlertContext from './AlertContext'
@@ -10,7 +10,7 @@ class AlertStack extends Component {
   render() {
     return (
       <div className="alert-stack">
-        {this.context.alerts.map(alert => (
+        {this.context.alerts.map((alert) => (
           <Alert key={alert.id} alert={alert} />
         ))}
       </div>

client/src/components/Authenticated/Authenticated.jsx

@@ -1,13 +1,10 @@
-import React from 'react'
 import PropTypes from 'prop-types'
-import { withRouter } from 'react-router'
-import { Redirect } from 'react-router-dom'
+import { Navigate } from 'react-router-dom'
 
 import { useAuth } from 'contexts'
 
-const Authenticated = ({ location, reverse, redirect, children, admin, specialist }) => {
+const Authenticated = ({ reverse, redirect, children, admin, specialist }) => {
   const { isAuth, isAdmin, isSpecialist } = useAuth()
-  const currentURL = location.pathname + location.search
 
   if (admin && isAdmin) {
     return children
@@ -18,26 +15,26 @@ const Authenticated = ({ location, reverse, redirect, children, admin, specialis
   }
 
   if (admin || specialist) {
-    return redirect ? <Redirect to="/" /> : ''
+    return redirect ? <Navigate replace to="/" /> : ''
   }
 
   if ((isAuth && !reverse) || (!isAuth && reverse)) {
     return children
   }
 
   if (redirect) {
-    return <Redirect to={{ pathname: redirect, state: { from: currentURL } }} />
+    return <Navigate replace to={redirect} />
   }
 
   return ''
 }
 
 Authenticated.propTypes = {
-  location: PropTypes.object.isRequired,
   reverse: PropTypes.bool,
   redirect: PropTypes.string,
   children: PropTypes.node,
-  admin: PropTypes.bool
+  admin: PropTypes.bool,
+  specialist: PropTypes.bool,
 }
 
-export default withRouter(Authenticated)
+export default Authenticated

client/src/components/Avatar/Avatar.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 import './Avatar.css'
@@ -9,7 +8,7 @@ const Avatar = ({ image, alt, ...otherProps }) => (
 
 Avatar.propTypes = {
   image: PropTypes.string.isRequired,
-  alt: PropTypes.string
+  alt: PropTypes.string,
 }
 
 export default Avatar

client/src/components/Button/Button.jsx

@@ -1,6 +1,6 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import cn from 'classnames'
+import PropTypes from 'prop-types'
+import { Component } from 'react'
 
 import './Button.css'
 
@@ -23,7 +23,7 @@ class Button extends Component {
       ...otherProps
     } = this.props
 
-    const b2s = b => (b ? 'true' : 'false')
+    const b2s = (b) => (b ? 'true' : 'false')
 
     const buttonModifiers = [
       'primary',
@@ -33,7 +33,7 @@ class Button extends Component {
       'active',
       'raised',
       'fixed',
-      'small'
+      'small',
     ].reduce((acc, m) => {
       this.props[m] && (acc[m] = b2s(this.props[m]))
       return acc
@@ -73,7 +73,9 @@ Button.propTypes = {
   active: PropTypes.bool,
   raised: PropTypes.bool,
   disabled: PropTypes.bool,
-  fixed: PropTypes.bool
+  fixed: PropTypes.bool,
+  loading: PropTypes.bool,
+  small: PropTypes.bool,
 }
 
 export default Button

client/src/components/Card/Card.jsx

@@ -1,10 +1,9 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cn from 'classnames'
+import PropTypes from 'prop-types'
 
-import CardTitle from './CardTitle'
-import CardText from './CardText'
 import CardActions from './CardActions'
+import CardText from './CardText'
+import CardTitle from './CardTitle'
 
 import './Card.css'
 
@@ -16,7 +15,7 @@ const Card = ({ children, className, ...otherProps }) => (
 
 Card.propTypes = {
   children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  className: PropTypes.string,
 }
 
 Card.Title = CardTitle

client/src/components/Card/CardActions.jsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import PropTypes from 'prop-types'
 
 const CardAction = ({ children, ...otherProps }) => (
@@ -8,7 +7,7 @@ const CardAction = ({ children, ...otherProps }) => (
 )
 
 CardAction.propTypes = {
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 }
 
 export default CardAction

client/src/components/Card/CardText.jsx

@@ -1,6 +1,5 @@
-import React from 'react'
-import PropTypes from 'prop-types'
 import cn from 'classnames'
+import PropTypes from 'prop-types'
 
 const CardText = ({ children, collapsed, className, ...otherProps }) => (
   <div className={cn('card-item card-text', { collapsed }, className)} {...otherProps}>
@@ -11,7 +10,7 @@ const CardText = ({ children, collapsed, className, ...otherProps }) => (
 CardText.propTypes = {
   children: PropTypes.node.isRequired,
   collapsed: PropTypes.bool,
-  className: PropTypes.string
+  className: PropTypes.string,
 }
 
 export default CardText