Merge pull request #310 from labzero/develop

Merge to master

.gitignore

@@ -45,5 +45,14 @@ test-results.xml
 screenshots
 Dockerfile.bak
 
-#Docker postgres-data
-postgres-data
+# Docker postgres-data
+postgres-data
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+
+yarnPath: .yarn/releases/yarn-3.5.1.cjs

package.json

@@ -7,15 +7,12 @@
     "npm": ">=5.0"
   },
   "browserslist": [
-    ">1%",
-    "last 4 versions",
-    "Firefox ESR",
-    "not ie < 9"
+    "defaults"
   ],
   "dependencies": {
-    "@babel/polyfill": "^7.0.0",
     "@googlemaps/js-api-loader": "^1.15.1",
     "@honeybadger-io/js": "^5.0.0",
+    "@popperjs/core": "^2.11.7",
     "@reduxjs/toolkit": "^1.9.2",
     "bcrypt": "^5.1.0",
     "body-parser": "^1.18.3",
@@ -26,7 +23,7 @@
     "connect-flash": "^0.1.1",
     "connect-session-sequelize": "^7.1.5",
     "cookie-parser": "^1.4.6",
-    "core-js": "^2.5.4",
+    "core-js": "^3.30.2",
     "cors": "^2.8.3",
     "dayjs": "^1.11.7",
     "dotenv": "^2.0.0",
@@ -58,11 +55,10 @@
     "pretty-error": "^3.0.4",
     "prop-types": "^15.8.1",
     "query-string": "^7.1.3",
-    "react": "^16.14.0",
+    "react": "^18.2.0",
     "react-autosuggest": "^10.0.2",
     "react-bootstrap": "^2.7.0",
-    "react-dom": "^16.14.0",
-    "react-flip-move": "^3.0.5",
+    "react-dom": "^18.2.0",
     "react-flip-toolkit": "^7.0.17",
     "react-geosuggest": "^2.14.1",
     "react-icons": "^4.7.1",
@@ -101,6 +97,9 @@
     "@jedmao/redux-mock-store": "^3.0.5",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@redux-devtools/extension": "^3.2.5",
+    "@testing-library/dom": "^9.2.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
     "@types/bcrypt": "^5.0.0",
     "@types/chai": "^4.3.4",
     "@types/compression": "^1.7.2",
@@ -120,34 +119,26 @@
     "@types/passport": "^1.0.11",
     "@types/passport-google-oauth20": "^2.0.11",
     "@types/passport-local": "^1.0.35",
-    "@types/react-dom": "16.9.8",
+    "@types/proxyquire": "^1.3.28",
+    "@types/react-dom": "^18.2.4",
     "@types/uuid": "^9.0.0",
     "@types/webpack-env": "^1.18.0",
     "@typescript-eslint/eslint-plugin": "^5.59.1",
     "@typescript-eslint/parser": "^5.59.1",
     "assets-webpack-plugin": "^7.1.1",
     "autoprefixer": "^9.1.5",
-    "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^9.1.0",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-react-transform": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.18",
-    "babel-preset-env": "^1.5.2",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-react-optimize": "^1.0.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "babel-template": "^6.25.0",
-    "babel-types": "^6.25.0",
     "browser-sync": "2.29.1",
     "chai": "4.3.7",
+    "chai-jsdom": "^0.2.3",
     "chokidar": "^3.5.3",
     "cross-env": "^5.0.1",
     "css-loader": "^6.7.3",
     "custom-event-polyfill": "^0.3.0",
     "cypress": "^12.5.1",
     "del": "^2.2.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.7",
     "es6-promise": "^4.1.0",
     "eslint": "^8.34.0",
     "eslint-config-airbnb": "^19.0.4",
@@ -157,12 +148,15 @@
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^7.3.0",
     "git-repository": "^0.1.4",
     "glob": "^7.1.3",
+    "global-jsdom": "^9.0.1",
     "husky": "^8.0.3",
     "identity-obj-proxy": "^3.0.0",
+    "jsdom": "^22.0.0",
     "json-loader": "^0.5.7",
     "lint-staged": "^13.2.2",
     "mkdirp": "^2.1.3",
@@ -178,7 +172,7 @@
     "react-dev-utils": "^12.0.1",
     "react-error-overlay": "^4.0.1",
     "react-refresh": "^0.14.0",
-    "react-test-renderer": "^16.14.0",
+    "react-test-renderer": "^18.2.0",
     "rimraf": "^2.6.2",
     "sass": "^1.58.0",
     "sass-loader": "^13.2.0",
@@ -259,5 +253,6 @@
     "serve": "babel-node tools/run runServer || true",
     "start": "babel-node tools/run start",
     "prepare": "husky install"
-  }
+  },
+  "packageManager": "yarn@3.5.1"
 }

src/client.tsx

@@ -9,17 +9,17 @@
 
 import 'whatwg-fetch';
 import es6Promise from 'es6-promise';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { useEffect } from 'react';
+import { createRoot, hydrateRoot } from 'react-dom/client';
 import queryString from 'query-string';
 import { Action, createPath, Location } from 'history';
+import { ResolveContext } from 'universal-router';
 import App from './components/App';
 import createFetch from './createFetch';
 import configureStore from './store/configureStore';
 import history from './history';
 import { updateMeta } from './DOMUtils';
 import routerCreator from './router';
-import { ResolveContext } from 'universal-router';
 import { Style } from '../global';
 
 es6Promise.polyfill();
@@ -82,13 +82,15 @@ const scrollPositionsHistory: {[index: string]: { scrollX: number, scrollY: numb
 
 let routes;
 if (subdomain) {
-  routes = require('./routes/team').default; // eslint-disable-line global-require
+  routes = require('./routes/team').default; // eslint-disable-line global-require, @typescript-eslint/no-var-requires
 } else {
-  routes = require('./routes/main').default; // eslint-disable-line global-require
+  routes = require('./routes/main').default; // eslint-disable-line global-require, @typescript-eslint/no-var-requires
 }
 
 const router = routerCreator(routes);
 
+const root = createRoot(container!);
+
 // Re-render the app when window.location changes
 const onLocationChange = async ({ action, location }: { action?: Action, location: Location }) => {
   // Remember the latest scroll position for the previous location
@@ -129,11 +131,8 @@ const onLocationChange = async ({ action, location }: { action?: Action, locatio
       return;
     }
 
-    const renderReactApp = isInitialRender ? ReactDOM.hydrate : ReactDOM.render;
-    renderReactApp(
-      <App context={context}>{route.component}</App>,
-      container,
-      () => {
+    const AppWithCallbackAfterRender = () => {
+      useEffect(() => {
         if (isInitialRender) {
           // Switch off the native scroll restoration behavior and handle it manually
           // https://developers.google.com/web/updates/2015/09/history-api-scroll-restoration
@@ -182,8 +181,16 @@ const onLocationChange = async ({ action, location }: { action?: Action, locatio
         if (window.ga) {
           window.ga('send', 'pageview', createPath(location));
         }
-      }
-    );
+      });
+
+      return <App context={context}>{route.component}</App>;
+    };
+
+    if (isInitialRender) {
+      hydrateRoot(container!, <AppWithCallbackAfterRender />);
+    } else {
+      root.render(<AppWithCallbackAfterRender />);
+    }
   } catch (error) {
     if (__DEV__) {
       throw error;
@@ -197,7 +204,7 @@ const onLocationChange = async ({ action, location }: { action?: Action, locatio
       window.location.reload();
     }
   }
-}
+};
 
 // Handle client-side navigation by using HTML5 History API
 // For more information visit https://github.com/mjackson/history#readme