From 91dee72ec87dc0d7abf17ecd7058cb63b9572432 Mon Sep 17 00:00:00 2001 From: Eng Zer Jun Date: Thu, 1 Feb 2024 17:40:53 +0800 Subject: [PATCH 1/2] Upgrade to React 18 Closes https://github.com/SatcherInstitute/health-equity-tracker/issues/1728. Signed-off-by: Eng Zer Jun --- frontend/package-lock.json | 371 ++++++------------------- frontend/package.json | 21 +- frontend/src/index.tsx | 27 +- frontend/src/pages/News/SinglePost.tsx | 8 +- 4 files changed, 112 insertions(+), 315 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3b7a538207..84b18c16d6 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -18,7 +18,6 @@ "@mui/icons-material": "^5.15.6", "@mui/lab": "^5.0.0-alpha.124", "@mui/material": "^5.14.9", - "@mui/styles": "^5.14.9", "@popperjs/core": "^2.11.8", "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@vitejs/plugin-react": "^4.2.1", @@ -36,10 +35,10 @@ "lru-cache": "^6.0.0", "mini-css-extract-plugin": "^2.7.2", "postcss-import": "^15.1.0", - "react": "^17.0.2", + "react": "^18.2.0", "react-animate-height": "^3.2.2", "react-cookie": "^4.1.1", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-floater": "^0.8.2", "react-helmet-async": "^1.3.0", "react-joyride": "^2.5.5", @@ -53,7 +52,7 @@ "react-vega": "^7.6.0", "seamless-scroll-polyfill": "^2.3.4", "ts-node": "^10.9.1", - "use-react-screenshot": "^3.0.0", + "use-react-screenshot": "^4.0.0", "vega": "^5.25.0", "vega-lite": "^5.15.0", "vite": "^5.0.12", @@ -64,14 +63,14 @@ "devDependencies": { "@playwright/test": "^1.40.1", "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^12.1.5", - "@testing-library/user-event": "^13.5.0", + "@testing-library/react": "^14.2.0", + "@testing-library/user-event": "^14.5.2", "@types/d3": "^7.4.0", "@types/lodash": "^4.14.199", "@types/lru-cache": "^5.1.1", "@types/node": "^18.17.15", - "@types/react": "^17.0.65", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.50", + "@types/react-dom": "^18.2.18", "@types/react-lazyload": "^3.2.0", "@types/react-router-dom": "^5.3.3", "@types/react-router-hash-link": "^2.4.6", @@ -1334,25 +1333,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.0", - "license": "MIT", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "license": "MIT", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.1.tgz", + "integrity": "sha512-iA8qE43/H5iGozC3W0YSnVSW42Vh522yyM1gj+BqRwVsTNOyr231PsXDaV04yT39PsO0QL2QpbI/M0ZaLUQgRQ==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.1" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.2", - "license": "MIT", + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.8.tgz", + "integrity": "sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.6.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -1360,8 +1362,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "license": "MIT" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" }, "node_modules/@fontsource-variable/dm-sans": { "version": "5.0.3", @@ -1509,7 +1512,8 @@ }, "node_modules/@mui/base": { "version": "5.0.0-beta.21", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.21.tgz", + "integrity": "sha512-eTKWx3WV/nwmRUK4z4K1MzlMyWCsi3WJ3RtV4DiXZeRh4qd4JCyp1Zzzi8Wv9xM4dEBmqQntFoei716PzwmFfA==", "dependencies": { "@babel/runtime": "^7.23.2", "@floating-ui/react-dom": "^2.0.2", @@ -1708,45 +1712,6 @@ } } }, - "node_modules/@mui/styles": { - "version": "5.14.15", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.23.2", - "@emotion/hash": "^0.9.1", - "@mui/private-theming": "^5.14.15", - "@mui/types": "^7.2.7", - "@mui/utils": "^5.14.15", - "clsx": "^2.0.0", - "csstype": "^3.1.2", - "hoist-non-react-statics": "^3.3.2", - "jss": "^10.10.0", - "jss-plugin-camel-case": "^10.10.0", - "jss-plugin-default-unit": "^10.10.0", - "jss-plugin-global": "^10.10.0", - "jss-plugin-nested": "^10.10.0", - "jss-plugin-props-sort": "^10.10.0", - "jss-plugin-rule-value-function": "^10.10.0", - "jss-plugin-vendor-prefixer": "^10.10.0", - "prop-types": "^15.8.1" - }, - "engines": { - "node": ">=12.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/mui" - }, - "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, "node_modules/@mui/system": { "version": "5.14.15", "license": "MIT", @@ -1825,7 +1790,8 @@ }, "node_modules/@mui/x-tree-view": { "version": "6.0.0-alpha.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-6.0.0-alpha.1.tgz", + "integrity": "sha512-JUG3HmBrmGEALbCFg1b+i7h726e1dWYZs4db3syO1j+Q++E3nbvE4Lehp5yGTFm+8esH0Tny50tuJaa4WX6VSA==", "dependencies": { "@babel/runtime": "^7.22.6", "@mui/utils": "^5.14.3", @@ -2338,7 +2304,6 @@ "version": "9.3.3", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -2357,7 +2322,6 @@ "version": "4.3.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-convert": "^2.0.1" }, @@ -2372,7 +2336,6 @@ "version": "4.1.2", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" @@ -2388,7 +2351,6 @@ "version": "2.0.1", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "color-name": "~1.1.4" }, @@ -2399,14 +2361,12 @@ "node_modules/@testing-library/dom/node_modules/color-name": { "version": "1.1.4", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/@testing-library/dom/node_modules/has-flag": { "version": "4.0.0", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=8" } @@ -2415,7 +2375,6 @@ "version": "7.2.0", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "has-flag": "^4.0.0" }, @@ -2475,113 +2434,30 @@ "dev": true }, "node_modules/@testing-library/react": { - "version": "12.1.5", + "version": "14.2.0", + "resolved": "https://registry.npmjs.org/@testing-library/react/-/react-14.2.0.tgz", + "integrity": "sha512-7uBnPHyOG6nDGCzv8SLeJbSa33ZoYw7swYpSLIgJvBALdq7l9zPNk33om4USrxy1lKTxXaVfufzLmq83WNfWIw==", "dev": true, - "license": "MIT", "dependencies": { "@babel/runtime": "^7.12.5", - "@testing-library/dom": "^8.0.0", - "@types/react-dom": "<18.0.0" + "@testing-library/dom": "^9.0.0", + "@types/react-dom": "^18.0.0" }, "engines": { - "node": ">=12" + "node": ">=14" }, "peerDependencies": { - "react": "<18.0.0", - "react-dom": "<18.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/@testing-library/dom": { - "version": "8.20.1", - "dev": true, - "license": "MIT", - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.1.3", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/@testing-library/react/node_modules/ansi-styles": { - "version": "4.3.0", - "dev": true, - "license": "MIT", - "dependencies": { - "color-convert": "^2.0.1" - }, - "engines": { - "node": ">=8" - }, - "funding": { - "url": "https://github.com/chalk/ansi-styles?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/chalk": { - "version": "4.1.2", - "dev": true, - "license": "MIT", - "dependencies": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - }, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/chalk/chalk?sponsor=1" - } - }, - "node_modules/@testing-library/react/node_modules/color-convert": { - "version": "2.0.1", - "dev": true, - "license": "MIT", - "dependencies": { - "color-name": "~1.1.4" - }, - "engines": { - "node": ">=7.0.0" - } - }, - "node_modules/@testing-library/react/node_modules/color-name": { - "version": "1.1.4", - "dev": true, - "license": "MIT" - }, - "node_modules/@testing-library/react/node_modules/has-flag": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=8" - } - }, - "node_modules/@testing-library/react/node_modules/supports-color": { - "version": "7.2.0", - "dev": true, - "license": "MIT", - "dependencies": { - "has-flag": "^4.0.0" - }, - "engines": { - "node": ">=8" + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "node_modules/@testing-library/user-event": { - "version": "13.5.0", + "version": "14.5.2", + "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-14.5.2.tgz", + "integrity": "sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ==", "dev": true, - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.12.5" - }, "engines": { - "node": ">=10", + "node": ">=12", "npm": ">=6" }, "peerDependencies": { @@ -2998,8 +2874,9 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "17.0.69", - "license": "MIT", + "version": "18.2.50", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.50.tgz", + "integrity": "sha512-y0XIDJkqp9HynS1VBktZG9mUziHTK5WZTAFDP/UfzSq+poV1drUKsr4VkjMyHTbqMz26BwgLZVYdx/EgPm7EkQ==", "dependencies": { "@types/prop-types": "*", "@types/scheduler": "*", @@ -3007,11 +2884,12 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.22", + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", "dev": true, - "license": "MIT", "dependencies": { - "@types/react": "^17" + "@types/react": "*" } }, "node_modules/@types/react-lazyload": { @@ -4810,14 +4688,6 @@ "utrie": "^1.0.2" } }, - "node_modules/css-vendor": { - "version": "2.0.8", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.8.3", - "is-in-browser": "^1.0.2" - } - }, "node_modules/css.escape": { "version": "1.5.1", "dev": true, @@ -5480,7 +5350,8 @@ }, "node_modules/dom-helpers": { "version": "5.2.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" @@ -7280,10 +7151,6 @@ "node": ">=8" } }, - "node_modules/hyphenate-style-name": { - "version": "1.0.4", - "license": "BSD-3-Clause" - }, "node_modules/iconv-lite": { "version": "0.6.3", "license": "MIT", @@ -7592,10 +7459,6 @@ "node": ">=0.10.0" } }, - "node_modules/is-in-browser": { - "version": "1.1.3", - "license": "MIT" - }, "node_modules/is-lite": { "version": "0.8.2", "license": "MIT" @@ -8208,80 +8071,6 @@ "version": "2.0.0", "license": "MIT" }, - "node_modules/jss": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "csstype": "^3.0.2", - "is-in-browser": "^1.1.3", - "tiny-warning": "^1.0.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/jss" - } - }, - "node_modules/jss-plugin-camel-case": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "hyphenate-style-name": "^1.0.3", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-default-unit": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-global": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-nested": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "node_modules/jss-plugin-props-sort": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0" - } - }, - "node_modules/jss-plugin-rule-value-function": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "jss": "10.10.0", - "tiny-warning": "^1.0.2" - } - }, - "node_modules/jss-plugin-vendor-prefixer": { - "version": "10.10.0", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.3.1", - "css-vendor": "^2.0.8", - "jss": "10.10.0" - } - }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "dev": true, @@ -9300,7 +9089,9 @@ }, "node_modules/popper.js": { "version": "1.16.1", - "license": "MIT", + "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz", + "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==", + "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -9616,11 +9407,11 @@ } }, "node_modules/react": { - "version": "17.0.2", - "license": "MIT", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", + "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" @@ -9650,15 +9441,15 @@ } }, "node_modules/react-dom": { - "version": "17.0.2", - "license": "MIT", + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", + "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.0" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.2.0" } }, "node_modules/react-fast-compare": { @@ -9734,15 +9525,14 @@ "license": "MIT" }, "node_modules/react-joyride/node_modules/react-floater": { - "version": "0.7.6", - "license": "MIT", + "version": "0.7.9", + "resolved": "https://registry.npmjs.org/react-floater/-/react-floater-0.7.9.tgz", + "integrity": "sha512-NXqyp9o8FAXOATOEo0ZpyaQ2KPb4cmPMXGWkx377QtJkIXHlHRAGer7ai0r0C1kG5gf+KJ6Gy+gdNIiosvSicg==", "dependencies": { - "deepmerge": "^4.2.2", - "exenv": "^1.2.2", + "deepmerge": "^4.3.1", "is-lite": "^0.8.2", "popper.js": "^1.16.0", "prop-types": "^15.8.1", - "react-proptype-conditional-require": "^1.0.4", "tree-changes": "^0.9.1" }, "peerDependencies": { @@ -9752,15 +9542,18 @@ }, "node_modules/react-joyride/node_modules/react-floater/node_modules/@gilbarbara/deep-equal": { "version": "0.1.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/@gilbarbara/deep-equal/-/deep-equal-0.1.2.tgz", + "integrity": "sha512-jk+qzItoEb0D0xSSmrKDDzf9sheQj/BAPxlgNxgmOaA3mxpUa6ndJLYGZKsJnIVEQSD8zcTbyILz7I0HcnBCRA==" }, "node_modules/react-joyride/node_modules/react-floater/node_modules/is-lite": { "version": "0.8.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/is-lite/-/is-lite-0.8.2.tgz", + "integrity": "sha512-JZfH47qTsslwaAsqbMI3Q6HNNjUuq6Cmzzww50TdP5Esb6e1y2sK2UAaZZuzfAzpoI2AkxoPQapZdlDuP6Vlsw==" }, "node_modules/react-joyride/node_modules/react-floater/node_modules/tree-changes": { "version": "0.9.3", - "license": "MIT", + "resolved": "https://registry.npmjs.org/tree-changes/-/tree-changes-0.9.3.tgz", + "integrity": "sha512-vvvS+O6kEeGRzMglTKbc19ltLWNtmNt1cpBoSYLj/iEcPVvpJasemKOlxBrmZaCtDJoF+4bwv3m01UKYi8mukQ==", "dependencies": { "@gilbarbara/deep-equal": "^0.1.1", "is-lite": "^0.8.2" @@ -9792,10 +9585,6 @@ "version": "2.0.0", "license": "MIT" }, - "node_modules/react-proptype-conditional-require": { - "version": "1.0.4", - "license": "MIT" - }, "node_modules/react-query": { "version": "3.39.3", "license": "MIT", @@ -9913,7 +9702,8 @@ }, "node_modules/react-transition-group": { "version": "4.4.5", - "license": "BSD-3-Clause", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -10296,11 +10086,11 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "license": "MIT", + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", + "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { @@ -11477,15 +11267,16 @@ } }, "node_modules/use-react-screenshot": { - "version": "3.0.0", - "license": "MIT", + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/use-react-screenshot/-/use-react-screenshot-4.0.0.tgz", + "integrity": "sha512-4UZIORp7iCklfNOS/dPJab9SPeGdS0nFyIi3qA1rfMyYf/em/KfodYhrOlSHAHWvfdeCrS67Jjk6H4M4oLYSWg==", "engines": { "node": ">=8", "npm": ">=5" }, "peerDependencies": { "html2canvas": "^1.3.3", - "react": "^17.0.2" + "react": "^18.2.0" } }, "node_modules/util-deprecate": { diff --git a/frontend/package.json b/frontend/package.json index 0557fb5b08..eef86cc5d5 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,7 +4,11 @@ "type": "module", "private": true, "overrides": { - "chokidar": "3.5.3" + "chokidar": "3.5.3", + "react-lazyload": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + } }, "dependencies": { "@babel/plugin-syntax-jsx": "^7.22.5", @@ -17,7 +21,6 @@ "@mui/icons-material": "^5.15.6", "@mui/lab": "^5.0.0-alpha.124", "@mui/material": "^5.14.9", - "@mui/styles": "^5.14.9", "@popperjs/core": "^2.11.8", "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@vitejs/plugin-react": "^4.2.1", @@ -35,10 +38,10 @@ "lru-cache": "^6.0.0", "mini-css-extract-plugin": "^2.7.2", "postcss-import": "^15.1.0", - "react": "^17.0.2", + "react": "^18.2.0", "react-animate-height": "^3.2.2", "react-cookie": "^4.1.1", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "react-floater": "^0.8.2", "react-helmet-async": "^1.3.0", "react-joyride": "^2.5.5", @@ -52,7 +55,7 @@ "react-vega": "^7.6.0", "seamless-scroll-polyfill": "^2.3.4", "ts-node": "^10.9.1", - "use-react-screenshot": "^3.0.0", + "use-react-screenshot": "^4.0.0", "vega": "^5.25.0", "vega-lite": "^5.15.0", "vite": "^5.0.12", @@ -63,14 +66,14 @@ "devDependencies": { "@playwright/test": "^1.40.1", "@testing-library/jest-dom": "^4.2.4", - "@testing-library/react": "^12.1.5", - "@testing-library/user-event": "^13.5.0", + "@testing-library/react": "^14.2.0", + "@testing-library/user-event": "^14.5.2", "@types/d3": "^7.4.0", "@types/lodash": "^4.14.199", "@types/lru-cache": "^5.1.1", "@types/node": "^18.17.15", - "@types/react": "^17.0.65", - "@types/react-dom": "^17.0.20", + "@types/react": "^18.2.50", + "@types/react-dom": "^18.2.18", "@types/react-lazyload": "^3.2.0", "@types/react-router-dom": "^5.3.3", "@types/react-router-hash-link": "^2.4.6", diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx index 3949e135c5..e0f8944acb 100644 --- a/frontend/src/index.tsx +++ b/frontend/src/index.tsx @@ -1,10 +1,10 @@ import { StrictMode } from 'react' -import ReactDOM from 'react-dom' -import './index.css' -import App from './App' +import { createRoot } from 'react-dom/client' import { QueryClient, QueryClientProvider } from 'react-query' -import { persistQueryClient } from 'react-query/persistQueryClient-experimental' import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental' +import { persistQueryClient } from 'react-query/persistQueryClient-experimental' +import App from './App' +import './index.css' const queryClient = new QueryClient({ defaultOptions: { @@ -25,11 +25,14 @@ void persistQueryClient({ persistor: localStoragePersistor, }) -ReactDOM.render( - - - - - , - document.getElementById('root') -) +const container = document.getElementById('root') +if (container !== null) { + const root = createRoot(container) + root.render( + + + + + + ) +} diff --git a/frontend/src/pages/News/SinglePost.tsx b/frontend/src/pages/News/SinglePost.tsx index 2038dfbea9..11794fb969 100644 --- a/frontend/src/pages/News/SinglePost.tsx +++ b/frontend/src/pages/News/SinglePost.tsx @@ -52,7 +52,7 @@ export default function SinglePost(props: SinglePostProps) { } // FETCH ARTICLES - const { data, isLoading, error } = useQuery( + const { data, isLoading, isError } = useQuery( ARTICLES_KEY, fetchNewsData, REACT_QUERY_OPTIONS @@ -91,7 +91,7 @@ export default function SinglePost(props: SinglePostProps) { return ( <> - {error && ( + {isError && ( )} - {error && ( + {isError && ( )} - {!isLoading && !error && articleImage && ( + {!isLoading && !isError && articleImage && ( Date: Fri, 2 Feb 2024 00:37:58 +0800 Subject: [PATCH 2/2] Update first onboarding step target to #madlib-box Our components gets rendered before finishes parsing the query params and selects the "COVID-19" dropdown. This is why the ".covid-dropdown-topic" CSS class is not available initially and gets skipped. Reference: https://github.com/SatcherInstitute/health-equity-tracker/pull/2847#issuecomment-1921706731 Signed-off-by: Eng Zer Jun --- frontend/src/pages/ExploreData/OnboardingSteps.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/pages/ExploreData/OnboardingSteps.tsx b/frontend/src/pages/ExploreData/OnboardingSteps.tsx index eac661bca9..41346bf3e3 100644 --- a/frontend/src/pages/ExploreData/OnboardingSteps.tsx +++ b/frontend/src/pages/ExploreData/OnboardingSteps.tsx @@ -4,7 +4,7 @@ import covidClick from '../../assets/screengrabs/covidClick.mp4' export function getOnboardingSteps(pageIsWide: boolean) { const steps = [ onboardingStep( - '.covid-dropdown-topic', + '#madlib-box', 'Start Your Search', <>